Question

我在已经转换的路径上创建子路径时遇到问题。看起来子路径是在参考路径的原始位置而不是路径的后变换位置生成的。我该如何解决这个问题？

var paper = new Raphael("canvas");
var lineParams = {
    fill: "#ff0",
    gradient: "90-#526c7a-#64a0c1",
    stroke: "#3b4449",
        "stroke-width": 2
};

var line1 = paper.path("M 0 50 h 200").attr(lineParams);
line1.transform("T100,100");
if (line1 != null) {
    var lineBBox = line1.getBBox()
    var lineEnd = lineBBox.x2 - lineBBox.x;
    var lineTipStart = lineEnd - 10;
    var lineTipString = line1.getSubpath(lineTipStart, lineEnd);
    var lineTip = paper.path(lineTipString);
    lineTip.attr({
        "stroke-width": 2,
        stroke: '#FF0000'
    });
}

http://jsfiddle.net/nzwthkmo/1/

Answer 1

它不是一个绕过它的案例，而是了解它的作用，并决定你想如何接近它。

原始路径应用了一个变换，路径仍然完全相同。那么你想要同样的东西（也许你的代码会期望那样），或者你想要一个带有新转换坐标的新修改路径和转换。

因此，根据您将来使用它做什么，您可以

a）只需将相同的变换应用于子路径......

var lineTip = paper.path(lineTipString).transform("T100,100");

或

b）创建一个新的路径，其中坐标都是永久变换的......

var lineTip = paper.path( Raphael.transformPath(lineTipString, "T100,100") )

fiddle两个例子（一个被注释掉）。

RaphaelJS子路径在变换的路径上

1 个答案: