我有一个有趣的开发/数学问题,但我无法解决。
请参见下图。
我有两个圆点;一大一小。
我想:
- 从外圈中的任意给定点到内圈中的任意给定点画一条线(完成)
- 线条应为弧形且不应跨越内圈或外圈的边界。 (我需要你的帮助!)
fiddle !
我创建了一个用 RaphaelJS 编写的 jsFiddle,我在其中创建点并在它们之间画线。看这里,http://jsfiddle.net/KATT/xZVnx/9/ .
基本上是在 drawLine
函数中 我需要您的帮助,以便绘制漂亮的弧线而不是直线。
我还添加了一些处理向量的助手,例如 MathHelpers.Vector
。
请继续 fork 并尝试实现一个解决方案,其中线路绕着。使用实际上看起来不错的 Béziers 的解决方案也非常受欢迎。
是的,我想矢量几何最适合计算。
非常,非常,非常感谢任何帮助。我花了很多时间试图解决它,但我生疏的高中数学技能还不够。
最佳答案
One option就是用椭圆弧。这看起来不太牛逼,但满足了约束条件,我认为可以通过仔细选择圆半径来改进它(这里我使用了固定的)。
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);
附言当然,应该记住,真正的螺旋并不是椭圆弧。
关于javascript - JavaScript 中具有挑战性的矢量数学,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13084629/