关于Raphael.js 的画圆弧

时间:2021-07-05 23:37:21

用Raphael画圆弧用到paper.path([pathsring])方法 

参数是个字符串

A 椭圆弧(rx ry x-axis-rotation large-arc-flag sweep-flag x y)


参数含义:

rx 横轴的长度

ry 纵轴的长度

x-axis-rotation 圆弧的横轴与x轴的角度

large-arc-flag 区分弧度的大小(0为小弧度,1为大弧度)

sweep-flag 围绕圆弧中心的方向(0为逆时针,1为顺时针)

x y 圆弧曲线的终点


例子(自己引进Raphael.js文件)

var paper=Raphael("paper");     //在html页面建一个div的id为paper

paper.path(getArc(50,0,50));


function getArc(radius,start,over){

var sweepFlag=over > start ? 1 : 0,
largeArc=((over-start)%360+360)%360 >180 ? 1 : 0 ,
rad1 = Math.PI/180,
cos = Math.cos,
sin = Math.sin,
startX = radius*cos(rad1*start), 
startY = radius*sin(rad1*start),
overX = radius*cos(rad1*over),
overY = radius*sin(rad1*over);

return [
'M',
startX.toFixed(2),startY.toFixed(2),
'A',
radius,radius,
0,largeArc,sweepFlag,
overX.toFixed(2),overY.toFixed(2)
].join(' ');
}