Question

我想知道是否可以在动画后检索新路径，我试过：

 var p =
 canevas.path("M0,0,100,20").animate({transform:"t100,100"},500,"none",function
 () {alert(this.attr("path"));})

但警报提醒我原始路径，而不考虑转换。

有办法做到这一点吗？

谢谢

V.Bonnet

Answer 1

您可以使用Raphael.transformPath方法获取转换'烘焙'的路径。要使用您的示例：

var paper = Raphael(10, 10, 300, 300);
var line = paper.path("M0,0,100,20");

line.animate({ transform: "t100,100" }, 500, "none", function() {
    var transform = this.attr('transform');
    var transformedPath = Raphael.transformPath(this.attr('path'), transform);

    console.log("original path:", this.attr('path').toString());
    console.log("transform:", transform.toString());
    console.log("new path:", transformedPath.toString());
})

这将产生：

original path: M0,0L100,20 
transform: t100,100
new path: M100,100C100,100,200,120,200,120

在此处查看此行动：http://jsfiddle.net/seeligd/HCUey/3/

Answer 2

在Raphael 2.x中进行翻译时，它不会修改路径，而是添加了一个转换，例如......

<path fill="none" stroke="#000000" d="M0,0L100,20" transform="matrix(1,0,0,1,100,100)"></path>

我记得拉斐尔1.x用来修改路径，但现在已不再适用。要了解元素是如何转换的，您可以尝试...

var p = canevas.path("M0,0,100,20").animate({transform:"t100,100"},500,"none",function () {alert(this.attr("transform"));})

并返回t100t100，您必须手动解析。

动画后如何知道新路径？

2 个答案: