如何通过按钮点击在Vue中动态创建Konva.js图形及节点连接线

核心数据结构定义 #

首先在组件内声明两组响应式数组，以及两个操作状态标记：

• nodes：存储所有矩形节点数据，每个元素包含唯一id、坐标(x/y)、宽高、填充色等属性
• connectors：存储所有连接线数据，每个元素包含唯一id、起点节点id、终点节点id
• isConnecting：布尔值，标记当前是否处于选择节点创建连接线的状态
• tempStartNode：临时存储连接线的首个选中节点id

Add Node 按钮功能实现 #

给Add Node按钮绑定点击事件，直接向nodes数组推入新节点数据即可，新节点的位置可以设置为画布中心，或者每次偏移固定值避免重叠：

// 示例逻辑，可根据需求调整位置生成规则
const handleAddNode = () => {
  const newNode = {
    id: `node_${Date.now()}`,
    x: 100 + nodes.length * 25,
    y: 100 + nodes.length * 25,
    width: 120,
    height: 60,
    fill: '#42b983',
    draggable: true
  }
  nodes.push(newNode)
}

画布渲染时直接遍历nodes数组生成<v-rect>组件即可，每个矩形绑定点击事件用于后续连接线选择逻辑。

Add Connector 按钮功能实现 #

第一步：按钮点击触发连接状态 #

给Add Connector按钮绑定点击事件，开启连接状态：

const handleAddConnector = () => {
  isConnecting = true
  tempStartNode = null
  // 可在此处添加操作提示，告知用户需先后点击两个节点生成连接线
}

第二步：节点点击判断生成连接线 #

在矩形的点击事件中加入状态判断逻辑：

const handleNodeClick = (clickedNode) => {
  // 非连接状态下不触发该逻辑
  if (!isConnecting) return
  // 首次点击选中起点
  if (!tempStartNode) {
    tempStartNode = clickedNode.id
    return
  }
  // 二次点击选中终点，禁止同一节点自连
  if (tempStartNode === clickedNode.id) return
  // 生成连接线数据
  const newConnector = {
    id: `conn_${Date.now()}`,
    from: tempStartNode,
    to: clickedNode.id
  }
  connectors.push(newConnector)
  // 重置连接状态
  isConnecting = false
  tempStartNode = null
}

第三步：连接线渲染与动态更新 #

渲染连接线时，遍历connectors数组，根据每个连接线的from和to字段匹配对应节点的坐标，计算出连线的路径点，用<v-line>组件渲染即可。如果需要支持节点拖动后连线自动跟随，只需在节点的dragmove事件触发时，重新计算对应连接线的路径点即可。

可选优化方案 #

• 连接状态下给可点击的节点添加高亮边框，降低用户操作理解成本
• 新节点生成时加入碰撞检测，避免新节点完全覆盖已有节点
• 连接线可添加箭头标记区分方向，直接使用Konva.Line的arrow相关配置即可实现
• 若需要支持撤销操作，可将节点、连接线的修改操作存入操作栈，回退时直接恢复对应数据即可

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