javascript - 为什么使用余弦来计算弧的 x 值和正弦 y 值？

Question

我试图理解这个 raphael.js 演示的数学：

http://raphaeljs.com/pie.js

检查扇区方法：

function sector(cx, cy, r, startAngle, endAngle, params) {
    var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);
    return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
}

这是实际的演示： http ://raphaeljs.com/pie.html

我的数学有点生疏，我试图理解扇区函数 - 给定 startAngle 和 endAngle 参数（每个起点和终点值在 0 到 360 之间绘制一个弧线），为什么这个函数有效？

Answer 1

看看 sin 和 cos在一个圆圈中的 实际含义：

如果圆上有一个点形成角度 alpha，则 cos alpha 是该点的 x 部分，而 sin alpha 是 y 部分。

这个插图解释了为什么这个角度被否定了。

这意味着，您现在可以指定大多数使用模拟时钟的人更喜欢的顺时针角度。

Answer 2

这一切都取决于你如何对待startAngle和endAngle。看起来这将它们视为从水平开始向右（即角度 0 指向东方）和顺时针方向（因此 45 度角指向东南方向。

通常在数学中，我们考虑从水平方向向右开始的角度，但逆时针方向增加......但如果你让非数学家画一个角度，他们可能会从垂直向上（即北方）顺时针方向增加。这看起来像是在混合 :) 这里没有真正的“错误”或“正确”答案——这都是定义问题。

由于图片很受欢迎，这里是我描述的三个系统，每个系统都假设线是长度r：

普通数学：从 x 轴逆时针方向

_{（来源：arachsys.com）}

让街上的人画一个角度（从 y 轴顺时针方向）

此代码使用的角度（从 x 轴顺时针方向）

Answer 3

因为圆心 (cx, cy) 和半径 R 的圆周上的任意点具有以下坐标（它直接来自 cos 和 sin 几何定义 - 相应的导管和斜边的长度之间的比率）：

x = cx + R*cos(a)
y = cy + R*sin(a) for  0 <= a < 2π

因此，对角度 a 设置限制，您可以定义任意弧。

Answer 4

如果将 0° 作为水平且 x 增加，将 90° 作为垂直且 y 增加，则为：

cos(0) = 1
sin(0) = 0

cos(90) = 0
sin(90) = 1

您可以通过将其乘以余弦来改变 x 值，并通过将其乘以正弦来改变 y 值。