如何为通过svg/raphaeljs创建的曲线路径创建'getLengthAtPoint（）'函数？

我需要一种方法来计算通过Raphaeljs创建的弯曲路径上两点之间的长度。例如，如果我有以下路径：M10,10T30,50T60,100T80,200T300,400，我需要知道距离路径起点150像素点的坐标。毕达哥拉斯定理不能使用，因为路径是弯曲的。如何为通过svg/raphaeljs创建的曲线路径创建'getLengthAtPoint（）'函数？

谢谢！

来源

2014-01-13 beamish

好的，这里是一个可能的解决方案，以找到从路径起点到用来定义它的任何一个点的距离。这个想法是为每个创建它的点创建原始路径的临时子路径，然后使用'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，并且无论如何它们立即被移除。

来源

2014-01-14 15:28:41 beamish

只要打电话给SVG DOM getPointAtLength方法

SVGPoint getPointAtLength(in float distance)

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

来源

2014-01-13 21:43:18

嗨罗伯特，我在上面的例子中犯了一个错误，你的答案是完美的......我很抱歉！我的意思是要求上述路径 - M10,10，T30,50T60,100T80,200T300,400 - 如何找到从路径开始到路径上特定的x，y坐标对的长度（例如80,200）？这是'getPointAtLength'的反面或补充......感谢和抱歉的混淆。 – beamish

最好问另一个问题。 –

如何为通过svg/raphaeljs创建的曲线路径创建'getLengthAtPoint（）'函数？

回答

相关问题