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

Konva.js是一个强大的HTML5 2D绘图库，可以用于创建丰富的图形和动画效果。它基于Canvas元素，并提供了易于使用的API，使开发者能够轻松地创建和操作图形。

在Konva.js中创建形状和连接可以通过按钮的单击事件来实现动态创建。下面是一个示例代码：

// 创建舞台
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();
});

在上面的代码中，我们首先创建了一个舞台和一个图层。然后，通过new Konva.Rect和new Konva.Line分别创建了一个矩形和一条连接线，并将它们添加到图层中。接下来，我们监听了一个按钮的单击事件，在事件处理程序中动态创建了一个新的矩形和连接线，并将它们添加到图层中。最后，通过调用layer.draw()方法重新绘制图层，以显示新创建的形状和连接。

这只是一个简单的示例，你可以根据实际需求进行更复杂的形状和连接的创建。关于Konva.js的更多信息和详细的API文档，你可以参考腾讯云的产品介绍链接地址：Konva.js产品介绍。