EaselJS with 200+ vector shapes : performance and aesthetics

问题

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.

回答1:

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/

来源：https://stackoverflow.com/questions/28215208/easeljs-with-200-vector-shapes-performance-and-aesthetics

标签

javascript

canvas

easeljs