前端使用Konva实现可视化设计器（15）-自定义连接点、连接优化

转载作者：撒哈拉更新时间：2024-06-14 21:04:28

前面，本示例实现了折线连接线，简述了实现的思路和原理，也已知了一些缺陷。本章将处理一些缺陷的同时，实现支持连接点的自定义，一个节点可以定义多个连接点，最终可以满足类似图元接线的效果.

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

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

github源码。

gitee源码。

示例地址。

一些调整

把示例素材从 src 转移至 public 目录，拖入画布的素材改为异步加载
移除部分示例素材
一些开发过程中的测试用例可以在线加载

此前有些朋友说导入、导出有异常，估计是线上版本和线下版本的构建示例素材的文件 hash 后缀不一样，跨环境导入、导出无法加载图片导致的。现在调整后就应该正常了.

自定义连接点

先说明一下定义:

// src/Render/types.ts

export interface AssetInfoPoint {
  x: number
  y: number
  direction?: 'top' | 'bottom' | 'left' | 'right' // 人为定义连接点属于元素的什么方向
}

export interface AssetInfo {
  url: string
  points?: Array<AssetInfoPoint>
}

// src/Render/draws/LinkDraw.ts

// 连接点
export interface LinkDrawPoint {
  id: string
  groupId: string
  visible: boolean
  pairs: LinkDrawPair[]
  x: number
  y: number
  direction?: 'top' | 'bottom' | 'left' | 'right' // 人为定义连接点属于元素的什么方向
}

一个素材除了原来的 url 信息外，增加了一个 points 的连接点数组，每个 point 除了记录了它的相对于素材的位置 x、y，还有方向的定义，目的是说明该连接点出入口方向，例如:

做这个定义的原因是，连接方向不可以预知，是与图元的含义有关。不设定 direction 的话，就代表连接线可以从上下左右4个方向进出，如:

最佳实践应该另外实现一个连接点定义工具（也许后面有机会实现一个）,多多支持~ 。

// src/App.vue

// 从 public 加载静态资源 + 自定义连接点
const assetsModules: Array<Types.AssetInfo> = [
  { "url": "./img/svg/ARRESTER_1.svg", points: [{ x: 101, y: 1, direction: 'top' }, { x: 101, y: 199, direction: 'bottom' }] },
  { "url": "./img/svg/ARRESTER_2.svg", points: [{ x: 101, y: 1, direction: 'top' }, { x: 101, y: 199, direction: 'bottom' }] },
  { "url": "./img/svg/ARRESTER_2_1.svg", points: [{ x: 101, y: 1, direction: 'top' }, { x: 101, y: 199, direction: 'bottom' }] },
  { "url": "./img/svg/BREAKER_CLOSE.svg", points: [{ x: 100, y: 1, direction: 'top' }, { x: 100, y: 199, direction: 'bottom' }] },
  { "url": "./img/svg/BREAKER_OPEN.svg", points: [{ x: 100, y: 1, direction: 'top' }, { x: 100, y: 199, direction: 'bottom' }] },
  // 略
 ]

素材拖入之前，需要携带 points 信息:

// src/App.vue

function onDragstart(e: GlobalEventHandlersEventMap['dragstart'], item: Types.AssetInfo) {
  if (e.dataTransfer) {
    e.dataTransfer.setData('src', item.url)
    e.dataTransfer.setData('points', JSON.stringify(item.points)) // 传递连接点信息
    e.dataTransfer.setData('type', item.url.match(/([^./]+)\.([^./]+)$/)?.[2] ?? '')
  }
}

拖入之后，需要解析 points 信息:

