javascript - 性能问题 KineticJS

Question

我对 Canvas 很陌生，所以我需要一些输入。

我不想用它的库存创建一个图书馆概览，所以我必须处理大约 2k+ 个矩形。问题是，拖动和缩放时的性能不是很好，fps 降到 10 以下。这很丑陋，所以我希望能提供一些改进意见或以其他方式提高我的(基本)脚本的性能.

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

Answer 1

我刚刚使用 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));