2

私はキャンバスにかなり慣れていないので、いくつかの入力が必要です。

ストックを含むライブラリの概要を作成したくないので、約 2k 以上の長方形を処理する必要があります。問題は、ドラッグとスケールのパフォーマンスがあまり良くなく、fps が 10 を下回ることです。これは明らかに見苦しいので、どうすればよいか、または他の方法で私の (基本的な) スクリプトのパフォーマンスを改善する方法を教えていただければ幸いです。 .

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

4

2 に答える 2

2

好奇心から、Fabric.jsを使用して同じことを試しました。

パフォーマンスが著しく向上しています — http://jsfiddle.net/M7n4p/

実験的な「group_rewrite」ブランチを使用していることに注意してください — https://github.com/kangax/fabric.js/branches

FWIW、これを作成するために使用されたコードは次のとおりです (Kinetic.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-08T11:26:19.777 に答える
0

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

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

于 2012-05-08T07:50:27.180 に答える