Raphael JS Pie：旋轉切片

Question

我試圖創建一種帶有4個切片的圓形旋轉木馬，通過單擊一個切片將其擴展到顯示其內容的餅的約2/3（另一個切片也將同樣縮小）。演示http://raphaeljs.com/growing-pie.html，並進行了一些修改以獲得這種行為。

但我堅持最后一步，單擊並擴展切片時，它應該旋轉並放在頂部（偏移角度為0°）...我想我需要知道動畫中每個切片的確切角度（）函數並隨意更改它，但我不知道該怎么做。

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

看看更新小提琴http://jsfiddle.net/ExFCb/72/

基本上，您必須在每個循環中設置正確的rerotate變量。

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

等等...