繪製多條任意線條過於昂貴EaselJS

我正在使用EaselJS編程一個HTML5 2D「遊戲」，它看起來像一個行星/重力模擬器，我決定用一條線跟蹤地球的運動/軌道，隨着每個行星移動。這裏有一個快速GIF演示：繪製多條任意線條過於昂貴EaselJS

Demonstration of what I want

的問題是：如果我在每創建一個線勾出畫布去完全慢（因爲它是在每一個節拍，這是昂貴的抽籤線），所以我將昂貴的代碼移動到setInterval，循環之間間隔爲250毫秒，問題依然存在，因爲當有許多形狀時，它會在每個循環中創建大量行。另外，如果我只是在每個循環之間添加更多時間，結果將開始看起來...... Minecraft-ish。

Demonstration of 750ms intervals between each loop

我沒有就如何解決，因爲一切這個問題，我能想到的將包括在每個循環創建大量的行的想法。我嘗試過使用緩存，但是緩存這些細小的線條只是導致它們在最終的緩存圖像中消失，並且由於問題不在於更新線條，而是創建新線條，因此我認爲緩存對我無能爲力。

下面是相關代碼：

setInterval(function() { 
    allObjs.forEach(function(obj1) { 
     if (typeof obj1.xpast !== "undefined" || typeof obj1.ypast !== "undefined") { 
      var trail = new createjs.Shape(); 
      trail.graphics.s("#fff").ss(1, "round").moveTo(obj1.xpast + .5, obj1.ypast + .5).lineTo(obj1.x + .5, obj1.y + .5); 
      trail.alpha = 0.25; 
      stage.addChild(trail); 
      setTimeout(function() { 
       createjs.Tween.get(trail).to({ 
        alpha: 0 
       }, 1000).call(function() { 
        stage.removeChild(trail); 
       }); 
      }, 10000); 
     } 
     obj1.xpast = obj1.x; 
     obj1.ypast = obj1.y; 
    }); 
}, 750);

不幸的是，我不能把我的代碼中的jsfiddle的時刻。

來源

2014-09-02 Tiago Marinho

當每一幀重畫畫布（並清除它反映變化的內容）時，矢量線加起來非常快。這是因爲圖形指令每幀重繪。畫布上的矢量並不是硬件加速的，所以當你接近很多線時，使用這種方法會非常慢。

最好的方法是緩存矢量，然後只繪製新的東西。當您緩存它時，會在幕後創建一個新的畫布元素，並用它來代替實際的圖形。這意味着您可以使其儘可能地複雜，而無需改變任何性能。

緩存的大小，形狀，你需要（也許畫布大小？）
繪製新的圖形以幀
更新緩存（繪製圖形的內容到現有高速緩存）
清除圖形下一次

還有就是這個在GitHub上的例子：

http://createjs.com/Demos/EaselJS/Cache_update.html（顯示updateCache在行動）
http://createjs.com/Demos/EaselJS/CurveTo.html（顯示了類似的方法使用非清算階段）

希望這有助於！

來源

2014-09-03 15:45:03 Lanny

我不知道我可以使用「source-overlay」複合操作之前將新的矢量添加到同一個緩存中。謝謝，蘭尼。 :) – 2014-09-03 19:37:04

Lanny，我應該清除我緩存的每個向量的圖形指令嗎？ – 2014-09-04 13:10:21

每當您將它繪製到緩存中時清除圖形。否則，它會再次透支這些指示。 – Lanny 2014-09-04 15:10:25

繪製多條任意線條過於昂貴EaselJS

回答

相關問題