具有 200 多个矢量形状的 EaselJS：性能和美学

Question

我在使用 EaselJS 时遇到了一个巨大的性能问题 vs Canvas 本机方法：2.2 秒 vs 0.01 秒（尽管 EaselJS 会映射 canvas本机方法...)。

我写了一个 canvas 应用程序来画一棵树*。为了动画树的生长，补间 EaselJS graphics 对象似乎比编写自定义绘图函数更干净、更方便。 *（实际上它看起来更像弗吉尼亚苦力怕）

1) 一定是我哪里做错了，EaselJS 性能太差了

代码的重要部分：

var g=new createjs.Graphics();
g.bs(branchTexture);
for (var i=0; i < arbre.length; i++) {
    var step=arbre[i];
    for (var t=0; t < step.length; t++){
        var d=step[t];
        var c=d[5];
        var s=new createjs.Shape(g);
        s.graphics.setStrokeStyle(7*(Math.pow(.65,d[7]-1)),'round').mt(c[0],c[1]).qt(c[2],c[3],c[4],c[5]);
        }
        mainStage.addChild(s);
    }
}
mainStage.update();

这是一个显示比较的 jsfiddle： http://jsfiddle.net/xxsL683x/29/

我尝试删除纹理，简化 moveTo() 操作，但结果仍然很慢。缓存不适用，因为它是第一个渲染通道。我做错了什么？

2) 此外，我需要找到一种方法将填充图案定向到生长方向，所以我想我会摆脱矢量形状并在两个 "growth states" 之间插入一些位图.如果有人有更好的主意，我很乐意阅读它。

（不过，如果能回答第一个问题就好了，这可能不是我最后一次尝试对复杂对象进行补间。）

3) 摆脱 EaselJS 的另一个原因是抗锯齿功能不适用。为什么？也得调查一下...

希望这个问题能帮助其他人避免一些错误，如果我已经做了一些错误，或者至少会导致更好地理解 easeljs 处理矢量形状的方式。

PS : 这棵树确实有叶子 ;)...但是为了清楚起见，我把它们拔掉了。

Answer 1

我已经更新了您的 Fiddle，现在速度快多了。问题是您在每个循环中创建一个新的 Shape，这非常慢。

 for (var t=0; t < step.length; t++){
    // loop
    g.setStrokeStyle(7*(Math.pow(.65,d[7]-1)),'round').mt(c[0],c[1]).qt(c[2],c[3],c[4],c[5]);
  }

  // then just create a Shape after all your graphic commands are built 
  var s = new createjs.Shape(g);
  mainStage.addChild(s);

http://jsfiddle.net/xxsL683x/31/

具有 200 多个矢量形状的 EaselJS：性能和美学

EaselJS with 200+ vector shapes : performance and aesthetics

javascript

canvas

easeljs