javascript - 具有200多种矢量形状的EaselJS:性能和美学

使用EaselJS vs Canvas原生方法时，我遇到了一个巨大的性能问题：2.2 s vs 0.01 s（尽管EaselJS确实映射了canvas原生方法...）。

我写了一个画树的画布应用程序*。为了使树的生长具有动画效果，在EaselJS图形对象之间进行补间似乎比编写自定义绘制函数更清洁，更方便。
*（实际上，它看起来更像是弗吉尼亚爬山虎）

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）另外，我需要找到一种方法来使填充图案沿生长方向定向，所以我认为我将摆脱矢量形状，并在两个“生长状态”之间插入一些位图。如果有人有更好的主意，我将很高兴阅读。

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

3）摆脱EaselJS的另一个原因是抗锯齿不适用。为什么呢还必须调查...

希望这个问题能够帮助其他人避免一些错误（如果我做了一些错误），或者至少可以更好地理解easyljs处理矢量形状的方式。

PS：树上确实有叶子;）...但是出于明显的原因，我把它们拔了出来。

最佳答案

我已经更新了您的小提琴，现在速度更快了。问题是您要在每个循环中创建一个新的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/

关于javascript - 具有200多种矢量形状的EaselJS:性能和美学，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28215208/