性能问题 KineticJS答案

【问题标题】：Performance Issues KineticJS性能问题 KineticJS
【发布时间】：2023-03-30 09:24:01
【问题描述】：

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

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

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

【问题讨论】：

是的，KineticJS 抱歉打错了 =)

标签： javascript canvas kineticjs

【解决方案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));

【讨论】：

确实，这里的性能稍微好一点，但我想我必须找到另一个解决方案

【解决方案2】：

我在创建可拖动网格时也遇到了同样的问题。但是，我认为对此几乎无能为力。

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

【讨论】：

是的，我了解主要问题，但有没有办法实例化对象？问题是，图书馆有大约 2k+ 个股票，需要可视化，所以我必须渲染所有这些对象。在某些情况下，库存甚至可能更多。
@elonmir 您可能想为此考虑一种不同的方法。 canvas 没有针对画布上的形状的跟踪机制，这就是使用对象的原因。