javascript - 性能问题 KineticJS

Question

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

我不想用它的股票创建一个图书馆概览，所以我必须处理大约 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));

Answer 2

创建可拖动网格时，我也遇到了同样的问题。但是，我认为对此几乎没有人可以做。

您可以考虑减少您拥有的细胞数量。2k+ 个矩形是至少 2k+ 个在画布上跟踪形状的对象。拖动事件每秒至少发生 10 帧，您每秒有 20k+ 次计算和对象访问！它引起问题的形状的剪切数量。