钢笔手工绘制(位于:二次曲线图层)和代码绘制(位于:代码图层)同时展开:
核心代码:
var x1=100;//起始点
var y1=100;
var x2=200;//结束点
var y2=300;
var cpx=300;//控制点
var cpy=200;
var myG=new createjs.Graphics();
myG.beginStroke("#0000FF");
myG.moveTo(x1,y1);
/*myG.quadraticCurveTo(cpx,cpy,x2,y2);*/
myG.bezierCurveTo(x1,y1,cpx,cpy,x2,y2);
var myS=new createjs.Shape(myG);
stage.addChild(myS);
stage.update();
二次贝塞尔曲线可以看做是三次贝塞尔曲线的特殊情况:
myG.quadraticCurveTo(cpx,cpy,x2,y2); 可以写成 myG.bezierCurveTo(x1,y1,cpx,cpy,x2,y2);
此时手工工具绘制和代码绘制完全吻合。否则,会成下面的状态:两种方法有一定的误差,不完全吻合。如下图:
此问题很特别,待解决。
相关链接:使用AnimateCC 绘制三次贝塞尔曲线-CSDN博客