Javascript Raphael.js:绘制一个带有边缘边框和填充颜色的圆
用数字绘制SVG是令人困惑的,但非常有用。通过修改其他人的例子,我得到了一个Raphael.js函数,它需要60秒的时间在一个圆圈周围画一条粗绿线,圆圈的中心是文本。在这里,它是JSFIDLE格式的,在container Div上有一个黑色背景,表示当前圆圈上没有背景颜色: 以下是JS:Javascript Raphael.js:绘制一个带有边缘边框和填充颜色的圆,javascript,svg,raphael,Javascript,Svg,Raphael,用数字绘制SVG是令人困惑的,但非常有用。通过修改其他人的例子,我得到了一个Raphael.js函数,它需要60秒的时间在一个圆圈周围画一条粗绿线,圆圈的中心是文本。在这里,它是JSFIDLE格式的,在container Div上有一个黑色背景,表示当前圆圈上没有背景颜色: 以下是JS: //60s circular timer function timer60s() { var archtype = Raphael("canvas60s", 200, 200); var set = arc
//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中都没有成功绘制背景+边框-有人能根据我的JSFIDLE提出一种可行的方法吗?我不确定,但你能画第二个圆圈吗 像这样: 我不明白那部分:
我还想在弧的任一侧添加静态的薄绿色边框,这样看起来弧在线之间慢慢填充。
于是我想到:)
我也不喜欢你在画布上输入文本的方式
你可以用
包含文本:感谢所有示例,这非常有用!这是一个解释得很好、提出得很好的问题。而且这个解决方案看起来也很简洁。:)
archtype.circle(100, 100, 50).attr({
"fill": "#fff",
"stroke": "#fff",
"stroke-width": "10"
});