UIBezierPathを使って描画したいが、位置の計算が合わない

Question

ほぼ数学の問題のようになってますが、回答をお願いします。

私の書いたコードでは、タップした座標点、角度、原点との距離などを計算して画像内の薄い紫色の直線上にUIBezierPathを描画していくものを書いたつもりだったのですが、自分の計算式が間違えているようなので、どうすれば画像のような理想的な位置に直線を描くことができるのか教えてください。

画像内で出ている変数等は全てコードに書きました。

func drawing(){

    let a_x:Double! = Double(currentLocation.x) //パンドラッグ中に取得できるタップ位置X(pan changed)
    let a_y:Double! = Double(currentLocation.y) //パンドラッグ中に取得できるタップ位置Y(pan changed)
    let p_x:Double! = Double(previousLocation.x) //パン開始時に取得できるタップ位置X(pan began)
    let p_y:Double! = Double(previousLocation.y) //パン開始時に取得できるタップ位置Y(pan began)
    let o_x:Double! = Double(objectLocation.x) //図形の中心位置X
    let o_y:Double! = Double(objectLocation.y) //図形の中心位置Y
    var x_r:Double! = 0 //パン開始時の図形とタップ位置の距離
    var y_r:Double! = 0 //ドラッグ時の図形とタップ位置の距離
    let o_θ:Double! = Double(object_Rotate) //角度
    var x_x:Double! = 0 //path.move関数の位置X
    var x_y:Double! = 0 //path.move関数の位置Y
    var y_x:Double! = 0 //path.addLine関数の位置X
    var y_y:Double! = 0 //path.addLine関数の位置Y

    x_r = sqrt(pow((p_x - o_x), 2.0) + pow((p_y - o_y), 2.0)) //パン開始時の図形とタップ位置との距離を算出
    x_y = sin(o_θ) * x_r //三角関数を用いた描画位置Y
    x_x = cos(o_θ) * x_r //三角関数を用いた描画位置X
    
    y_r = sqrt(pow((a_x - o_x), 2.0) + pow((a_y - o_y), 2.0)) //ドラッグ時の図形とタップ位置との距離を算出
    y_y = sin(o_θ) * y_r
    y_x = cos(o_θ) * y_r
    
    let path: UIBezierPath = UIBezierPath()
    
    path.move(to: CGPoint.init(x: x_x + o_x, y: x_y + o_y)) //描画
    path.addLine(to: CGPoint.init(x: y_x + o_x, y: y_y + o_y)) //描画
    let layer = CAShapeLayer()

    layer.strokeColor = UIColor.orange.cgColor
    layer.fillColor = UIColor.clear.cgColor

    layer.addSublayer(layer)

    setNeedsDisplay()
}

-2018 5 /7 16:39 追記-

現状描画自体は正常に動作しています。
計算が違うようなのですが、現在どういう動作をしているのかを載せていませんでした。

具体的には下記画像のような状態です。
画像内では2パターン動作をテストしています。(青と赤)
どちらも角度だけは変えていません。

しかし、初期タップ位置と原点との距離に応じて、描画される線と原点との距離が比例して離れてしまいます。

(また、画像内の角度については弧度法(π)での値に直しています。degreeと書いてありますが、radianです。)

Comments

[fuzzball]

このコードで何らかの線は描画されているのでしょうか？

[bilieikbilibili]

コメントありがとうございます。　描画はされているようです。いまどのような状態か画像を追加しますので少々お待ちください。

[fuzzball]

その画像の3つの座標と角度も併せて書いていただけると動作確認しやすいです。

[bilieikbilibili]

追記で現状を載せてみました。

[fuzzball]

弧度法=radian, 度=degreeかと思いますが‥。

[bilieikbilibili]

すいません、修正しました。

[bilieikbilibili]

すいません、原点の座標が未記入だったため追記しました。

[fuzzball]

sin/cosでは、垂線との交点ではなく、円弧との交点になるのでは？

Answer 1

func nearest(A: CGPoint, B: CGPoint, P: CGPoint) -> CGPoint {
    let a = CGVector(dx: B.x - A.x, dy: B.y - A.y)
    let b = CGVector(dx: P.x - A.x, dy: P.y - A.y)
    let r = (a.dx * b.dx + a.dy * b.dy) / (a.dx * a.dx + a.dy * a.dy)
    return CGPoint(x: A.x + r * a.dx, y: A.y + r * a.dy)
}

let O = objectLocation
let rot = object_Rotate
let P1 = previousLocation
let P2 = currentLocation
        
let A = CGPoint(x: O.x - cos(rot), y: O.y - sin(rot))
let B = CGPoint(x: O.x + cos(rot), y: O.y + sin(rot))
        
let p1 = nearest(A: A, B: B, P: P1)
let p2 = nearest(A: A, B: B, P: P2)

この記事のコードを一部変更して使わせていただきました。
図形情報を扱うのに大事なことは、全部高校で教わった

全然テストしてないので悪しからず‥。

Comments

[bilieikbilibili]

これはとてもわかりやすい式ですね
ありがとうございます！

Answer 2

自己解決しました。

数学的に必要な公式としては
y-y1=m(x-x1)でした。
ようは、角度と１点を通る直線の式を求める公式になります。
m角度はtan(degree or radian)になります。

手順としては、原点と角度を入れた式を作ります。
垂線の足の座標を求めればそこが描画位置になるので、任意の点と角度(垂線なので、tan(θ)m = -1)を入れ、連立方程式にしてx or yをときます。あとは、どちらかの式に代入してyを求め、終了です。

キーマンは
y-y1=m(x-x1)と、垂線の交点の座標が描画位置になるということです。

Comments

[fuzzball]

内積でも求められるのでぜひ。