javascript - 拉斐尔 JS 派 : rotate the slice

Question

我试图创建一种带有 4 个切片的圆形旋转木马，通过单击一个切片，它会扩展到约 2/3 的饼图，显示它的内容(另一个切片同样会收缩)基本上我是从 raphael “growing pie” 演示开始的 http://raphaeljs.com/growing-pie.html并稍作修改以获得这种行为。

但我坚持最后一步，当一个切片被点击并展开时，它应该旋转并放置在顶部(偏移 Angular 为 0°)...我想我需要知道每个切片的确切 Angular 在 animation() 函数中任意更改它，但我不知道该怎么做。

function animate(ms) {
var start = 150,
    val;
for (i = 0; i <= 3; i++) {

    val = 360 / total * data[i];

    paths[i].animate({
        segment: [200, 200, 150, start, start += val]
    }, ms || 1500, "bounce");
    paths[i].angle = start - val / 2;
}

rotateCircle();

在这里http://jsfiddle.net/ExFCb/32/这是我正在研究的例子

Answer 1

看看更新 fiddle http://jsfiddle.net/ExFCb/72/

基本上，您必须在每个循环中设置正确的 rerotate 变量。

if (i === 0) {
    data = [240, 40, 40, 40];
    rerotate = 0;
}

等等……