如何知道動畫後的新路徑？

Question

我想知道是否有可能檢索動畫完成後，新的路徑，我想：

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

但警報提醒我原來的路徑，而不考慮轉型。

有沒有辦法做到這一點？

謝謝

V.Bonnet

Answer 1

當拉斐爾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，你必須手動解析。

Answer 2

您可以使用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/