Question

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

谢谢！

Answer 1

只需调用SVG DOM getPointAtLength方法

即可

SVGPoint getPointAtLength(in float distance)

e.g。 var point = document.getElementById("pathId").getPointAtLength(150);

Answer 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，无论如何它们会被立即删除。

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

2 个答案: