Javascript 生成的层的Kineticjs数组非常慢

使用KineticJSV5.1.0

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

它可能在鼠标中。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;
}

var xx=20；
var-yy=20；
var_layers=[]；
var计数=0；
var阶段=新的动力学阶段({
容器：'容器'，
宽度：978，
身高：900
});
对于（var j=0；j<20；j++）{
对于（变量n=0；n<20；n++）{
var layer=新的动能层（）；
var rect=新的动能.rect({
x:xx，
y:yy，
宽度：14，
身高：14，
填充：“绿色”，
笔画：“黑色”，
冲程宽度：4
});
on（'mouseover'，function（）{
本条。填充（“黄色”）；
//layer.draw（）；
//_层[n]。绘制（）；
//使用this.draw（）代替layer完全是猜测
这个.draw（）；
});
on（'mouseout'，function（）{
这个。填充（“蓝色”）；
这个.draw（）；
});
//添加到数组
_图层。推送（图层）
//将形状添加到层中
//使用count而不是n
_层[count]。添加（rect）；
//将层添加到舞台
阶段。添加（层）；
计数+=1；
xx+=20；
}
//重置xx并增加网格行
xx=20；
yy+=20；
}

每个层的大小与舞台相同，因此您有20x20=400层，所有层都是978x900。每层有2个画布，因此您有800个大画布。这对很多人来说都很好

相反，把你所有的动能矩形放在一层上

这里有一个例子，所有的矩形都在一层上。IMHO，性能可以接受，但不太好：

仍然有400个“智能”对象在监听鼠标移动。您正在重画所有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个自定义的dynamic.Shape根据矩形[]绘制所有矩形

• 收听Kinetic.Shape上的mousemove

• 如果鼠标下有一个矩形，则进行数学命中测试

• 在鼠标下重新绘制矩形并重新绘制形状

---

哦，谢谢！Stackoverflow没有通知我有人接了电话。我想当我在全局对象属性中搜索时，它画了一个很大的区域。我曾设想，不管怎样，我都必须重建命中检测器，就像一个传递消息的不可见覆盖层，也许这是第二层已经在做的事情，但是添加了更多的东西。无论哪种方式，我都会进入游戏引擎领域的优化阶段。无论如何谢谢你！