请耐心等待 - 我发现这很难解释。
这更像是一个三角问题，但重要的是，这是在 JavaScript/KineticJS 中。
我有一系列包含'线'和'句柄'的'组'。这必须工作的方式，它最适合每个组有自己的坐标平面。我寻求帮助的问题是该解决方案不理想的唯一实例。
当这些组旋转时，它们的坐标平面也会旋转。这允许重用组对象，并且其子对象可以从组的原点进行测量，而无需担心父组的方向。向上总是向上......我的团队面对的方向并不重要。
我是新海报，所以无法添加图片。但是，我认为看到它是至关重要的。请参阅http://i.imgur.com/WUVXE.png
目标是将红色弧线（“手柄”）的未连接点连接到蓝线（“线”）上的黑点。出于演示目的，我将其设置为始终绘制 90 度。
尽管约定俗成，我使用的 API 顺时针旋转，红线的角度为 0，黄线的角度为 116，绿色为 180，蓝色为 296——所有这些都相对于屏幕左上角的同一个原点。这些角度会发生变化，所以我正在寻找计算红色手柄新端点的公式。
X 轴始终沿着每条线的中间直线移动。这条线是 20px 宽，所以它上面或下面有 10px 是“死区”。因此，红色手柄上的两个正确点是 (10,10) 和 (30,10)。手柄的半径为 20 像素。
不可能说 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);
}