不能與KineticJS

Question

我使用KineticJS

控制層的畫布的大小，我想用許多小層獲得的密集繪圖性能，但我發現（與螢火），設置單獨的層的大小隻是不調整各自的畫布尺寸：所有創建的畫布都有舞臺尺寸！

這不是一個小的階段（至少沒有太多層）的問題，而是一個巨大的舞臺，近百層不會出現是一個性能問題？

換句話說，這是一個有用的功能或錯誤？

下面是一個簡單的測試代碼：

var stage = new Kinetic.Stage({ 
    container: 'main', 
    width: 400, 
    height: 400, 
}); 
for (var i=0; i<5; i++) { 
    var layer = new Kinetic.Layer({ 
     x:i*30+10, 
     y:i*30+10, 
     width:20, 
     height:20, 
    }); 
    layer.add(new Kinetic.Rect({ 
     width: 20, 
     height: 20, 
     fill: 'red', 
    })); 
    stage.add(layer); 

    // trying to force layer dimensions 
    layer.setWidth(20); 
    layer.setHeight(20); 
} 
stage.draw(); 

在這裏，我看到在看DOM時：

<div id="main"> 
    <div style="position: relative; display: inline-block; width: 400px; height: 400px;" class="kineticjs-content"> 
     <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas> 
     <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas> 
     <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas> 
     <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas> 
     <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas> 
    </div> 
</div> 

Answer 1

是的，你無法控制圖層的大小帆布

是的，你會得到一個很大的性能損失數百層的（=數百個全尺寸的畫布）。

層總是大小作爲自己的舞臺，即使你設置一個較小的寬度/高度相同。寬度/高度屬性從Kinetic.Node繼承，並且看起來無效。

而且具有固定寬度的層將允許外形「滲出」的是層（形狀將不會被夾入該層）的。

所以...層創建適量的是巨大的：

• 需要類似重繪時間表分層對象，
• Z-索引，
• 重繪的性能優勢。

埃裏克·羅威爾，KineticJS創造者，這樣做壓力測試：http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

他這樣說：

創建每瓶1000個形狀創建10,000個形狀10層。這大大提高了性能，因爲在從圖層中移除圓而不是所有10,000個形狀時，只需繪製1,000個形狀。請記住，層數過多也會降低性能。我發現使用10個圖層，每個圖層都由1000個圖形組成，比20個圖層具有500個圖形或2000個圖形的5個圖層更好。