Javascript 在raphael.js中设置逆时针圆弧动画
我从线程中获得了所需的精确圆弧动画 然而,我需要另一个逆时针绘制的圆弧实例,而这个实例似乎只是顺时针绘制的。是否可以逆时针绘制此弧并设置动画 已回答问题的代码片段:Javascript 在raphael.js中设置逆时针圆弧动画,javascript,raphael,vector-graphics,Javascript,Raphael,Vector Graphics,我从线程中获得了所需的精确圆弧动画 然而,我需要另一个逆时针绘制的圆弧实例,而这个实例似乎只是顺时针绘制的。是否可以逆时针绘制此弧并设置动画 已回答问题的代码片段: // Custom Arc Attribute, position x&y, value portion of total, total value, Radius var archtype = Raphael("canvas", 200, 100); archtype.customAttributes.arc = func
// 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");
我不知道如何使弧本身逆时针旋转,但我能够使用CSS从镜像SVG本身。您的问题的答案隐藏在svg1.1规范中的中。您要寻找的是扫描标志--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个参数控制圆弧的方向。正如Kevin所说,您需要设置扫描标志,并且需要反转一些变量。这是我的最终代码,它是逆时针的
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
};
};
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 };
};
使用此选项,可以将负数传递给
值
参数
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 };
};