Question

请忍受我 - 我发现这很难解释。

这更像是一个三角问题，但重要的是，这是在JavaScript / KineticJS中。

我有一系列'组'包含'line'和'handle'。它必须工作的方式，它最适合每个组拥有自己的坐标平面。我要求帮助的问题是这个解决方案不理想的唯一情况。

当这些组旋转时，它们的坐标平面也会旋转。这允许重复使用组对象，并且其子组可以从组的原点进行测量，而无需担心父组的方向。向上总是向上...我的团队面对的方式并不重要。

我是一张新海报，所以我无法添加图片。但是，我认为看到它至关重要。请参阅http://i.imgur.com/WUVXE.png

目标是将红色圆弧（“手柄”）的未连接点附加到蓝线（“线”）上的黑点。我将其设置为始终绘制90度仅用于演示目的。

尽管有惯例，我使用的API顺时针旋转，红线的角度为0，黄线的角度为116，绿色的180和蓝色的296 - 所有相对于左上角的相同原点屏幕。这些角度会发生变化，所以我正在寻找计算红色手柄新终点的公式。

X轴始终沿着每条线的中间向下移动。这条线的宽度为20px，因此它的上方或下方有10px的“死区”线。因此，红色手柄上的两个正确点是（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);
}

Answer 1

如果有人偶然发现了这一点 - 我所拥有的是正确的，除非我无法容纳原始翻译。如果您为每个平面移动所有内容（0,0），那么执行sin / cos然后就可以了

跨多个平面的三角学

1 个答案: