javascript - 線囲みボックスの座標を取得する

Question

私はJavaScriptで線画システムのコーディングに取り組んでいます。描かれた線を選択できるようにしたいので、線の強調表示を実装しようとしています。下の画像でわかるように、既知の座標を持つ線 (黒) と勾配切片 (y=mx+b) の方程式があります。ボックスの半径がわかっている場合、コーナー (緑色の丸で囲まれた) の座標を計算するにはどうすればよいですか?

Answer 1

これは、ベクトルの観点から考えるのが最も簡単です。

A線の終点を 、もう一方の終点を として定義することから始めます。B

var A = new Vector(1, 1)
var B = new Vector(5, 3)

次に、線の単位方向ベクトル (A から B を指す長さ 1 のベクトル) とその垂線を見つけます。

var dir = B.minus(A).normalize();
var dir_perp = new Vector(dir.y, -dir.x)

そしてそれらを長さになるように拡張しますthickness:

dir = dir.times(thickness);
dir_perp = dir_perp.times(thickness)

四隅は次のとおりです。

[
    A.minus(dir).plus(dir_perp),
    A.minus(dir).minus(dir_perp),
    B.plus(dir).minus(dir_perp),
    B.plus(dir).plus(dir_perp)
]

これは明らかに、ある種のベクトル数学ライブラリがあることを前提としています。以前作ったのがこちら