Raphael JS Pie: поверните кусочек

Я пытаюсь создать своего рода закругленную карусель с 4 ломтиками, щелкая по ломтику, он расширяется примерно до 2/3 круга, показывая его содержимое (другой ломтик будет так же уменьшаться). В основном я начал с «растущего пирога» Рафаэля demo 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/ есть пример, над которым я работаю


javascript svg pie-chart slice raphael
person Decagrog    schedule 10.05.2012    source источник
comment
пример ничего не делает, просто показывает серый экран   -  person mihai    schedule 13.05.2012

Ответы (1)


arrow_upward
1
arrow_downward

Взгляните на скрипт обновления http://jsfiddle.net/ExFCb/72/.

В основном вы должны установить правильную переменную rerotate в каждом цикле.

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

И так далее...

person namero999    schedule 21.08.2013