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 に答える