使用Konva.Node.create加载后矩形无法拖拽和变形的问题

看起来你遇到的问题是从数据库取出Konva的JSON配置并恢复舞台后，矩形节点失去了拖拽和变形的交互能力。我帮你分析下可能的原因和解决方案：

核心问题：多余的空层干扰了原有节点的交互 #

你的代码里有个关键问题：当使用Konva.Node.create(json, 'canvas-container')时，这个方法已经完整创建了舞台、包含所有节点的层，以及它们的交互配置。但你之后又新建了一个空的Konva.Layer()并添加到舞台上——这个空层会覆盖在原有节点所在的层上方，导致鼠标事件无法传递到下面的矩形节点，自然就无法拖拽或变形了。

修复步骤 #

1. 移除多余的层创建代码 #

直接删掉这几行不必要的代码：

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

保留Konva.Node.create创建的舞台即可，它已经包含了所有需要的层和节点。

2. 验证JSON中的交互配置是否完整 #

确保你存入数据库的JSON里，矩形节点已经配置了拖拽属性，并且如果使用了Transformer（变形控制器），相关配置也正确保存：

• 可拖拽的矩形JSON示例：

  {
    "className": "Stage",
    "children": [
      {
        "className": "Layer",
        "children": [
          {
            "className": "Rect",
            "attrs": {
              "x": 20,
              "y": 20,
              "width": 150,
              "height": 100,
              "fill": "#6495ed",
              "draggable": true // 必须开启这个属性才能拖拽
            }
          }
        ]
      }
    ]
  }
  

3. 手动恢复Transformer与节点的绑定（如果使用了变形功能） #

有时候Konva.Node.create可能无法自动恢复Transformer和目标节点的关联关系，这时候需要手动重新绑定：

var json = 'your-saved-json-code';
var stage = Konva.Node.create(json, 'canvas-container');

// 找到矩形节点和对应的Transformer
var targetRect = stage.find('.Rect')[0];
var transformer = stage.find('.Transformer')[0];

if (targetRect && transformer) {
  // 重新将矩形关联到Transformer
  transformer.nodes([targetRect]);
}

// 确保舞台重新渲染
stage.draw();

4. 检查事件绑定的目标 #

如果你后续要添加点击等事件，确保是绑定到原有层或节点上，而不是错误地绑定到空层。比如：

// 绑定到舞台上的第一个层（也就是原有节点所在的层）
stage.getLayers()[0].on('click', function(e) {
  console.log('点击了节点:', e.target);
});

按照这些步骤调整后，应该就能恢复矩形的拖拽和变形功能了。

内容的提问来源于stack exchange，提问作者Arshad