绘制椭圆弧拉斐尔
draw Elliptical arc raphael
我正在尝试绘制一个可以使用拉斐尔动画(反弹)的椭圆弧。至此我一直在跟着http://jsfiddle.net/jonhartmann/vm0etvz9/light/画弧线。这是我从上面的 link 得到的输出。
但我需要得到类似 shell(下图)的输出,从第二象限开始弧,x=-30 且 y=0(x 可以是负 x 轴上的任何值,具体取决于 RADIUS y 应为 0)。
我附上了实现结果的代码版本。
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),
我正在尝试绘制一个可以使用拉斐尔动画(反弹)的椭圆弧。至此我一直在跟着http://jsfiddle.net/jonhartmann/vm0etvz9/light/画弧线。这是我从上面的 link 得到的输出。
但我需要得到类似 shell(下图)的输出,从第二象限开始弧,x=-30 且 y=0(x 可以是负 x 轴上的任何值,具体取决于 RADIUS y 应为 0)。
我附上了实现结果的代码版本。
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),