创建Konvajs形状和连接基于按钮单击事件动态创建

// 创建舞台
var stage = new Konva.Stage({
  container: 'container', // 容器元素的ID
  width: 500,
  height: 500
});

// 创建图层
var layer = new Konva.Layer();
stage.add(layer);

// 创建形状
var rect = new Konva.Rect({
  x: 100,
  y: 100,
  width: 100,
  height: 50,
  fill: 'red',
  draggable: true // 可拖动
});
layer.add(rect);

// 创建连接线
var line = new Konva.Line({
  points: [150, 125, 250, 125], // 连接线的起始点和终点坐标
  stroke: 'black',
  strokeWidth: 2
});
layer.add(line);

// 监听按钮的单击事件
document.getElementById('createShapeAndConnection').addEventListener('click', function() {
  // 创建新的形状
  var newRect = new Konva.Rect({
    x: 200,
    y: 200,
    width: 100,
    height: 50,
    fill: 'blue',
    draggable: true
  });
  layer.add(newRect);

  // 创建新的连接线
  var newLine = new Konva.Line({
    points: [250, 225, 350, 225],
    stroke: 'black',
    strokeWidth: 2
  });
  layer.add(newLine);

  // 重新绘制图层
  layer.draw();
});