绘制椭圆弧拉斐尔

draw Elliptical arc raphael

我正在尝试绘制一个可以使用拉斐尔动画(反弹)的椭圆弧。至此我一直在跟着http://jsfiddle.net/jonhartmann/vm0etvz9/light/画弧线。这是我从上面的 link 得到的输出。

但我需要得到类似 shell(下图)的输出,从第二象限开始弧,x=-30 且 y=0(x 可以是负 x 轴上的任何值,具体取决于 RADIUS y 应为 0)。

我附上了实现结果的代码版本。

http://jsfiddle.net/vssb7n25/

var archtype = Raphael('graph', 100, 100);


archtype.customAttributes.arc = function (value) {
            var xloc = 50,
            yloc = 50,
            total = 100,
            R = 30,
            alpha = 180 / total * value,
            a = (180 - 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, +(alpha > 180), 1, x, y]
                        ];
            }else{
                path = [
                        ["M", xloc, yloc - R],
                        ["A", R, R, 0, +(alpha > 180), 1, x, y]
                        ];
            }



return {
            path: path
            };
        };

它工作正常,但在底部增加了一个额外的圆弧。

谁能帮我画拉斐尔椭圆弧

谢谢

根据原始示例,您需要更改圆弧的起点和终点。

起点(-1,0)变为

["M", xloc - R, yloc],

终点是

x = xloc - R * Math.sin(a),
y = yloc - R * Math.cos(a),