如何重新绘制可移动的两个 UIView 之间的连接线

Question

我想根据 UIView 的位置重新绘制两个可移动 UIView 之间的线。

于是我找到了。但是，此方法使用 "Pan Gesture" 重新绘制线条，具体取决于手势的位置。

也找到了setNeedsDisplay()，但是这个是请求重新绘制，不是实时事件函数

我想找到的方法不是用手势重画线，而是实时重画线

更详细一点，我将 "UIColisionBehavior" 应用于我创建的所有 UIVview。应用的 UIView 在被击中时改变了位置，并且根据改变的位置，正在重绘线。

好像UIView是这样移动的，根据移动的位置重新绘制了连接线：

下面是我在 Playground 中试验的代码。执行代码可以看到，第一条连接的紫色线是连接到正在下降的UIView，并没有脱落：

//: A UIKit based Playground for presenting user interface

import UIKit
import PlaygroundSupport

class MoveAbleView : UIView {
    var outGoingLine : CAShapeLayer?
    var inComingLine : CAShapeLayer?

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func lineTo(connectedView: MoveAbleView) -> CAShapeLayer {
        let path = UIBezierPath()
        path.move(to: self.center)
        path.addLine(to: connectedView.center)

        let line = CAShapeLayer()
        line.path = path.cgPath
        line.lineWidth = 5
        line.strokeColor = UIColor.purple.cgColor
        connectedView.inComingLine = line
        outGoingLine = line
        return line
    }
}

class MyViewController : UIViewController {
    var dynamicAnimator = UIDynamicAnimator()
    var collisionBehavior = UICollisionBehavior()
    var gravityBehavior = UIGravityBehavior()

    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        self.view = view

        let viw = MoveAbleView(frame: CGRect(x: 100, y: 200, width: 50, height: 50))
        viw.backgroundColor = UIColor.red
        self.view.addSubview(viw)

        let viw2 = MoveAbleView(frame: CGRect(x: 300, y: 100, width: 50, height: 50))
        viw2.backgroundColor = UIColor.orange
        self.view.addSubview(viw2)

        let gravityViw = MoveAbleView(frame: CGRect(x: 100, y: 0, width: 50, height: 50))
        gravityViw.backgroundColor = UIColor.green
        self.view.addSubview(gravityViw)

        let gravityViw2 = MoveAbleView(frame: CGRect(x: 300, y: -200, width: 50, height: 50))
        gravityViw2.backgroundColor = UIColor.blue
        self.view.addSubview(gravityViw2)

        collisionBehavior.addItem(viw)
        collisionBehavior.addItem(viw2)
        collisionBehavior.addItem(gravityViw)
        collisionBehavior.addItem(gravityViw2)

        gravityBehavior.addItem(gravityViw)
        gravityBehavior.addItem(gravityViw2)

        dynamicAnimator.addBehavior(collisionBehavior)
        dynamicAnimator.addBehavior(gravityBehavior)
    self.view.layer.addSublayer(viw.lineTo(connectedView: viw2))
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

UIView敲击移动时，如何实时重画一条连线？

Answer 1

实际上，您只需要另一个 UIView 来表示线条并使用 attachmentBehaviors。例如，两个附加对象之间有一条线。

class MyViewController : UIViewController {

override func loadView() {

    let view = UIView()


    view.backgroundColor = .white
    self.view = view
    dynamicAnimator = UIDynamicAnimator(referenceView: view)

    let viw = MoveAbleView(frame: CGRect(x: 100, y: 200, width: 50, height: 50))
    viw.backgroundColor = UIColor.red
    self.view.addSubview(viw)

    let viw2 = MoveAbleView(frame: CGRect(x: 300, y: 200, width: 50, height: 50))
    viw2.backgroundColor = UIColor.orange
    self.view.addSubview(viw2)

    let gravityViw = MoveAbleView(frame: CGRect(x: 100, y: 0, width: 50, height: 50))
    gravityViw.backgroundColor = UIColor.green
    self.view.addSubview(gravityViw)



    let line1 = MoveAbleView(frame: CGRect(x: 125, y: 225, width: 200, height: 10))
    line1.backgroundColor = UIColor.purple
    self.view.addSubview(line1)


    let l1 =    UIAttachmentBehavior.init(item: viw, offsetFromCenter: UIOffset.zero, attachedTo: line1, offsetFromCenter: UIOffset.init(horizontal: -100, vertical: 0))
    let l2 =    UIAttachmentBehavior.init(item: viw2, offsetFromCenter: UIOffset.zero, attachedTo: line1, offsetFromCenter: UIOffset.init(horizontal: 100, vertical: 0))

    collisionBehavior.addItem(viw)
    collisionBehavior.addItem(viw2)
    collisionBehavior.addItem(gravityViw)


    gravityBehavior.addItem(gravityViw)

     dynamicAnimator.addBehavior(l1)
     dynamicAnimator.addBehavior(l2)

    dynamicAnimator.addBehavior(collisionBehavior)
    dynamicAnimator.addBehavior(gravityBehavior)

   }


  }

如何重新绘制可移动的两个 UIView 之间的连接线

How to re-draw line connected between moveable two UIView

uiview

cashapelayer

ios

uikit-dynamics

swift