d3.js - 如何根据起始角度计算弧长？

Question

我正在构建一个道路编辑器，可以将预定义的路段拖到一起并将它们组合到连接的道路上。其中一个部分是右曲线。

曲线绘制为 SVG（使用 D3 圆弧路径函数），并且有两个手柄可以直接在 SVG 内更改半径和长度（黑色小圆圈更改长度，黑色小方块更改半径）。我在手柄上使用了 d3 拖动处理程序。

要计算新的中心角，我执行以下操作：

1. 从弧的中心点获取 YOffset
2. 翻转 YOffset（匹配屏幕 y 和数学）
3. 用毕达哥拉斯得到对应的 x 值 (x = Math.sqrt(r^2 - YOffset^2))
4. 得到各自的圆心角 (Math.PI / 2 - Math.atan2(YOffset, x);

这仅在弧从图中的 PI/2 开始时才有效。如果我添加具有任意起始角度的更多弧（见下图，红色弧），我的解决方案将不起作用。

我正在寻找一个通用的解决方案，因此无论其起始角度如何，它都适用于任何弧。

Answer 1

对我来说，这似乎不是一个编程问题，而是数学问题。我的理解是：给定起点(x₁, y₁)、终点(x₂, y₂)和半径 r，角度是α多少？

您可以计算两点d之间的距离。它的一半长度是一个直角三角形的远边，r作为它的斜边。d/2r是近角的正弦；加倍，你就有了端点之间的角度。

（并且，α以弧度表示，路径长度很简单α * r。）