在raphael.js中设置逆时针弧的动画

问题描述

我从线程中得到了我需要的精确弧形动画

I got the exact arc animation I need from the thread drawing centered arcs in raphael js

但是，我需要逆时针绘制此圆弧的另一个实例，而这个实例似乎只是顺时针方向。是否有可能以逆时针方向绘制和制作此弧？

However, I need another instance of this arc drawn counter-clockwise, while this one only seems to be clockwise. Is it possible for this arc to be drawn and animated counter-clockwise?

来自已回答问题的代码片段：

code snippet from the answered question:

// Custom Arc Attribute, position x&y, value portion of total, total value, Radius
var archtype = Raphael("canvas", 200, 100);
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;
    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
    };
};

//make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce
var my_arc = archtype.path().attr({
    "stroke": "#f00",
    "stroke-width": 14,
    arc: [50, 50, 0, 100, 30]
});

my_arc.animate({
    arc: [50, 50, 40, 100, 30]
}, 1500, "bounce");

推荐答案

正如凯文所说，你需要设置sweep_flag，你需要反转几个变量。这是我最后的代码逆时针方向;

As Kevin said, you need the sweep_flag set, and you need to invert a few variables. Here is my final code with it going anti-clockwise;

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;
    console.log(x);
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
};
};

这篇关于在raphael.js中设置逆时针弧的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！