path弧形参数 svg_如何计算圆弧（圆弧）的SVG路径

您想使用椭圆Arc命令。不幸的是，这需要你指定起点和终点的笛卡尔坐标(x，y)而不是你拥有的极坐标(半径，角度)，所以你必须做一些数学运算。这是一个应该工作的JavaScript函数(虽然我还没有测试过)，我希望它是相当不言自明的：function polarToCartesian(centerX, centerY, radius, angleInDegrees) {

var angleInRadians = angleInDegrees * Math.PI / 180.0;

var x = centerX + radius * Math.cos(angleInRadians);

var y = centerY + radius * Math.sin(angleInRadians);

return [x,y];}

哪个角度对应于哪个时钟位置将取决于坐标系; 只需交换和/或否定sin / cos术语。

arc命令具有以下参数：rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y

第一个例子：

rx= ry= 25且x-axis-rotation= 0，因为你想要一个圆而不是一个椭圆。您可以使用上面的函数分别计算起始坐标(您应该过去M)和结束坐标(x，y)，分别得出(200,175)和约(182.322,217.678)。到目前为止，鉴于这些限制，实际上可以绘制四个弧，因此两个标志选择其中一个。我猜你可能想要large-arc-flag在减小角度的方向上绘制一个小弧(意思是= 0)(意思是sweep-flag= 0)。总之，SVG路径是：M 200 175 A 25 25 0 0 0 182.322 217.678

对于第二个示例(假设您指的是相同的方向，因此是一个大弧)，SVG路径是：M 200 175 A 25 25 0 1 0 217.678 217.678

我再次测试过这些。

(编辑2016-06-01)如果像@clocksmith一样，您想知道他们为什么选择这个API，请查看实施说明。他们描述了两种可能的弧参数化，“端点参数化”(他们选择的那个)和“中心参数化”(这就像问题所用的那样)。在“端点参数化”的描述中，他们说：端点参数化的一个优点是它允许一致的路径语法，其中所有路径命令都以新的“当前点”的坐标结束。

所以基本上它是弧的副作用被视为更大路径的一部分而不是它们自己的独立对象。我想如果你的SVG渲染器不完整，它可以跳过它不知道如何渲染的任何路径组件，只要它知道它们采用了多少个参数。或者它可以实现具有许多组件的路径的不同块的并行渲染。或许他们这样做是为了确保舍入错误不会沿着复杂路径的长度积累。

实现说明对于原始问题也很有用，因为它们有更多的数学伪代码用于在两个参数化之间进行转换(我在第一次写这个答案时没有意识到)。

总结

以上是生活随笔为你收集整理的path弧形参数 svg_如何计算圆弧（圆弧）的SVG路径的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。