具有200多种矢量形状的EaselJS：性能和美学 [英] EaselJS with 200+ vector shapes : performance and aesthetics

问题描述

在使用EaselJS vs 画布本机方法时，我遇到了一个巨大的性能问题：2.2 s vs 0.01 s（尽管EaselJS可以绘制画布本机方法...）。

我写了一个画树的画布应用程序*。为了动画化树的生长，与编写自定义绘制函数相比，在EaselJS graphics 对象之间进行补间似乎更干净，更方便。
*（实际上看起来更像是弗吉尼亚爬山虎）

1）我一定做错了，因为EaselJS的性能非常差。 / p>

代码的重要部分：

  var g = new createjs .Graphics（）; 
 g.bs（branchTexture）; 
 for（var i = 0; i  var step = arbre [i]; 
 for（var t = 0; 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：树上确实有叶子;）...但出于明显的原因我将它们拔出了。

解决方案

我已经更新了您的小提琴，它现在要快得多。问题是您在每个循环中创建一个新的Shape，这非常慢。

  for（var t = 0 ; t< step.length; t ++）{
 //循环
 g.setStrokeStyle（7 *（Math.pow（.65，d [7] -1）），'round'）。 mt（c [0]，c [1]）。qt（c [2]，c [3]，c [4]，c [5]）; 
} 
 
 // //构建完所有图形命令后，只需创建一个Shape即可。
 var s = new createjs.Shape（g）; 
 mainStage.addChild（s）; 
  

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

I'm having a huge perf issue when using EaselJS vs Canvas native method : 2.2 s vs 0.01 s (although EaselJS do map canvas native methods...).

I wrote a canvas app which draws a tree*. In order to animate the growth af the tree, it seems cleaner and handier to tween an EaselJS graphics object than writing a custom drawing function. *(actually it'll look more like a virginia creeper)

1) I must have done something wrong, as the perf with EaselJS are awfull.

The significant piece of the code :

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();

Here's a jsfiddle showing the comparison : http://jsfiddle.net/xxsL683x/29/

I tried removing texture, simplifying moveTo() operations, but the result si still very slow. Caching doesn't apply, as it's the first rendering pass. What have I done wrong ?

2) Additionally, I need to find a way to orient the filling pattern in the direction of the growth, so I think i'll get rid of the vector shapes and interpolate some bitmap between two "growth states". If anyone has a better idea, i would be glad to read it.

(But it would be nice to have an answer to the first question though, it's probably not the last time I'll be attempting to tween complex objects.)

3) Another reason for getting rid of EaselJS is that the antialiasing doesn't apply. Why ? Also has to be investigated...

Hope this question will help others to avoid some errors, if I've done some, or at least lead to a better understanding of the way easeljs handles vector shapes.

PS : The tree do have leaves ;)... but I pulled them out for obvious clarity reasons.

解决方案

I've update your Fiddle, it's now much faster. The problem is that you're creating a new Shape in each loop, which is pretty slow.

 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：性能和美学的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！