Raphael V2中的旋转attr

Question

嗨,我正在关注此页面上的教程:http: //net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/

这是我正在测试的代码:

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
tetronimo.attr(
    {
        gradient: '90-#526c7a-#64a0c1',
                    rotation: -90,
        stroke: '#3b4449',
        'stroke-width': 10,
        'stroke-linejoin': 'round'
    }
);

tetronimo.animate({rotation: 360, 'stroke-width': 1}, 2000, 'bounce', function() {
/* callback after original animation finishes */
this.animate({
    rotation: -90,
    stroke: '#3b4449',
    'stroke-width': 10
}, 1000);
    });

}

动画适用于笔触宽度,但不适用于旋转.经过一些研究,我发现版本2中不再支持"rotation"属性.所以我有两个选择:

1)找出达到同一目标的另一种方法

2)找到Raphael V1库的副本

任何人都可以帮助我(我的选择是选择1).

谢谢!

Answer 1

您transform现在需要在v2中使用方法.它没有太大的不同,看到这个小提琴:

http://jsfiddle.net/58yqW/3/

    var paper = new Raphael(document.getElementById('canvas'), 500, 500);
    var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
    tetronimo.attr(
      {
        gradient: '90-#526c7a-#64a0c1',
        'transform':"r-90",
        stroke: '#3b4449',
        'stroke-width': 10,
        'stroke-linejoin': 'round'
      }
    );

    tetronimo.animate({'transform':"r360", 'stroke-width': 1}, 2000, 'bounce',       function() {
    this.animate({
        'transform':"r-90",
        stroke: '#3b4449',
        'stroke-width': 10
       }, 1000);
    });

我不知道你的动画的确切要求,但是你可以看到它是旋转等.有一点需要注意的是你可以使用R-90和r-90,查看元素转换的文档.