javascript - 克隆后无法访问 Konva Stage 的子级

Question

我对 konvajs 有疑问。我有一个 konva Stage，我将其克隆到临时 Stage，这样当用户取消时我可以恢复用户所做的更改。我这样做的方法是将现有舞台克隆为临时舞台，销毁原始舞台的子级，然后将临时舞台的子级移回原始舞台并销毁临时舞台。问题是，当我现在尝试访问子级时，例如通过 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 : fiddle

Answer 1

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

2. Konva 有用于存储 id 属性的特殊逻辑。由于直接访问 attrs id，按 id #edit-layer 选择器可能无法工作。

3. 您可以在这种情况下使用 name 属性。

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