具有200+矢量形状的画架JS:性能和美学

EaselJS with 200+ vector shapes : performance and aesthetics

本文关键字：JS 性能 200+ 具有      更新时间：2023-09-26
使用 EaselJS 与 Canvas 本机方法

时，我遇到了一个巨大的性能问题：2.2 秒与 0.01 秒（尽管 EaselJS 确实映射画布本机方法......

我写了一个画布应用程序，它画了一棵树*。为了对树的生长进行动画处理，补间 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（） 操作，但结果 si 仍然很慢。缓存不适用，因为它是第一个渲染通道。我做错了什么？

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

（但是如果能回答第一个问题会很好，这可能不是我最后一次尝试补间复杂对象。

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

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

PS ： 这棵树确实有叶子;)...但我出于明显的清晰原因将它们拉了出来。

我已经更新了你的小提琴，它现在快多了。问题是你在每个循环中创建一个新的形状，这很慢。

 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/

相关文章：