如何获得长度一致的矢量曲线子段？答案

【问题标题】：How do I get sub-segments of vector curves with consistent length?如何获得长度一致的矢量曲线子段？
【发布时间】：2011-07-30 06:51:59
【问题描述】：

我正在使用 Raphael Javascript 库来构建三次贝塞尔曲线。无论较大曲线的长度或结构如何，我都需要在曲线的最末端获得一条长度一致的直线段。然而，当我在曲线的末端放置一个点并尝试将第二个 25 个单位从第一个放回时，点之间的实际距离会随着我修改曲线而变化。有没有办法在我的曲线末端获得一条始终以像素为单位长度的直线段？我猜这与将矢量单位转换为屏幕上的实际像素有关，但我几乎没有发现关于如何纠正这种不一致的细节。感谢您提供的任何帮助！

【问题讨论】：

请澄清您所说的“一致长度”是什么意思。您的意思是“在路径末端以半径为 25 的圆为中心，找到该圆与曲线相交的点”，或者您的意思是“沿着由 25px 远离的曲线定义的弯曲道路找到点结束”？

标签： vector svg raphael bezier curve

【解决方案1】：

如果您正在寻找沿路径的长度，您想使用getPointAtLength()：

var pt = myPath.getPointAtLength( myPath.getTotalLength() - 25 );

这将在路径父级的本地空间中为您提供SVGPoint。

您可以在此处查看使用此方法（以及更多方法）沿路径定期采样的示例：
http://phrogz.net/SVG/convert_path_to_polygon.xhtml

【讨论】：