Search code examples
iosswiftlineuibezierpath

How to make line curved on dynamic angle switch in Swift?


I am creating a maze, I need to move the line that is created on panGestureRecognized to adapt to the motion of my finger:

enter image description here

Code:

@IBAction func panGestureRecognized(_ sender: UIPanGestureRecognizer) {
       // print("started")
        
        if let scene = self.scene, let view = sender.view {
            
            let location = sender.location(in: view)
            let translation = sender.translation(in: view)
            let velocity = sender.velocity(in: view)

                do {
                            audioPlayer = try AVAudioPlayer(contentsOf: beginSound)
                            audioPlayer.play()
                       } catch {
                          // couldn't load file :(
                       }
                self.view.layer.addSublayer(lineShape)
            }
            else if sender.state == .changed {
//                scene.panChanged(location: cameraLocation, translation: cameraTranslation, velocity: cameraVelocity)
                let linePath = UIBezierPath()
                linePath.move(to: CGPoint(x: 368.0, y: 299.5))
                    linePath.addLine(to: location)

                    lineShape.path = linePath.cgPath
            }
            else if sender.state == .ended {
//                scene.panEnded(location: cameraLocation, translation: cameraTranslation, velocity: cameraVelocity)
//                sender.setTranslation(CGPoint(x: 0, y:0), in: view)
                lineShape.path = nil
                lineShape.removeFromSuperlayer()
                
                do {
                    
                            audioPlayer = try AVAudioPlayer(contentsOf: failedSound)
                            audioPlayer.play()
                       } catch {
                          // couldn't load file :(
                       }
                
                print("ended")
            }
        }
    }

How can I rotate the line to the left?


Solution

  • If you want to create a path that follows users finger movement then you need to track locations and build your path with those. A new property needs to be added such as

    private var gestureLocations: [CGPoint] = []
    

    then on change you need to be appending points and redrawing

            else if sender.state == .changed {
                gestureLocations.append(location)
                let linePath = UIBezierPath()
                linePath.move(to: CGPoint(x: 368.0, y: 299.5))
                gestureLocations.forEach { linePath.addLine(to: $0) }
                lineShape.path = linePath.cgPath
            }
    

    end clear points when path should be cleared

                lineShape.path = nil
                lineShape.removeFromSuperlayer()
                gestureLocations = []
    

    but this will only draw a freeform path. Looking at what you are trying to achieve (drawing a line through maze) you should probably snap those points to some points of interest within your maze. So that user may not draw through walls. But that is another question that will be way too broad for StackOverflow.