Как узнать новый путь после анимации?

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 , чтобы получить путь с преобразованием 'baked in'. Чтобы использовать ваш пример:

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>

Я напоминаю, что Raphael 1.x использовался для изменения пути, ноэто больше не правда.Чтобы узнать, как элемент был преобразован, вы можете попробовать ...

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

, и он вернет t100t100, который вы должны проанализировать вручную.