Question

随着画布上形状数量的增加，我对kineticjs有一些严重的性能问题。我有两个函数，一个初始化路径，一个文本并在舞台上呈现它们。第二个函数每5秒调用一次，它会更新前面绘制的路径和文本上的任何更改。这是我正在尝试的示例片段，

  /**
  * Function that inits the shapes
  */
  init = function(params) {
  //Create the path object
  var path = new Kinetic.Path({
    data : params.geom,
    fill : params.fill,
    stroke : params.stroke.fill,
    strokeEnabled : false,
    scale : 1
  });
  path.setId(params.id + '.path');
  var simpleText = new Kinetic.Text({
    x : params.x,
    y : params.y + (params.height /2),
    text : params.displayText,
    fontSize : 12,
    fontFamily : params.family,
    fontStyle : params.style,
    fill : params.fill
  });
  simpleText.setId(params.id + '.text');

  var layer = new Kinetic.Layer();
  layer.setId(params.id);
  layer.add(path);
  layer.add(simpleText);
  stage.add(layer);
}

/**
* Update every 5 seconds based on new data
*/
update = function(params) {
  var layer = null;
  if (Kinetic.Global.ids[params.id] != undefined) {
    layer = Kinetic.Global.ids[params.id];
    //Set text
    var textItem = Kinetic.Global.ids[params.id + '.text'];
    textItem.setText(params.displayText);
    //center the text
    textItem.setAttr('x', params.x + (params.width / 2) - (textItem.textWidth / 2));
    textItem.setAttr('y', params.y + (params.height / 2) -            textItem.getAttr('fontSize'));
    // set center style
    textItem.setAlign('center');
    //Set path color
    var pathItem = Kinetic.Global.ids[params.id + '.path'];
    pathItem.setFill(params.fill);
    pathItem.setOpacity(params.alpha);

    layer.clear();
    layer.draw();
  }
}

随着要绘制的形状数量的增加，此代码将变得迟缓并消耗大量内存。上面的代码中可能有很多方面需要改进，我正在寻找那些指针。具体而言，我不相信Id查找和更新是更新现有形状的最佳方式。

Answer 1

您可以使用Kinetic.Global.ids函数，而不是通过layer.get('#someID')对象查找对象。不确定这是否有助于提高性能，但这是一个开始。

另外，我认为每次更新时都不需要使用layer.clear()图层，是吗？我认为layer.draw()应该足以更新形状。

建议：也许您可能只需要每5秒钟使用drawScene()而不是draw()这可能会有所帮助，因为您不需要重新绘制每次都打一层。请参阅此处了解动力学绘制函数之间的区别：What is the difference between KineticJS draw methods?

无论如何，非常昂贵每隔5秒在一个图层上使用draw()方法，尤其是当你开始在图层中有很多形状时。

另一个重要问题是：您的对象始终每5秒更改一次吗？我的意思是，有时您可能不需要绘制图层，因为没有发生更新。如果可以检查对象是否已更新，则可以决定是否需要调用更新函数以及是否需要重新绘制图层。

我的最后一个建议是建立在上面提到的最后一点，也许你不需要每次都重新绘制图层，因此重新绘制图层内的所有对象，可能不是图层中的所有对象都已更新（并且需要重新绘制））。 可能只有部分对象已更新。在这种情况下，如果您使用Kinetic.Group将每个文本/路径组合在一起，则可以使用group.draw()代替layer.draw()。现在，如果您可以找到每5秒更新数据的组，则只需每隔5秒绘制Kinetic.Group 而不是整个图层。

顺便说一句，你也可以像这样使用.get()函数：

var layers = stage.get('Layer'); // Returns an array of all Kinetic.Layers inside stage
var groups = layers[0].get('Group'); // Returns an array of all Kinetic.Groups inside the first layer (in the layers array)

有关get方法的更多信息，请参阅此处：http://kineticjs.com/docs/Kinetic.Container.html#get

kineticjs的性能问题

1 个答案: