どうかご容赦ください。これを説明するのは非常に難しいと思います。
これは三角法の問題ですが、問題は JavaScript/KineticJS にあります。
「ライン」と「ハンドル」を含む一連の「グループ」があります。これが機能する方法として、すべてのグループが独自の座標平面を持つことが最も効果的です。私が助けを求めている問題は、この解決策が理想的でない唯一の例です。
これらのグループが回転すると、それらの座標平面も回転します。これにより、グループ オブジェクトを再利用することができ、その子は、親グループの向きを気にせずに、グループの原点から測定できます。上は常に上です... グループがどちらを向いていても問題ありません。
私は新しいポスターなので、画像を追加できません。しかし、それを見ることは非常に重要だと思います。http://i.imgur.com/WUVXE.pngをご覧ください。
目標は、赤い弧 (「ハンドル」) の接続されていない点を青い線 (「線」) 上の黒い点に接続することです。デモンストレーションの目的で、常に 90 度を描画するように設定しました。
慣習に反して、私が使用している API は時計回りに回転し、赤い線は角度 0、黄色い線は 116、緑は 180、青は 296 の角度を与えます。これらはすべて、画面の左上にある同じ原点を基準としています。これらの角度は変化するので、赤いハンドルの新しい終点を計算する式を探しています。
X 軸は、常に各線の中央をまっすぐ進みます。線の幅は 20 ピクセルなので、線の上下に 10 ピクセルの「デッド スペース」があります。したがって、赤いハンドルの 2 つの正しい点は (10,10) と (30,10) です。ハンドルの半径は 20px です。
赤と青のグループのプレーンが異なるため、red.arcEndX = blue.blackDotX、red.arcEndY = blue.blackDotY とは言えません。たとえば、赤の (0,0) は常に青の (200,0) に等しくなります。各線は切り離すことのできない鎖と考えてください。
では、赤い弧の残りのポイントを計算するにはどうすればよいでしょうか。これは、青い線の黒い点の中心点が赤の座標平面に変換されていない正確な場所で、青い線の端にシームレスに接続する必要があります。
必要なすべての測定値が利用可能であるか、計算できます。
Handle.prototype.update = function() {
/* if we are the red group, this.parent is our group and
'prev' is the blue group. */
var prev = this.parent.getPrev();
// somehow get the new (x,y) for point2 below:
/* KineticJS SVG string. this.origin and this.point1 never
change. This (M)oves to 10,10, draws a (L)ine from
this.origin.x, this.origin.y to this.point1.x, this.point1.y
and (C)urves to this.point2.x, this.point2.y. this.centerXY
is the control point of that curve. */
this.data = "M" + this.origin + "L" + this.point1 + "C" + this.point1 + "," + this.centerXY + "," + this.point2 + "L" + this.origin + "z";
this.shape.setData(this.data);
}