前端使用 Konva 实现可视化设计器（19）- 连接线 - 直线、折线

本章响应小伙伴的反馈，除了算法自动画连接线（仍需优化完善），实现了可以手动绘制直线、折线连接线功能。

请大家动动小手，给我一个免费的 Star 吧~

大家如果发现了 Bug，欢迎来提 Issue 哟~

github源码

gitee源码

示例地址

模式切换

前置工作

连接线 模式种类

// src/Render/types.ts
export enum LinkType {
   
  'auto' = 'auto',
  'straight' = 'straight', // 直线
  'manual' = 'manual' // 手动折线
}

连接线 模式状态

// src/Render/draws/LinkDraw.ts

// 连接线（临时）
export interface LinkDrawState {
   
  // 略
  linkType: Types.LinkType // 连接线类型
  linkManualing: boolean // 是否 正在操作拐点
}

连接线 模式切换方法

// src/Render/draws/LinkDraw.ts

  /**
   * 修改当前连接线类型
   * @param linkType Types.LinkType
   */
  changeLinkType(linkType: Types.LinkType) {
   
    this.state.linkType = linkType
    this.render.config?.on?.linkTypeChange?.(this.state.linkType)
  }

连接线 模式切换按钮

<!-- src/App.vue -->

<button @click="onLinkTypeChange(Types.LinkType.auto)"
        :disabled="currentLinkType === Types.LinkType.auto">连接线：自动</button>
<button @click="onLinkTypeChange(Types.LinkType.straight)"
        :disabled="currentLinkType === Types.LinkType.straight">连接线：直线</button>
<button @click="onLinkTypeChange(Types.LinkType.manual)"
        :disabled="currentLinkType === Types.LinkType.manual">连接线：手动</button>

连接线 模式切换事件

// src/App.vue
const currentLinkType = ref(Types.LinkType.auto)

function onLinkTypeChange(linkType: Types.LinkType) {
   
  (render?.draws[Draws.LinkDraw.name] as Draws.LinkDraw).changeLinkType(linkType)
}

当前 连接对（pair） 记录当前 连接线 模式

// src/Render/draws/LinkDraw.ts

export class LinkDraw extends Types.BaseDraw implements Types.Draw {
   
  // 略
  override draw() {
   
    // 略
  
    // 连接点
    for (const point of points) {
   
      // 略
    
      // 非 选择中
      if (group && !group.getAttr('selected')) {
   
        // 略
        const anchor = this.render.layer.findOne(`#${
     point.id}`)

        if (anchor) {
   
          // 略
          circle.on('mouseup', () => {
   
            if (this.state.linkingLine) {
   
              // 略
              
              // 不同连接点
              if (line.circle.id() !== circle.id()) {
   
                // 略
                if (toGroup) {
   
                  // 略
                  if (fromPoint) {
   
                    // 略
                    if (toPoint) {
   
                      if (Array.isArray(fromPoint.pairs)) {
   
                        fromPoint.pairs = [
                          ...fromPoint.pairs,
                          {
   
                            // 略
                            
                            linkType: this.state.linkType // 记录 连接线 类型
                          }
                        ]
                      }
                      // 略
                    }
                  }
                }
              }
              // 略
            }
          })
          // 略
        }
      }
    }
  }
}

直线

绘制直线相对简单，通过判断 连接对（pair）记录的 连接线 模式，从起点绘制一条 Line 到终点即可：

// src/Render/draws/LinkDraw.ts

export class LinkDraw extends Types.BaseDraw implements Types.Draw {
   
  // 略
  override draw() {
   
    // 略
  
    // 连接线
    for (const pair of pairs) {
   
        if (pair.linkType === Types.LinkType.manual) {
   
          // 略