1

我正在使用以下代码使用 RaphaelJS 绘制（和动画）弧形路径；

    self.paper = Raphael(domElement, width, height);

    self.paper.customAttributes.arc = function (xloc, yloc, value, total, R) {
        var alpha = 360 / total * value,
            a = (90 - alpha) * Math.PI / 180,
            x = xloc + R * Math.cos(a),
            y = yloc - R * Math.sin(a),
            path;
        if (total == value) {
            path = [
                ["M", xloc, yloc - R],
                ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
            ];
        }
        else {
            path = [
                ["M", xloc, yloc - R],
                ["A", R, R, 0, +(alpha > 180), 1, x, y]
            ];
        }
        return { path: path };
    };

    self.arc = self.paper.path().attr({
        'fill':             'none',
        'stroke':           self.color,
        'stroke-opacity':   1,
        'stroke-width':     self.barWidth,
        'arc':              [self.centerX, self.centerY, 0, 100, position]
    };

    self.arc.animate({
        'arc': [self.centerX, self.centerY, domein.kennis, 100, position]
    }, self.duration, 'backOut');

现在文本标签需要随着圆弧移动。我在弄清楚如何沿圆弧路径移动文本元素时遇到问题。任何帮助，将不胜感激。

编辑：问题是正确定位文本元素；

看到这个问题/jsfiddle

4

1 回答 1

1

使用 Raphaël'sanimateWith()将文本元素动画与弧的动画联系起来。

于 2012-04-27T18:37:50.647 回答