뷰/레이어의 베 지어 곡선 경로로의 이동 경로를 제한하는 방법은 무엇입니까?

Question

질문을하기 전에, 나는 SO 수색 :

iPhone-Move UI Image view along a Bezier curve path

그러나 그것은 명백한 대답을하지 않았다.

필자의 요구 사항은 다음과 같습니다. 베 지어 경로와 뷰 (또는 레이어가 OK 인 경우)가 있고, 뷰에 pan gesture을 추가하고 뷰 (또는 레이어)의 이동 경로가 베 지어 경로.

내 코드는 다음과 같습니다 :

MainDrawView.swift :

import UIKit 

class MainDrawView: UIView { 


    // Only override draw() if you perform custom drawing. 
    // An empty implementation adversely affects performance during animation. 
    override func draw(_ rect: CGRect) { 
     // Drawing code 

     drawArc() 
    } 

    func drawArc() { 

     let context = UIGraphicsGetCurrentContext() 

     // set start point 
     context?.move(to: CGPoint.init(x: 0, y: 400)) 
     //draw curve 
     context?.addQuadCurve(to: CGPoint.init(x: 500, y: 250), control: CGPoint.init(x: UIScreen.main.bounds.size.width, y: 200)) 

     context?.strokePath() 

    } 
} 

ViewController.swift :

import UIKit 

class ViewController: UIViewController { 

    @IBOutlet weak var clickButton: UIButton! 

    lazy var view1:UIView = { 

     let view: UIView = UIView.init(frame: CGRect.init(origin: CGPoint.init(x: 0, y: 0), size: CGSize.init(width: 10, height: 10))) 
     view.center = CGPoint.init(x: UIScreen.main.bounds.size.width/2.0, y: UIScreen.main.bounds.size.height/2.0) 
     view.backgroundColor = UIColor.red 

     return view 
    }() 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     initData() 
     initUI() 
    } 

    func initData() { 

    } 

    func initUI() { 

     self.clickButton.isHidden = true 

     // init the view 
     self.view.addSubview(self.view1) 
    } 

} 

---

편집 -1

내가보기는 베 지어 패스에 이동보기/레이어를 이동 pan guester 사용할 때 내 깊은의 requirment입니다.

Answer 1

경로가 라인을 벗어났다면 라인의 기울기를 찾을 수 있고 x 또는 y의 모든 변화에 대해 베 지어 경로의 위치를 ​​계산할 수 있습니다 var y :Float = (slope * (xPos-previousCoord.x))+previousCoord.y; xPos가 계속 변경됩니다. 마찬가지로, x를 찾을 수 있습니다. 선분이있는 닫힌 모양의 경우이 값을 사용할 수 있습니다.

하지만 원이 필요하면 직교로 변환해야합니다. 즉 .. 좌표 U에서 각도를 찾을 수 있습니다. 그런 다음 그 각도에서 반경을 가지므로 그 각도 U를 사용하여 직교 좌표를 찾아야합니다.

θ = 탄 -1- (12분의 5) U는 주로 3은 하나의 원의 중심 좌표를 사용해야

이 두번째가 터치 점이며, 마지막은 (touchpoint.x , centreofcircle.y).두 좌표 사이의 원 계산 거리의 중심으로부터 하면 θ 있고 원의 반경은 죄 (θ)

돈 × COS (θ)

Y = R ×

X = R를 사용하여 포인트를 찾아 원의 반지름에 대해 이미지에서 실수를하지 않는다. 이미지에서 r은 세 좌표의 빗변이다. 터치 포인트에서 x의 모든 변화에 대해 계산해야합니다.

희망 사항. 하지만 불규칙한 모양을 찾는 방법을 모르겠습니다.

Answer 2

아마 계산을해야 할 것 같습니다. 당신이 UIPanGestureRecognizer을 처리하는 당신의 방법을 설정하는 경우는 다음과 같이 다시 팬을 위해 무언가를하는 벡터를 얻을 수 있습니다 :

func panGestureRecognized(_ sender: UIPanGestureRecognizer) { 
    let vector:CGPoint = sender.translation(in: self.view) // Or use whatever view the UIPanGestureRecognizer was added to 
} 

당신은 다음 x 및 y 축 방향의 움직임을 추정하는 것을 사용할 수 있습니다. 내가보기에 움직이는 경로에 대해 대수 방정식을 구하는 것으로 시작하는 것이 좋습니다. 해당 선을 따라 뷰를 이동하려면 UIPanGestureRecognizer의 이동에 상대적인 해당 선을 따라 점을 계산 한 다음 해당 선을 따라 계산 된 점을 사용하여 뷰의 위치를 ​​업데이트 할 수 있어야합니다.

당신이 뭘 하려는지 작동 있을지는 모르겠지만, 당신이 경로를 따라보기를 애니메이션 시도하려는 경우, 그것은 실제로 매우 쉽다 : 베 지어 만약

let path = UIBezierPath() // This would be your custom path 

let animation = CAKeyframeAnimation(keyPath: "position") 
animation.path = path.cgPath 
animation.fillMode = kCAFillModeForwards 
animation.isRemovedOnCompletion = false  animation.repeatCount = 0 
animation.duration = 5.0 // However long you want 
animation.speed = 2 // However fast you want 
animation.calculationMode = kCAAnimationPaced 
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear) 

animatingView.layer.add(animation, forKey: "moveAlongPath")