// src/Render/handlers/DragOutsideHandlers.ts

      drop: (e: GlobalEventHandlersEventMap['drop']) => {
        const src = e.dataTransfer?.getData('src')

        // 接收连接点信息
        let morePoints: Types.AssetInfoPoint[] = []
        const morePointsTxt = e.dataTransfer?.getData('points') ?? '[]'

        try {
          morePoints = JSON.parse(morePointsTxt)
        } catch (e) {
          console.error(e)
        }

        // 略

              // 默认连接点
              let points: Types.AssetInfoPoint[] = [
                // 左
                { x: 0, y: group.height() / 2, direction: 'left' },
                // 右
                {
                  x: group.width(),
                  y: group.height() / 2,
                  direction: 'right'
                },
                // 上
                { x: group.width() / 2, y: 0, direction: 'top' },
                // 下
                {
                  x: group.width() / 2,
                  y: group.height(),
                  direction: 'bottom'
                }
              ]

              // 自定义连接点 覆盖 默认连接点
              if (Array.isArray(morePoints) && morePoints.length > 0) {
                points = morePoints
              }

              // 连接点信息
              group.setAttrs({
                points: points.map(
                  (o) =>
                    ({
                      ...o,
                      id: nanoid(),
                      groupId: group.id(),
                      visible: false,
                      pairs: [],
                      direction: o.direction // 补充信息
                    }) as LinkDrawPoint
                )
              })

              // 连接点（锚点）
              for (const point of group.getAttr('points') ?? []) {
                group.add(
                  new Konva.Circle({
                    name: 'link-anchor',
                    id: point.id,
                    x: point.x,
                    y: point.y,
                    radius: this.render.toStageValue(1),
                    stroke: 'rgba(0,0,255,1)',
                    strokeWidth: this.render.toStageValue(2),
                    visible: false,
                    direction: point.direction // 补充信息
                  })
                )
              }
              
              // 略
      }

如果没有自定义连接点，这里会给予之前一样的 4 个默认连接点.

出入口修改

原来的逻辑就不能用了，需要重写一个。目标是计算出：沿着当前连接点的方向与不可通过区域其中一边的相交点，上图:

关注的就是这个绿色点（出入口）:

就算这个点，用的是三角函数:

这里边长称为 offset，角度为 rotate，计算大概如下:

const offset = gap * Math.atan(((90 - rotate) * Math.PI) / 180)

不同角度范围，计算略有不同，是根据多次测试得出的，有兴趣的朋友可以在优化精简一下.

完整方法有点长，四个角直接赋值，其余按不同角度范围计算:

  // 连接出入口（原来第二个参数是 最小区域，先改为 不可通过区域）
  getEntry(anchor: Konva.Node, groupForbiddenArea: Area, gap: number): Konva.Vector2d {
    // stage 状态
    const stageState = this.render.getStageState()

    const fromPos = anchor.absolutePosition()

    // 默认为 起点/终点 位置（无 direction 时的值）
    let x = fromPos.x - stageState.x,
      y = fromPos.y - stageState.y

    const direction = anchor.attrs.direction

    // 定义了 direction 的时候
    if (direction) {
      // 取整 连接点 锚点 旋转角度（保留 1 位小数点）
      const rotate = Math.round(anchor.getAbsoluteRotation() * 10) / 10

      // 利用三角函数，计算按 direction 方向与 不可通过区域 的相交点位置（即出/入口 entry）
      if (rotate === -45) {
        if (direction === 'top') {
          x = groupForbiddenArea.x1
          y = groupForbiddenArea.y1
        } else if (direction === 'bottom') {
          x = groupForbiddenArea.x2
          y = groupForbiddenArea.y2
        } else if (direction === 'left') {
          x = groupForbiddenArea.x1
          y = groupForbiddenArea.y2
        } else if (direction === 'right') {
          x = groupForbiddenArea.x2
          y = groupForbiddenArea.y1
        }
      } else if (rotate === 45) {
        if (direction === 'top') {
          x = groupForbiddenArea.x2
          y = groupForbiddenArea.y1
        } else if (direction === 'bottom') {
          x = groupForbiddenArea.x1
          y = groupForbiddenArea.y2
        } else if (direction === 'left') {
          x = groupForbiddenArea.x1
          y = groupForbiddenArea.y1
        } else if (direction === 'right') {
          x = groupForbiddenArea.x2
          y = groupForbiddenArea.y2
        }
      } else if (rotate === 135) {
        if (direction === 'top') {
          x = groupForbiddenArea.x2
          y = groupForbiddenArea.y2
        } else if (direction === 'bottom') {
          x = groupForbiddenArea.x1
          y = groupForbiddenArea.y1
        } else if (direction === 'left') {
          x = groupForbiddenArea.x2
          y = groupForbiddenArea.y1
        } else if (direction === 'right') {
          x = groupForbiddenArea.x1
          y = groupForbiddenArea.y2
        }
      } else if (rotate === -135) {
        if (direction === 'top') {
          x = groupForbiddenArea.x1
          y = groupForbiddenArea.y2
        } else if (direction === 'bottom') {
          x = groupForbiddenArea.x2
          y = groupForbiddenArea.y1
        } else if (direction === 'left') {
          x = groupForbiddenArea.x2
          y = groupForbiddenArea.y2
        } else if (direction === 'right') {
          x = groupForbiddenArea.x1
          y = groupForbiddenArea.y1
        }
      } else if (rotate > -45 && rotate < 45) {
        const offset = gap * Math.tan((rotate * Math.PI) / 180)
        if (direction === 'top') {
          x = fromPos.x - stageState.x + offset
          y = groupForbiddenArea.y1
        } else if (direction === 'bottom') {
          x = fromPos.x - stageState.x - offset
          y = groupForbiddenArea.y2
        } else if (direction === 'left') {
          x = groupForbiddenArea.x1
          y = fromPos.y - stageState.y - offset
        } else if (direction === 'right') {
          x = groupForbiddenArea.x2
          y = fromPos.y - stageState.y + offset
        }
      } else if (rotate > 45 && rotate < 135) {
        const offset = gap * Math.atan(((90 - rotate) * Math.PI) / 180)
        if (direction === 'top') {
          x = groupForbiddenArea.x2
          y = fromPos.y - stageState.y - offset
        } else if (direction === 'bottom') {
          x = groupForbiddenArea.x1
          y = fromPos.y - stageState.y + offset
        } else if (direction === 'left') {
          x = fromPos.x - stageState.x - offset
          y = groupForbiddenArea.y1
        } else if (direction === 'right') {
          x = fromPos.x - stageState.x + offset
          y = groupForbiddenArea.y2
        }
      } else if ((rotate > 135 && rotate <= 180) || (rotate >= -180 && rotate < -135)) {
        const offset = gap * Math.tan((rotate * Math.PI) / 180)
        if (direction === 'top') {
          x = fromPos.x - stageState.x - offset
          y = groupForbiddenArea.y2
        } else if (direction === 'bottom') {
          x = fromPos.x - stageState.x + offset
          y = groupForbiddenArea.y1
        } else if (direction === 'left') {
          x = groupForbiddenArea.x2
          y = fromPos.y - stageState.y + offset
        } else if (direction === 'right') {
          x = groupForbiddenArea.x1
          y = fromPos.y - stageState.y - offset
        }
      } else if (rotate > -135 && rotate < -45) {
        const offset = gap * Math.atan(((90 + rotate) * Math.PI) / 180)
        if (direction === 'top') {
          x = groupForbiddenArea.x1
          y = fromPos.y - stageState.y - offset
        } else if (direction === 'bottom') {
          x = groupForbiddenArea.x2
          y = fromPos.y - stageState.y + offset
        } else if (direction === 'left') {
          x = fromPos.x - stageState.x - offset
          y = groupForbiddenArea.y2
        } else if (direction === 'right') {
          x = fromPos.x - stageState.x + offset
          y = groupForbiddenArea.y1
        }
      }
    }

    return { x, y } as Konva.Vector2d
  }

原来的算法起点、终点与连接点一一对应，科室现在新的计算方法得出的出入口x、y坐标与连接点不再总是存在同一方向一致（因为被旋转），所以现在把算法的起点、终点改为出入口对应:

              // 出口、入口 -> 算法 起点、终点

              if (columns[x] === fromEntry.x && rows[y] === fromEntry.y) {
                matrix[y][x] = 1
                matrixStart = { x, y }
              }

              if (columns[x] === toEntry.x && rows[y] === toEntry.y) {
                matrix[y][x] = 1
                matrixEnd = { x, y }
              }

上面提到没有定义 direction 的连接点可以从不同方向出入，所以会进行下面处理:

              // 没有定义方向（给于十字可通过区域）
              // 如，从：
              // 1 1 1
              // 1 0 1
              // 1 1 1
              // 变成：
              // 1 0 1
              // 0 0 0
              // 1 0 1
              if (!fromAnchor.attrs.direction) {
                if (columns[x] === fromEntry.x || rows[y] === fromEntry.y) {
                  if (
                    x >= columnFromStart &&
                    x <= columnFromEnd &&
                    y >= rowFromStart &&
                    y <= rowFromEnd
                  ) {
                    matrix[y][x] = 1
                  }
                }
              }
              if (!toAnchor.attrs.direction) {
                if (columns[x] === toEntry.x || rows[y] === toEntry.y) {
                  if (x >= columnToStart && x <= columnToEnd && y >= rowToStart && y <= rowToEnd) {
                    matrix[y][x] = 1
                  }
                }
              }

最后在绘制连线的时候，补上连接点（起点、终点）即可:

            this.group.add(
              new Konva.Line({
                name: 'link-line',
                // 用于删除连接线
                groupId: fromGroup.id(),
                pointId: fromPoint.id,
                pairId: pair.id,
                //
                points: _.flatten([
                  [
                    this.render.toStageValue(fromAnchorPos.x),
                    this.render.toStageValue(fromAnchorPos.y)
                  ], // 补充 起点
                  ...way.map((o) => [
                    this.render.toStageValue(columns[o.x]),
                    this.render.toStageValue(rows[o.y])
                  ]),
                  [this.render.toStageValue(toAnchorPos.x), this.render.toStageValue(toAnchorPos.y)] // 补充 终点
                ]),
                stroke: 'red',
                strokeWidth: 2
              })
            )

测试一下。

已知缺陷

从 Issue 中得知，当节点进行说 transform rotate 旋转的时候，对齐就会出问题。大家多多支持，后面抽空研究处理一下(-_-)。。.

More Stars please！勾勾手指~ 。

源码。

gitee源码。

示例地址。

最后此篇关于前端使用Konva实现可视化设计器（15）-自定义连接点、连接优化的文章就讲到这里了,如果你想了解更多关于前端使用Konva实现可视化设计器（15）-自定义连接点、连接优化的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： FreeRTOS简单内核实现2双向链表

文章推荐： caddy服务器的Docker镜像构建流程

文章推荐：使用shell脚本在Linux中管理Java应用程序

r - 连接点
我有以下情节 require(ggplot2) dtf <- structure(list(Variance = c(5.213, 1.377, 0.858, 0.613, 0.412, 0.229,
java - 具有简单类型的 AspectJ 连接点
我可以捕获算术中定义的连接点吗？类似于: int a = 4; int b = 2; int c = a + b; 我可以创建一个切入点来捕获这些行中的任何一行吗？我可以获得什么背景信息？我想添加
java - 使用 javaFX 连接点
我编写了以下代码，用于使用鼠标事件添加和删除点或圆。下一步是在创建它们时用一条线将它们连接起来(创建一个多边形)。我完全卡住了，不知道从哪里开始。我正在寻找文档，但如果有人能指出正确的方向，我将不胜感
domain-driven-design - 用 DDD 连接点
我读过 Evans、Nilsson 和 McCarthy 等书，了解领域驱动设计背后的概念和推理；但是，我发现很难将所有这些放在一个真实世界的应用程序中。缺乏完整的例子让我摸不着头脑。我找到了很多框架
python - 在 Python 中创建 NTFS 连接点
有没有办法在 Python 中创建 NTFS 连接点？我知道我可以调用 junction 实用程序，但最好不要依赖外部工具。最佳答案自 Python 3.5 以来，_winapi 模块中有一个函数
java - JFileChooser 和 NTFS 连接点/符号链接(symbolic link)？
Swing (Java 1.6.0_u25) 中的 JFileChooser 似乎不知道如何处理 NTFS 连接点或符号链接(symbolic link)。文件选择器没有特殊处理: int rv =
c# - 检测符号链接(symbolic link)、连接点、挂载点和硬链接(hard link)
这个问题在这里已经有了答案: Check if a file is real or a symbolic link (9 个回答) 关闭 5 年前。有谁知道如何检查文件或目录是否是符号链接(sym

撒哈拉

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

前端使用Konva实现可视化设计器（15）-自定义连接点、连接优化

一些调整

自定义连接点

出入口修改

已知缺陷