Question

我尝试创建一个带有4个切片的圆形旋转木马，通过单击切片，它将扩展到显示其内容的饼图的大约2/3（另一个切片将同样缩小）基本上我开始使用raphael“成长馅饼”演示http://raphaeljs.com/growing-pie.html 并修改了一点以获得这种行为。

但是我坚持最后一步，当一个切片被点击并展开时，它应该旋转并放在顶部（偏移角度为0°）......我想我需要知道每个切片的确切角度在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

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

基本上你必须在每个周期设置正确的rerotate变量。

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

等等......

Raphael JS Pie：旋转切片

1 个答案: