easeljs的arcTo参数说明:
Graphics.ArcTo (
x1 y1 x2 y2 radius
)
Defined in Graphics.ArcTo:1684
Parameters:
x1 Number
y1 Number
x2 Number
y2 Number
radius Number
试了一下这个API,非常蛋疼的存在。CAD绘图中经常给出弧线上的两点及该弦对应的圆心角,这样使用才方便:
辅助数据结构:
function xyObj(x,y){
this.x=x;
this.y=y;
}
辅助函数GetCircle根据两点和角确定圆心和半径,原理是是复数向量运算,DrawArc根据圆上两点和圆心角绘制弧线:
function GetCircle(pA,pB,angle,center) {
angle*=Math.PI/180;
var dx=pA.x-pB.x,dy=pA.y-pB.y;
var halfStringLen=Math.sqrt(dx*dx+dy*dy)/2;//半弦长
var radius=halfStringLen/Math.sin(angle/2);
radius=Math.abs(radius);
var P1=new xyObj(pA.x,pA.y);
var P2=new xyObj((pA.x+pB.x)/2,(pA.y+pB.y)/2);
var cplx=new xyObj(P2.x-P1.x,P2.y-P1.y);
var angle=(Math.PI-angle)/2+Math.atan2(cplx.y,cplx.x);
cplx.x=radius*Math.cos(angle);
cplx.y=radius*Math.sin(angle);
center.x=cplx.x+P1.x;
center.y=cplx.y+P1.y;
return radius;
}
function DrawArc(p1,p2,angle,cmd){
var center=new xyObj();
var radius=GetCircle(p1,p2,angle,center);
//console.log(center,radius);
var startAngle=Math.atan2(p1.y-center.y,p1.x-center.x);
cmd.arc(center.x,center.y,radius,startAngle,startAngle+angle*Math.PI/180);
}
用法:
var p1=new xyObj(100,200);
var p2=new xyObj(300,200);
var angle=90;
var holder=new createjs.Shape();
stage.addChild(holder);
DrawArc(p1,p2,angle,holder.graphics);
值得注意的是,函数DrawArc前两个点顺序不同会绘制出两个结果:“方向相反的圆弧”