javascript - Kineticjs 生成层数组非常慢

Question

使用 Kineticjs v 5.1.0。

我想出了如何设置多个图层，希望使用多个 Canvas 层而不是每个今天早些时候的问题在一层中使用多个形状来提高性能。但它比以前更慢。我知道 Kinetic 为每一层创建两个 Canvas 元素，但不认为启动并通过鼠标悬停与其交互会非常慢。

它可能在鼠标悬停在 this.draw() 上时，我还不知道如何从数组中定位图层。

var xx = 20;
var yy = 20;
var _layers = [];
var count = 0;

var stage = new Kinetic.Stage({
  container: 'container',
  width: 978,
  height: 900
});

for(var j = 0; j < 20; j++) {

  for(var n = 0; n < 20; n++) {


    var layer = new Kinetic.Layer();

    var rect = new Kinetic.Rect({
      x: xx,
      y: yy,
      width: 14,
      height: 14,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 4
    });

    rect.on('mouseover', function() {
        this.fill("yellow");
        // layer.draw();
        // _layers[n].draw();
        // using this.draw() instead of layer was a total guess 
        this.draw();
    });
    rect.on('mouseout', function() {
        this.fill("blue");
        this.draw();
    });

    // add to array
    _layers.push(layer)

    // add the shape to the layer
    // use count instead of n
    _layers[count].add(rect);

    // add the layer to the stage
    stage.add(layer);

    count += 1;
    xx += 20;
  }
  // reset the xx and increase the grid row
  xx = 20;
  yy += 20;
}

Answer 1

每层的大小与舞台相同，因此您有 20x20=400 层，所有层的尺寸均为 978x900。每层有 2 个 Canvas ，因此您有 800 个大 Canvas 。这对很多人来说太棒了。

相反，将所有 Kinetic.Rect 放在 1 层上。

这是一个所有矩形都位于一层的示例。恕我直言，性能可以接受，但不是很好:

http://jsfiddle.net/m1erickson/z2hnLLte/

仍然剩下 400 个“智能”对象正在监听鼠标移动。每次点击任意 1 个矩形时，您都会重绘所有 400 个智能对象，因为 this.draw() 将重绘图层上的所有节点。

但是，如果您仍然希望获得更高的性能，则可以减少监听鼠标移动和重绘的“智能”对象的数量。您可以通过创建 1 个自定义 Kinetic.Shape 而不是 400 个单独的 Kinetic.Rect 来实现此目的。

• 创建一个对象数组来定义 400 个矩形中的每一个

  var rects=[];
  rects.push({x:0,y:0,color:'green'});
  rects.push({x:20,y:0,color:'green'});
  ....
  

• 重构您的代码以使用 1 个自定义 Kinetic.Shape 基于 rects[] 绘制所有矩形。

• 监听 Kinetic.Shape 上的鼠标移动。

• 以数学方式 HitTest 鼠标下方是否有矩形。

• 重新为鼠标下方的矩形着色并重新绘制形状。