2

我是拉斐尔的初学者。谁能告诉我如何做一个带有动画的甜甜圈/径向图，类似于这些。

http://dribbble.com/shots/670348-Segment-Graphs

我现在正在努力。到目前为止，我已经走到了这一步。我会随着我的进步而更新。我现在的总结块是动画外环的颜色变化。

window.onload = function () {

    // Creates canvas 320 × 200 at 10, 50
    var paper = Raphael(10, 50, 320, 200);

    // Creates circle at x = 50, y = 40, with radius 10
    var circle1 = paper.circle(50, 40, 40);

    var circle2 = paper.circle(50, 40, 20);

    circle2.attr("fill", "#fff");
    circle2.attr("stroke", "#fff");

    circle1.attr("fill", "#336699");
    circle1.attr("stroke", "#fff");

}
4

1 回答 1

8

致谢： 在raphael 网站上有一个使用弧的示例。stackoverflow 上还有一个类似主题的问题：在 raphael js 中绘制居中弧。那里接受的答案有一个代码最重要部分的简化和注释版本，还有一个 jsfiddle 链接显示正在运行的代码：http: //jsfiddle.net/Bzdnm/2/

所以我做了什么：我从链接的问题中获取代码，将它与eve结合起来，这是 RaphaelJS 的创建者制作的另一个 javascript 库，我得到的是：http: //jsfiddle.net/cristighenea/aP7MK/

乍看上去：

1.创建弧线后，我们将其旋转 180 度并开始对其进行动画处理：

theArc.rotate(180, 100, 100).animate({
    arc: [100, 100, amount, 100, 40]
}, 1900, function(){
    //animation finish callback goes here
});

2.使用 eve 我们将一个事件绑定到 *raphael.anim.frame.**

3.每次触发事件时，我们用弧的新值更新中间的文本

如果您有任何问题，请告诉我

于 2012-12-10T20:39:53.987 回答