1

我从raphael js 中绘制居中弧线的线程中得到了我需要的精确弧线动画

但是，我需要逆时针绘制该弧的另一个实例，而这个似乎只是顺时针。这条弧线是否可以逆时针绘制和动画？

已回答问题的代码片段：

// 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");
4

4 回答 4

3

正如凯文所说，您需要扫描标志集，并且需要反转一些变量。这是我逆时针方向的最终代码；

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
};
};
于 2013-03-04T10:04:42.990 回答
0

我无法弄清楚如何使圆弧本身逆时针旋转，但我能够使用本主题中的 CSS 镜像 SVG 本身。

于 2012-08-19T20:10:10.773 回答
0

您的问题的答案隐藏在svg1.1 规范中椭圆弧的 w3c 文档中。您正在寻找的是扫描标志 - 1（您一直在使用）导致顺时针弧，而 0 导致逆时针弧。几个月前，当我偶然发现这个问题时，我在 RaphaelJS.com 上找不到任何答案，这让我非常恼火。

您可以通过多种方式实现这一点，这样的方法可能是最直接的方法：

archtype.customAttributes.arc = function (xloc, yloc, value, total, R, sweep_flag ) {
    sweep_flag = sweep_flag || 1;
    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, sweep_flag, xloc - 0.01, yloc - R]
        ];
    } else {
        path = [
            ["M", xloc, yloc - R],
            ["A", R, R, 0, +(alpha > 180), sweep_flag, x, y]
        ];
    }
    return {
        path: path
    };
};

使用它，您应该能够使用可选的第 6 个参数来控制弧的方向。

于 2012-08-20T17:29:45.200 回答
0

使用它，您可以将负数传递给value参数。

r.ca.arc = function(centerX, centerY, value, total, radius){
    var
        angle = value / total * 359.99,
        absAngle = Math.abs(angle),
        a = Math.PI / 180 * (90 - angle),
        x = centerX + radius * Math.cos(a),
        y = centerY - radius * Math.sin(a),
        sweep = +(value >= 0),
        path;

        path = [
            ['M', centerX, centerY - radius],
            ['A', radius, radius, 0, +(absAngle > 180), sweep, x, y]
        ];

        return { 'path': path };
};
于 2013-08-24T11:25:36.303 回答