Comment créer une ligne de connexion entre des UIViews glissables dans swif 3? et mesure l'angle de ligne

Question

Je dois avoir deux vues dans l'écran pour faire glisser (fait avec UIPanGestureRecogniser) et une ligne de connexion entre, donc quand je déplace les vues librement la ligne rester attachée (comme une corde entre les vues). et mesurez l'angle de cette ligne. ceci est mon code jusqu'à présent

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 betwen 

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

et ici je suis disponible !! si j'utilise à nouveau la fonction addline dans le dragView, crée des centaines de lignes. et ne sait pas quoi faire ensuite s'il vous plaît aider!

Answer 1

C'est parce que vous ne supprimez pas la ligne précédente lorsque vous appelez addLine fonction encore et encore.

Pour supprimer la ligne précédente déclarer var line = CAShapeLayer() en haut dans la classe afin que vous puissiez obtenir la ligne précédente, vous avez dessiné et chaque fois que vous appelez la fonction addLine simplement supprimer la ligne précédente de superview au début comme:

line.removeFromSuperlayer() 

Et votre code complet sera:

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

Et votre résultat sera: