RaphaelJS 为路径的尖端着色答案

【问题标题】：RaphaelJS color the tip of a pathRaphaelJS 为路径的尖端着色
【发布时间】：2014-10-25 23:44:06
【问题描述】：

有谁知道是否可以将路径的最后 10 个像素更改为不同的颜色？我试着用渐变来做，但没有用。我似乎也找不到任何其他方法可以做到这一点。任何帮助将不胜感激。

【问题讨论】：

在顶部绘制另一条 10 像素长的路径。
我想过这个问题，但不确定如何做好，因为我有很多不同方向的不同路径，等等。我想我可以尝试从路径中拉出 BBox 并使用那里的坐标绘制另一条只有 10 像素长的线。

【解决方案1】：

您应该可以使用 Raphael 的 element.getSubpath() 界面来做到这一点。

子路径允许您在某些点之间获得“路径的路径”。所以，如果你已经有了路径，比如

var mainPath = paper.path("M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90");

您可以获得一个子路径，它为您提供具有任意起点和终点的该路径的“切片”：

var subpathString = mainpath.getSubpath(20, 50);

然后您可以使用该路径创建一个新元素，例如，不同的笔划宽度：

var subpath = paper.path(subpathString);
subpath.attr({'stroke-width' : 4});

这将看起来像这样的 jsFiddle：http://jsfiddle.net/1ndmz3d6/3/

例如，要将路径的最后 10 个像素设为红色，您只需要知道路径的长度即可。使用element.getTotalLength()，这很容易：

var pathLength = mainPath.getTotalLength();
var subpathStart = pathLength - 10;
var subpathString = mainPath.getSubpath(subpathStart, pathLength);
var highlightedPathSegment = paper.path(subpathString);
highlightedPathSegment.attr({'stroke-width' : 2, stroke : '#FF0000'});

你应该有它：http://jsfiddle.net/1ndmz3d6/5/

【讨论】：

天哪，太完美了！！太感谢了。我什至没有意识到这个功能的存在。