createjs近期发现的坑与解决办法

  • 内容
  • 评论
  • 相关

梳理下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就好了(之前在博客里写的方法不太好用,这个方法简单有效)。

评论

1条评论
  1. Gravatar 头像

    清水 回复

    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);

发表评论

电子邮件地址不会被公开。