前端使用 Konva 实现可视化设计器(10)- 对齐线

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

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

github源码

gitee源码

示例地址

不知不觉来到第 10 章了,感觉接近尾声了。。。

对齐线

先看效果:
在这里插入图片描述
这里交互有两个部分:
1、节点之间的对齐线
2、对齐磁贴

多选的情况下,效果是一样的:
在这里插入图片描述
主要逻辑会放在控制“选择”的代码文件里:
src\Render\handlers\SelectionHandlers.ts
这里需要一些辅助都定义:

interface SortItem {
   
  id?: number // 有 id 就是其他节点,否则就是 选择目标
  value: number // 左、垂直中、右的 x 坐标值; 上、水平中、下的 y 坐标值;
}

type SortItemPair = [SortItem, SortItem]

尝试画个图说明一下上面的含义:

这里以纵向(基于 x 坐标值)为例:

在这里插入图片描述
这里的 x1~x9,就是 SortItem,横向(基于 y 坐标值)同理,特别地,如果是正在拖动的目标节点,会把该节点的 _id 记录在 SortItem 以示区分。

会存在一个处理,把一个方向上的所有 x 坐标进行从小到大的排序,然后一双一双的遍历,需要符合以下条件“必须分别属于相邻的两个节点”的 SortItem 对,也就是 SortItemPair。

在查找所有 SortItemPair 的同时,只会更新并记录节点距离最短的那些 SortItemPair(可能会存在多个)。

核心逻辑代码:

  // 磁吸逻辑
  attract = (newPos: Konva.Vector2d) => {
   
    // 对齐线清除
    this.alignLinesClear()

    // stage 状态
    const stageState = this.render.getStageState()

    const width = this.render.transformer.width()
    const height = this.render.transformer.height()

    let newPosX = newPos.x
    let newPosY = newPos.y

    let isAttract = false

    let pairX: SortItemPair | null = null
    let pairY: SortItemPair | null = null

    // 对齐线 磁吸逻辑
    if (this.render.config.attractNode) {
   
      // 横向所有需要判断对齐的 x 坐标
      const sortX: Array<SortItem> = []
      // 纵向向所有需要判断对齐的 y 坐标
      const sortY: Array<SortItem> = []

      // 选择目标所有的对齐 x
      sortX.push(
        {
   
          value: this.render.toStageValue(newPos.x - stageState.x) // 左
        },
        {
   
          value: this.render.toStageValue(newPos.x - stageState.x + width / 2) // 垂直中
        },
        {
   
          value: this.render.toStageValue(newPos.x - stageState.x + width) // 右
        }
      )

      // 选择目标所有的对齐 y
      sortY.push(
        {
   
          value: this.render.toStageValue(newPos.y - stageState.y) // 上
        },
        {
   
          value: this.render.toStageValue(newPos.y - stageState.y + height / 2) // 水平中
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值