如何解决任何RaphaelJS Guru都知道如何绘制此图像?
| 任何Raphael JS大师(或任何不了解Raphael JS的天才)都知道如何简单地绘制此图形? 黄色实心为圆形部分的4.2 / 10。解决方法
使用SVG的椭圆弧曲线命令的第一种方法
演示:http://jsbin.com/iwuqe3/edit
Raphael.fn.zeroToTenArc = function (x,y,r,value) {
var set = this.set();
var pi = Math.PI;
var cos = Math.cos;
var sin = Math.sin;
var maxValue = 10;
var t = (pi/2) * 3; //translate
var rad = (pi*2 * (maxValue-value)) / maxValue + t;
var colors = [\"#F79518\",\"#FCE6BF\",\"#FFF\"];
set.push(this.circle(x,r).attr({ fill : colors[+!value],stroke : 0 }));
var p = [
\"M\",x,\"l\",r * cos(t),r * sin(t),\"A\",+(rad > pi + t),1,x + r * cos(rad),y + r * sin(rad),\"z\"
];
set.push(this.path(p).attr({ fill : colors[1],stroke : 0 }));
set.push(this.circle(x,r*0.7).attr({ fill : colors[2],stroke : 0 }));
return set;
};
var canvas = Raphael(\"hello\",300,300);
var arc = canvas.zeroToTenArc(150,150,30,4.2);
。
使用(大量)svg的lineto命令的第二种方法
演示:http://jsbin.com/usotu5/edit
Raphael.fn.zeroToTenArc = function (x,radius,value) {
var angle = 0;
var endAngle = (value*360)/10;
var path = \"\";
var clockwise = -1;
var translate = Math.PI/2;
while(angle <= endAngle) {
var radians= (angle/180) * Math.PI + translate;
var cx = x + Math.cos(radians) * radius;
var cy = y + Math.sin(radians) * radius * clockwise;
path += (angle === 0) ? \"M\" : \"L\";
path += [cx,cy];
angle += 1;
}
return this.path(path);
};
var canvas = Raphael(\"hello\",200,200);
canvas.zeroToTenArc(50,50,10).attr({ stroke : \"#FCE6BF\",\"stroke-width\" : 12 });
canvas.zeroToTenArc(50,4.2).attr({ stroke : \"#F79518\",\"stroke-width\" : 12 });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。