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"

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

编辑：这是一个更清楚地突出我的问题的小提琴：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 );
}

还有小提琴：http: //jsfiddle.net/kevindivdbyzero/F4xhh/

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