Question

我一直试图使用Raphael JavaScript库逆时针绘制一个圆圈的百分比，同时指定起始位置。

目前，我已经设法让它逆时针方向画，并使用下面的代码从6点位置开始，但我希望它能够在4点位置开始画画（或者理想的是在任何位置画画）我指定的位置。）

var amount = 75;

var archtype = Raphael("canvas", 500, 500);
archtype.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;
            console.log('x - ' + x);
            console.log('y - ' + y);
        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), 0, x, y]
            ];
        }
        return {
            path: path
        };
    };

var my_arc = archtype.path().attr({
    "stroke": "#00A5FF",
    "stroke-width": 14,
    arc: [90, 90, 0, 100, 80]
});

my_arc.animate({
    arc: [90, 90, amount, 100, 80]
}, 1500);

我刚刚开始使用Raphael库，非常感谢任何帮助。

由于

Answer 1

刚找到.rotate功能。下面的代码旋转圆圈-45度，从4点钟位置开始。我想你需要在Raphael v2中使用transform函数。

my_arc.rotate(-45, 90, 90).animate({
    arc: [90, 90, amount, 100, 80]
}, 1500);

改变拉斐尔弧的起始位置

1 个答案: