克隆后无法访问Konva Stage的儿童

时间:2016-08-30 05:59:40

标签: javascript html5 html5-canvas mootools konvajs

我对konvajs有疑问。我有一个konva阶段,我克隆到临时阶段,所以当用户取消时,我可以还原用户所做的更改。 我这样做的方法是,我将现有的舞台克隆成一个临时的舞台,摧毁原始的子节点,之后我将临时舞台的子节点移回原始舞台并销毁临时舞台。问题是,当我现在尝试访问孩子时,例如通过findOne('#id-of-child'),即使孩子存在,我也会被定义为未定义。

这是我到目前为止所做的:

clone: function()
{
  var cloned_stage = this.stage.clone();

  Array.each(this.stage.getChildren(), function(layer, lidx) {
    if (layer.attrs.id) {
      // setting the id to the ones, the children had before
      cloned_stage.children[lidx].attrs.id = layer.attrs.id;
    }
  });
  return cloned_stage;
},

restore: function(tmp_stage)
{
  this.stage.destroyChildren();

  Array.each(tmp_stage.getChildren(), function(layer, lidx) {
    var tmp_layer = layer.clone();
    tmp_layer.attrs.id = layer.attrs.id;
    tmp_layer.moveTo(this.stage);
  }.bind(this));
  tmp_stage.destroy();
  this.stage.draw();
},

现在,当用户打开工具箱进行更改时,使用“克隆”功能克隆当前阶段,当用户取消更改时,将使用克隆阶段作为参数调用“恢复”功能。 但在那之后,当我尝试做以下事情时,他们没有按预期工作。

some_child_of_the_stage.getLayer();      ->     returns null 
var edit_layer = this.stage.findOne('#edit-layer');     ->    returns undefined

但是“some_child_of_the_stage”确实存在并且有一层当然,舞台上有一个id为“edit-layer”的孩子。

我和我的同事都在我们的智慧结束。

感谢您的任何帮助和建议。

更新 通过console.log显示问题的简短提示: fiddle

1 个答案:

答案 0 :(得分:1)

  1. 最好不要触摸节点的attrs属性并使用公共getter和setter。

  2. Konva具有用于存储id属性的特殊逻辑。标识#edit-layer的选择器可能无法正常工作,因为可以直接访问attrs ID。

  3. 您可以使用该案例的名称属性。

  4. https://jsfiddle.net/s36hepvg/12/