EaselJS с более чем 200 векторными фигурами: производительность и эстетика

Question

У меня огромная проблема перфорации при использовании 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(), но результат все еще был очень медленным. Кэширование не применяется, так как это первый проход рендеринга. Что я сделал не так?

2) Кроме того, мне нужно найти способ сориентировать шаблон заливки в направлении роста, поэтому я думаю, что избавлюсь от векторных форм и интерполирую некоторое растровое изображение между двумя "состояниями роста". Если у кого-то есть идея получше, я был бы рад ее прочитать.

(Но было бы неплохо получить ответ на первый вопрос, хотя, вероятно, это не последний раз, когда я буду пытаться анимировать сложные объекты.)

3) Еще одна причина избавления от EaselJS заключается в том, что сглаживание не применяется. Зачем? И должен быть исследован...

Надеюсь, что этот вопрос поможет другим избежать некоторых ошибок, если я их сделал, или, по крайней мере, приведет к лучшему пониманию того, как easeljs обрабатывает векторные фигуры.

PS: у дерева действительно есть листья;)... но я вытащил их по очевидным причинам ясности.

Answer 1

Я обновил вашу скрипку, теперь она намного быстрее. Проблема в том, что вы создаете новую форму в каждом цикле, что довольно медленно.

 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/