Question

使用Kineticjs v 5.1.0。

我想出了如何设置多个层，希望在今天早些时候的问题中，使用许多画布层而不是一个层中的多个形状，性能会更好。但它比以往任何时候都要慢。我知道Kinetic为每一层创建了两个canvas元素，但是并不认为启动并通过鼠标悬停与它进行交互会非常慢。

它可能在mouseover 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幅画布，因此您有800幅大画布。这对许多人来说都是如此。

相反，将所有Kinetic.Rects放在一层。

以下是您在1层上完成所有工作的示例。恕我直言，表现是可以接受但不是很好：

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

这仍然让400＆＃39; smart＆＃39;正在侦听mousemoves的对象。您可以在任意1个矩形上重新绘制所有400个智能对象，因为this.draw()将重绘图层上的所有节点。

但如果您仍然希望获得更高的性能，那么可能会减少“智能”的数量。正在侦听mousemove并重新绘制的对象。您可以通过创建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上听取鼠标移动。
如果矩形在鼠标下方，则进行数学命中测试。
重新着色鼠标下方的矩形并重新绘制形状。

生成层的Kineticjs阵列非常慢

1 个答案: