javascript - 如何为 raphael.js 动画设置旋转原点？

Question

我这样生成了 8 条路径:

for (i = 0 ; i<8; i++){
    slices[i] = card.path("M320 120 L320 215").attr({"stroke" : "#00A5Df",
            "stroke-width" : 10});
}

我希望它们从 M320 120 的原点(线的起点)顺时针方向旋转以产生“饼图”效果:

for (i = 0 ; i<8; i++){
    slices[i].animate({transform :"r"+45*(i+1)+""},(200*i));
}

相反，使用的原点位于直线的中心。我试过将字符串格式化为

"r45 cx320 cy120"

和其他组合，但值总是被忽略。

编辑:这是一个更清楚地突出了我的问题的 fiddle :http://jsfiddle.net/vMRdj/

Answer 1

您几乎成功了。重要的是使用旋转指令的绝对版本(“R”而不是“r”)并明确指定原点，使用格式“R(degree) (origin-x),(origin-y)” .

代码如下:

for (i = 0 ; i<8; i++){
    slices[i].animate({transform : ["R", 45*(i+1), 320, 120 ] }, i * 125 );
}

还有 fiddle :http://jsfiddle.net/kevindivdbyzero/F4xhh/

不要忘记您可以将转换和路径作为数组传递——如果您不必担心在参数之间连接逗号分隔符，那么构造您的参数会变得非常容易。