snap / raphael / svg - 获取某个角度（不是长度）？

Question

我正在重新实现客户端SVG中的PHP / GD应用程序。我最初的计划是使用Snap或Raphael。原始应用程序的一个功能是绘制“胖”弯曲箭头，我需要它的轮廓。这就是原作的样子：

最初在PHP中，我编写了自己的catmull-rom函数并计算了两端和控制点之间的中心“脊柱”曲线，然后计算出每个脊椎点处的法线向量，以获得其中任意一侧的点。我希望我的胖线。这工作正常，但它相当劳动密集，并且在紧急转弯时会发生奇怪的事情。

最初，我在javascript中重写了我的php曲线计算，并生成了直线段的大型列表。这是有效的，但是当你缩放时它显然不会保持平滑（显然足够）。

所以对于下一个javascript版本，我开始使用一个SVG路径使用R段类型来获取我的catmull-rom中心曲线，我可以根据沿着距离的任何点获得角度（因此正常）曲线。但我想尝试提高效率，让SVG计算轮廓曲线，只生成两个新CR样条的控制点，这些CR样条通过控制点，偏离原始控制点的法线（图像中的绿色）。

但是 - 如何在曲线上的某个点（不是沿着它的长度）获得曲线（或切线矢量）的角度？我知道坐标（它是C-R控制点），而不是角度。在SVGPathElement上似乎没有一个方法可以任意实际检索点，（或者说，找到到点的路径上最近的点）。

或者，我怎么能得到相同的轮廓？我是SVG的新手，所以如果有一种方法可以让它绘制一个strokeWidth为20的线条（或任何宽度），并以可修改的形式得到它的轮廓（我需要添加轮廓的箭头，并且在某些情况下沿着箭头的外边缘运行文本），那也可以工作！

更新：箭头形状与线条的宽度成比例，用户可以（稍微）调整比例。宽度也由用户指定。我认为这使得使用标记成为问题，但很高兴被证明是错误的。其中一些箭头没有填充（即透明），只是轮廓。

额外的想法：是否存在参数Catmull-Rom样条曲线的某些属性，这样控制点总是在t = 0.5（例如），这样我就可以计算控制点的长度并使用Snap方法得到角度？ [回答 - 是的，它是t = 1.0，但这对长度没有帮助]

Answer 1

是的，在Snap.svg中，您可以通过运行以下命令获取给定点的角度：

var pt = path.getPointAtLength(x,y);
console.log("Angle at "+[x,y]+":" + pt.alpha);

返回值具有一个称为“ alpha”的属性，即给定点的角度。