在JavaScript中挑战矢量数学

Question

我有一个有趣的开发/数学问题,我无法解决问题.

请参见下图.

我有两个圆点; 一个小而一个大.

我想要:

• 从外圆中的任何给定点绘制一条直线到内圆中的任意给定点(完成)
• 线应该是弧形,不应该越过内圈的边界或外圈的边界.(我需要你的帮助!)

小提琴!

我创建了一个用RaphaelJS编写的jsFiddle,我在其中创建点和绘制线条.见这里,http://jsfiddle.net/KATT/xZVnx/9/.

它基本上是drawLine我需要你的帮助的功能,以绘制一个漂亮的弧,而不是一条直线.

我添加了一些辅助工具来处理矢量,se MathHelpers.Vector.

请继续分叉并尝试实施一个解决方案,其中线条围绕着.使用实际看起来很好的Béziers的解决方案也非常受欢迎.

是的,我猜矢量几何最适合计算.

非常非常非常感谢任何帮助.我花了很多时间试图解决它,但我生锈的高中数学技能还不够.

Answer 1

一种选择是使用椭圆弧。这看起来不太棒，但是满足了约束，并且我认为可以通过仔细选择圆半径来改进它（这里我使用了固定的半径）。

var angleDiff = MathHelpers.getAngleInCircle(innerCircleIndex, numberOfDotsInInnerCircle) - MathHelpers.getAngleInCircle(outerCircleIndex, numberOfDotsInOuterCircle);
while (angleDiff > Math.PI) {
    angleDiff -= 2 * Math.PI;
}
while (angleDiff < -Math.PI) {
    angleDiff += 2 * Math.PI;
}

from = addOffsetAndRound(from);
to = addOffsetAndRound(to);
r = (0.5 * innerCircleRadius + 0.5 * outerCircleRadius);

var pathStr = "";
pathStr += "M" + [from.x, from.y].join(' '); // MOVE to
pathStr += "A" + [r, r, 0, 0, angleDiff >= 0 ? 1 : 0, to.x, to.y].join(' '); // Draw line to
var path = paper.path(pathStr);

PS 当然，人们应该记住，真正的螺旋不是椭圆弧。