如何为通过 svg/raphaeljs 创建的弯曲路径创建“getLengthAtPoint()”函数？答案

【问题标题】：How can I create a 'getLengthAtPoint()' function for a curved path created via svg/raphaeljs?如何为通过 svg/raphaeljs 创建的弯曲路径创建“getLengthAtPoint()”函数？
【发布时间】：2014-01-15 15:49:35
【问题描述】：

我需要一种方法来计算通过 Raphaeljs 创建的弯曲路径上两点之间的长度。例如，如果我有以下路径：M10,10T30,50T60,100T80,200T300,400，并且我需要知道距离路径起点 150 像素的点的坐标。因为路径是弯曲的，所以不能使用勾股定理。

谢谢！

【问题讨论】：

标签： svg raphael

【解决方案1】：

只需调用 SVG DOM getPointAtLength 方法

SVGPoint getPointAtLength(in float distance)

例如var point = document.getElementById("pathId").getPointAtLength(150);

【讨论】：

嗨罗伯特，我在上面的例子中犯了一个错误，你的答案是完美的......对不起！我的意思是询问上述路径 - M10,10,T30,50T60,100T80,200T300,400 - 如何找到从路径开头到路径上特定 x,y 坐标对的长度（例如80,200) ?这是 'getPointAtLength' 的反义词或补语......感谢并抱歉造成混淆。
那么最好再问一个问题。

【解决方案2】：

好的，这里有一个可能的解决方案来解决如何找到从路径起点到用于定义路径的任何一个点的距离。这个想法是为组成它的每个点创建原始路径的临时子路径，然后使用'getToalLength（）'来计算这个子路径的距离。这个距离反映了整个原始路径中从第一个点到当前点的距离。现在，计算完距离后，可以存储它，并且可以删除临时路径。通过这种方式，我们可以计算并存储从原始路径的起点到组成它的每个点的距离。这是我使用的代码（稍微简化一下，只关注这个目标）：


            var pointsAry = [["M",10,10],["T",30,50],["T",60,100],["T",80,200],["T",300,400]], subPath, path = [];
            for (var i = 0 ; i < pointsArray.length ; i++) {
                path.push(pointsAry[i]);
                subPath = paper.path(path).attr({ "stroke-opacity": 0 }); // make the path invisible
                pointsAry[i].subPathSum = subPath.getTotalLength();
                subPath.remove();
            }

paper 是通过Raphaeljs 创建的，它还提供了getTotalLength() 函数。请注意，这些线条是不可见的，因为它们的不透明度为 0，无论如何它们会立即被删除。

【讨论】：