CODEWITHSUNDEEP
javascriptsvgraphael
ec30
ec30

Reputation: 153

Move text element along with arc RaphaelJS

I am using the following code to draw (and animate) an arc path with 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');

Now a text label needs to move along with the arc. I'm having problems figuring out how to move the a text element along the path of the arc. Any help would be appreciated.

EDIT: The problem is to position the text element correctly;

see this question/jsfiddle

Upvotes: 1

Views: 715

Answers (1)

Eliran Malka
Eliran Malka

Reputation: 16263

Use Raphaël's animateWith() to link the text element animation with the arc's animation.

Upvotes: 1

Related Questions