raphael - Raphael V2 中的旋转属性

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 不再支持“旋转”属性。所以我有两个选择:

1) 找出实现相同目标的替代方法

2) 找到 Raphael V1 库的副本

谁能帮我解决这些选项中的任何一个(我的偏好是选项 1)。

谢谢!

Answer 1

您现在需要在 v2 中使用 transform 方法。它并没有太大的不同，请看这个 fiddle :

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，查看文档 element transform .