パフォーマンスの問題KineticJS

Question

私は非常にキャンバスに慣れているので、何か入力が必要です。

私は約2k +長方形を処理する必要があるので、ライブラリの概要を作成することはできません。問題は、ドラッグとスケールでのパフォーマンスがあまり良くない、fpsが10以下になることです。私は（普通の）スクリプトのパフォーマンスを向上させるために、 。

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

Answer 1

私はちょうどFabric.jsを使って同じことを試しましたが、好奇心がかかりません。

私が著しく優れたパフォーマンスを見ています - 私は実験的な「group_rewrite」ブランチ使用していhttp://jsfiddle.net/M7n4p/

注 - 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)); 

Answer 2

ドラッグ可能なグリッドを作成するときに私も同じ問題を抱えています。しかし、私はそれについてできることはほとんどないと思う。

あなたが持っている細胞の数を減らすことについて考えることができます。 2k +矩形は、キャンバス上の形状を追跡する少なくとも2k +個のオブジェクトです。ドラッグイベントが少なくとも10フレーム/秒で発生すると、毎秒20k +の計算とオブジェクトアクセスが発生します。それが問題を引き起こす形状のせん断数。