ios - 如何在 Swift 3 中的可拖动 UIView 之间创建连接线？并测量线角度

Question

我需要在屏幕上有两个用于拖动的 View (通过 UIPanGestureRecogniser 完成)以及之间的连接线，因此当我自由移动 View 时，线保持连接状态(就像 View 之间的绳子一样) 。并测量这条线的角度。这是我到目前为止的代码

    var rect1:UIView!
    var rect2:UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // create my two views

        rect1 = UIView(frame: CGRect(x: 50, y: 150, width: 40, height: 40))
        rect1.backgroundColor = UIColor.orange
        self.view.addSubview(rect1)

        rect2 = UIView(frame: CGRect(x: 200, y: 150, width: 40, height: 40))
        rect2.backgroundColor = UIColor.yellow
        self.view.addSubview(rect2)

        // and the UIPanGestureRecognizer objects

        let gesture1 = UIPanGestureRecognizer(target: self, action: #selector(dragView))
        rect1.addGestureRecognizer(gesture1)

        let gesture2 = UIPanGestureRecognizer(target: self, action: #selector(dragView))
        rect2.addGestureRecognizer(gesture2)

        // add mi connecting line between 

    func addLine(fromPoint start: rect1.center, toPoint end:rect2.center) 
        }

    // create the func for moving the views

    func dragView(_ sender: UIPanGestureRecognizer)
    {        
        let point = sender.location(in: self.view)    
        let theDraggedView = sender.view!
        theDraggedView.center = point        
    }     
    // and the func for line creation    


     func addLine(fromPoint start: CGPoint, toPoint end:CGPoint) 
    {
    let line = CAShapeLayer()
    let linePath = UIBezierPath()
    linePath.move(to: start)
    linePath.addLine(to: end)
    line.path = linePath.cgPath
    line.strokeColor = UIColor.red.cgColor
    line.lineWidth = 2
    line.lineJoin = kCALineJoinRound
    self.view.layer.addSublayer(line)
    }
}

我这里有货!如果我在 DragView 中再次使用 addline 函数，则会创建数百行。并且不知道下一步该做什么

Answer 1

那是因为当您一次又一次调用 addLine 函数时，您并没有删除前一行。

要删除上一行，请在类顶部声明 var line = CAShapeLayer() ，这样您就可以获得绘制的上一行，然后每当您调用 addLine 函数时只需在开始时从 super View 中删除前一行，例如:

line.removeFromSuperlayer()

您的完整代码将是:

import UIKit

class ViewController: UIViewController {

    var rect1:UIView!
    var rect2:UIView!
    var line = CAShapeLayer()

    override func viewDidLoad() {
        super.viewDidLoad()

        rect1 = UIView(frame: CGRect(x: 50, y: 150, width: 40, height: 40))
        rect1.backgroundColor = UIColor.orange
        self.view.addSubview(rect1)

        rect2 = UIView(frame: CGRect(x: 200, y: 150, width: 40, height: 40))
        rect2.backgroundColor = UIColor.yellow
        self.view.addSubview(rect2)

        // and the UIPanGestureRecognizer objects

        let gesture1 = UIPanGestureRecognizer(target: self, action: #selector(dragView))
        rect1.addGestureRecognizer(gesture1)

        let gesture2 = UIPanGestureRecognizer(target: self, action: #selector(dragView))
        rect2.addGestureRecognizer(gesture2)

        addLine(start: rect1.center, toPoint:rect2.center)
    }

    func dragView(_ sender: UIPanGestureRecognizer) {

        let point = sender.location(in: self.view)
        let theDraggedView = sender.view!
        theDraggedView.center = point
        addLine(start: rect1.center, toPoint:rect2.center)
    }


    func addLine(start: CGPoint, toPoint end:CGPoint) {

        line.removeFromSuperlayer()
        let linePath = UIBezierPath()
        linePath.move(to: start)
        linePath.addLine(to: end)
        line.path = linePath.cgPath
        line.strokeColor = UIColor.red.cgColor
        line.lineWidth = 2
        line.lineJoin = kCALineJoinRound
        self.view.layer.addSublayer(line)
    }
}

你的结果将是: