关于Raphael.js 的画圆弧

用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(' ');
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值