文章/答案/技术大牛

发布

社区首页 >问答首页 >性能问题KineticJS

问性能问题KineticJS
EN

Stack Overflow用户

提问于 2012-05-08 15:41:05

回答 2查看 2.5K关注 0票数 2

我对canvas是个新手，所以我需要一些输入。

我不想创建一个库概述和它的股票，所以我必须处理关于2k+矩形。问题是，在拖动和缩放上的性能都不是很好，fps降到了10以下。这是很丑陋的，所以我希望能输入一些可以做得更好的东西，或者用其他方式来提高我(基本)脚本的性能。

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

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

javascript

canvas

kineticjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-05-08 19:26:20

出于好奇，我刚刚用Fabric.js做了同样的事情。

我确实看到了明显更好的性能-- http://jsfiddle.net/M7n4p/

注意，我使用的是实验性的"group_rewrite“分支- https://github.com/kangax/fabric.js/branches

顺便说一句，这里是用来创建它的代码(只是为了给你与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

Stack Overflow用户

发布于 2012-05-08 15:50:27

我在创建一个可拖动的网格时也遇到了同样的问题。然而，我认为人们对此几乎无能为力。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10494589

复制

相似问题

问性能问题KineticJS
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问性能问题KineticJSEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问性能问题KineticJS
EN