javascript - EaselJS 具有 200 多个矢量形状 : performance and aesthetics

Question

在使用 EaselJS 与 Canvas 原生方法时遇到了巨大的性能问题:2.2 秒 vs 0.01 秒(尽管 EaselJS 执行 map 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()操作，但结果仍然很慢。缓存不适用，因为它是第一个渲染 channel 。我做错了什么？

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

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

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/