Question

使用EaselJS vs Canvas本机方法时，我遇到了一个巨大的性能问题：2.2 s vs 0.01 s（虽然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（）操作，但结果仍然很慢。缓存不适用，因为它是第一个渲染过程。我做错了什么？

2）另外，我需要找到一种方法来将填充图案定向在增长方向上，所以我想我将摆脱矢量形状并在两个“生长状态”之间插入一些位图。如果有人有更好的想法，我会很高兴看到它。

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

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

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

PS：树上有树叶;）......但出于明显的清晰原因我将它们拉出来。

Answer 1

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

EaselJS具有200多种矢量形状：性能和美观

1 个答案: