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

Question

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

所以我找到了this。但是，此方法根据手势的位置使用“平移手势”重新绘制线条。



还可以找到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。例如，两个附加对象之间有一条线。

类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)

   }


  }