移动文本元素与弧拉斐尔JS

Move text element along with arc RaphaelJS

本文关键字：JS 文本 元素 移动      更新时间：2023-09-26

我使用以下代码使用 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

使用 Raphaël 的animateWith()将文本元素动画与弧形的动画链接起来。

相关文章：