createjs近期发现的坑与解决办法
梳理下createjs近期发现的坑与解决办法，此文章只梳理最近的，下面这个文章地址是全部的，并定期更新。
1.graphics在使用moveTo lineTo时如果异步画线需要重新设置样式
比如：
var shape = new createjs.Shape();
container.addChild(shape);
shape.graphics.setStrokeStyle(2).beginStroke("#000000");
shape.graphics.moveTo(0,0);
shape.graphics.lineTo(100,100);
shape.graphics.lineTo(200,150);
shape.graphics.lineTo(300,50);
这样是对的 可以只设置一个style然后不停的lineTo下去，但是如果setTimeout或者click后再画就不行了，比如：
var shape = new createjs.Shape();
container.addChild(shape);
shape.graphics.setStrokeStyle(2).beginStroke("#000000");
shape.graphics.moveTo(0,0);
shape.graphics.lineTo(100,100);
shape.graphics.lineTo(200,150);
shape.graphics.lineTo(300,50);
setTimeout(function (){
// shape.graphics.lineTo(400,300);//这里直接lineTo虽然颜色不会变但是粗细就变了，不知道是不是createjs的BUG
shape.graphics.setStrokeStyle(2).beginStroke("#000000");//这样重新设置样式后就没问题了
shape.graphics.moveTo(300,50);
shape.graphics.lineTo(400,300);
},2000)
2.直接使用animateCC发布功能导出sprite图，图与图之间会有1像素间隔，有时候会在项目图片的边框上出现底色。
解决办法：animateCC发布设置-》sprite表-》jpeg设置-》最大大小设置为1 也就是说jpg图不融合sprite，png没关系，因为png是透明的，没有底色。
3.如果出现无法跳帧，把MC的autoReset设置为false就好了（之前在博客里写的方法不太好用，这个方法简单有效）。
清水
babyEye = {};
babyEye.pointDistance = (p1, p2) => {
return Math.sqrt(Math.pow(p1.x - p2.x,2) + Math.pow(p1.y - p2.y,2));
}
babyEye.animateDraw = (config, hidden=[]) => {
let {shape, points, color, strokeStyle, speed} = config;
let g = shape.graphics.s(color).ss(...strokeStyle).mt(points[0].x, points[0].y);
let cmd = g.lt(points[0].x, points[0].y).command;
let time = babyEye.pointDistance(points[0],points[1]) * (1/speed);
let tween = createjs.Tween.get(cmd).to({x:points[1].x, y: points[1].y}, time);
if(config.onChange) tween.on("change",()=>{config.onChange(cmd)});
tween.call(()=>{
if(points.length {
if(index == 0) {
let fc = config.fillColor? config.fillColor:color;
g.f(fc).mt(point.x,point.y)
}else {
g.lt(point.x,point.y);
}
});
if(config.onComplete) config.onComplete();
return;
}
hidden.push(points.shift());
babyEye.animateDraw(config, hidden);
})
}
// 缓慢画线
// let target = new createjs.Shape();
// let config = {
// shape: target,
// points: [new c.Point(0,0), new c.Point(400,300), new c.Point(-50,300), new c.Point(0,0)],
// color: "red",
// strokeStyle: [10, "round"],
// speed: 0.8,
// finalFill: true,// 可选
// fillColor: "blue",// 可选
// onComplete: ()=>{console.log("complete!")},//可选
// onChange: (ltCmd)=>{console.log(ltCmd)}, //可选
// }
// babyEye.animateDraw(config);