1

随着画布上形状数量的增加，我在使用 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 查找和更新是否是更新现有形状的最佳方式。

4

1 回答 1

4

Kinetic.Global.ids您可以使用layer.get('#someID')函数来代替通过对象查找对象。不确定这是否会对性能有很大帮助，但这是一个开始。

另外，我认为您不需要layer.clear()每次更新时都使用该图层，对吗？我认为layer.draw()仅更新形状就足够了。

一个建议：也许您可能只需要drawScene()每 5 秒使用一次，而不是draw()这可能会有所帮助，因为您不需要每次都重新绘制命中层。请参阅此处了解 Kinetic 绘制函数之间的区别：KineticJS 绘制方法之间的区别是什么？

无论如何，每 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

于 2013-09-09T16:24:19.863 回答