用数字绘制svg是令人困惑的,但非常非常有用。通过修改其他人的例子,我有一个拉斐尔.js函数,它需要60秒的时间来围绕一个圆圈画一条粗绿线,圆圈的中心有文本。下面是JSFiddle形式,在容器Div上使用黑色背景,以表明当前圆圈上没有背景颜色:
http://jsfiddle.net/8NZfU/1/JS:
//60s circular timer
function timer60s() {
var archtype = Raphael("canvas60s", 200, 200);
var set = archtype.set();
function drawCircle() {
var archtype = Raphael("canvas60s", 200, 200);
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
};
};
var my_arc = archtype.path().attr({
"stroke": "#339933",
"stroke-width": 10,
arc: [100, 100, 0, 100, 50]
});
my_arc.animate({
arc: [100, 100, 100, 100, 50]
}, 60000);
} //end drawCircle
drawCircle();
} // end timer60s
timer60s();
我想要的是创建一个白色背景的效果在整个圆里面的弧线绘制。我还想在圆弧的两侧添加静态的细绿色边框,这样看起来圆弧在线条之间慢慢填充。
我在CSS或Raphael中都没有成功地画出这个背景+边框-谁能提出一个基于我的JSFiddle的可行方法?
我不确定,但你能画第二个圆吗?
像这样:http://jsfiddle.net/5knjn/
archtype.circle(100, 100, 50).attr({
"fill": "#fff",
"stroke": "#fff",
"stroke-width": "10"
});
我不明白这个部分:
I also want to add static thin green borders to either side of the arc, so that it appears that the arc is slowly filling in between the lines.
所以我想到了:)http://jsfiddle.net/5knjn/1/
我也不喜欢你在画布上输入文本的方式。
可以使用rafael .text()
包含文字:http://jsfiddle.net/5knjn/2/