性能問題KineticJS

我對畫布很新，所以需要一些輸入。性能問題KineticJS

我不想用股票創建庫概述，所以我必須處理大約2k +矩形。問題是，在拖動和規模上的表現不是很好，fps下降到10以下。這很難看，所以我希望有些輸入可以做得更好或者以其他方式改善我的（基本）腳本的性能。

http://jsfiddle.net/kHGvh/13/embedded/result/
http://jsfiddle.net/kHGvh/13/

來源

2012-05-08 elonmir

呀，KineticJS遺憾的錯字=） – elonmir

我只是嘗試使用Fabric.js，出於好奇。

我確實看到明顯更好的性能 - http://jsfiddle.net/M7n4p/

請注意，我使用的是實驗性的「group_rewrite」分支 - https://github.com/kangax/fabric.js/branches

FWIW，這裏是用來創建它的代碼（只給你用動力學的比較.js文件）。

標記：

<canvas id="c" width="1200" height="600" style="border:1px solid #ccc"></canvas>

JS：

var canvas = new fabric.Canvas('c'); 

var rects = [ ]; 
for (var i = 1; i <= 47; i++) { 
    for (var j = 1; j <= 42; j++) { 
    var rect = new fabric.Rect({ 
     left: i*28, 
     top: j*18, 
     width: 20, 
     height: 10, 
     fill: 'green' 
    }); 
    rects.push(rect); 
    } 
} 

canvas.add(new fabric.Group(rects));

來源

2012-05-08 11:26:19 kangax

的確，這裏的表現稍好一些，但我想我必須找到另一個解決方案 – elonmir

創建一個可拖動的網格時我有同樣的問題也是如此。但是，我認爲沒有人能做到這一點。

您可以考慮減少您擁有的細胞數量。 2k +矩形至少有2k個對象，用於跟蹤畫布上的形狀。當拖動事件每秒發生至少10幀時，每秒有20k +的計算和對象訪問！造成問題的形狀的剪切數量。

來源

2012-05-08 07:50:27 Joseph

是的，我明白了存在的主要問題，但沒有任何解決方案，也許實例化對象？問題是，圖書館有大約2k +股票，需要可視化，所以我必須渲染所有這些對象。在某些情況下，甚至可能會有更多的股票。 – elonmir

@elonmir你可能想考慮一個不同的方法。畫布沒有畫布上形狀的跟蹤機制，這就是使用對象的原因。 – Joseph

我打開了建議=） – elonmir

性能問題KineticJS

回答

相關問題