Javascript 加载konva.Node.create时，无法在konva js中拖动和变换矩形

我正忙于一个小项目，我想在其中添加不同的插槽并保存在数据库中

所有的事情都像预期的那样正常工作，我将json保存在数据库中，并在编辑页面上再次调用

问题是json添加的矩形不能拖动，也不能转换

我的javascript代码

 var json = 'jsoncode';
// create node using json string
var stage = Konva.Node.create(json, 'canvas-container');

var layer = new Konva.Layer();
stage.add(layer);
layer.draw();   

stage.on('click', function (e) {
  // if click on empty area - remove all transformers
  if (e.target === stage) {
    stage.find('Transformer').destroy();
    layer.draw();
    return;
  }
  // do nothing if clicked NOT on our rectangles
  if (!e.target.hasName('rect')) {
    return;
  }
  // remove old transformers
  // TODO: we can skip it if current rect is already selected
  stage.find('Transformer').destroy();

  // create new transformer
  var tr = new Konva.Transformer();
  layer.add(tr);
  tr.attachTo(e.target);
  layer.draw();
});



$("#add-shape").click(function(e){
e.preventDefault();
addShape();
}); 

/********  add shape *********/
var addShape = function(){

console.log("add shape");
var $i = 1;

var layer = new Konva.Layer();
var parentContainer = new Konva.Rect({
        x: 30,
        y: 40,
        width: 200,
        height: 60,
        name: random_name(),
        fill: random_hex_color(),
        draggable: true,
        stroke: '#fff',
        strokeWidth: 1
    });
    layer.add(parentContainer);
    stage.add(layer);

    parentContainer.on('click',function(e){
      var tr = new Konva.Transformer();
      layer.add(tr);
      tr.attachTo(e.target);
      layer.draw();
    });


    /*
       * dblclick to remove box for desktop app
       * and dbltap to remove box for mobile app
       */
    parentContainer.on("dblclick dbltap", function() {
        this.destroy();
        stage.find('Transformer').destroy();
        layer.draw();
    });
    stage.on('click', function (e) {
  // if click on empty area - remove all transformers
    if (e.target === stage) {
      stage.find('Transformer').destroy();
      layer.draw();
      return;
    }
    });

    parentContainer.on("transform", function(e){
    console.log('Moving ' + e.target.name());
    //layer.draw();
    });

    parentContainer.on("dragend", function(e){
    console.log('X ' + e.target.x());
    //layer.draw();
    });
}

---

在单击事件侦听器中，您具有以下条件：

// do nothing if clicked NOT on our rectangles
if (!e.target.hasName('rect')) {
  return;
}

---

但是json中的矩形没有

rect

名称。您应该添加此名称，或者删除条件。

您可以使用示例JSON创建在线演示吗？我已经创建了在线演示