我正在尝试了解此raphael.js演示的数学原理:
http://raphaeljs.com/pie.js
checkout 扇区方法:
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之间绘制一条弧线),为什么该函数起作用?
最佳答案
这完全取决于您如何对待startAngle
和endAngle
。看起来这是将它们视为从水平向右开始(即0度角指向东)并顺时针旋转(因此45度角指向东南)。
通常在数学中,我们会考虑从水平线向右开始的 Angular ,但会逆时针方向增加...但是,如果您要求非数学家画一个 Angular ,他们可能会从垂直向上(即北)顺时针方向对待。看起来好像混在一起了:)这里没有真正的“错误”或“正确”答案-都是定义问题。
随着图片的流行,这是我描述的三个系统,每个系统假设行的长度为r
:
普通数学:从x轴逆时针
(来源:arachsys.com)
要求街道上的人绘制一个 Angular (从y轴顺时针)
该代码使用的 Angular (从x轴顺时针)