画椭圆弧拉斐尔

Question

我正在尝试绘制一个可以使用拉斐尔动画（反弹）的椭圆弧。到目前为止，我一直在关注http://jsfiddle.net/jonhartmann/vm0etvz9/light/ 来绘制弧线。这是我从上面的链接得到的输出。

但我需要得到一个像 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
            };
        };

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

谁能帮我画拉斐尔椭圆弧。

谢谢

Answer 1

从原始示例中，您需要更改弧的起点和终点。

起点（-1,0）变为

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

而终点是

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