前端使用 Konva 实现可视化设计器（6）

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

这一章处理一下复制、粘贴、删除、画布归位、层次调整，通过右键菜单控制。

github源码

gitee源码

示例地址

复制粘贴

复制粘贴（通过快捷键）

  // 复制暂存
  pasteCache: Konva.Node[] = [];
  // 粘贴次数（用于定义新节点的偏移距离）
  pasteCount = 1;

  // 复制
  pasteStart() {
    this.pasteCache = this.render.selectionTool.selectingNodes.map((o) => {
      const copy = o.clone();
      // 恢复透明度、可交互
      copy.setAttrs({
        listening: true,
        opacity: copy.attrs.lastOpacity ?? 1,
      });
      // 清空状态
      copy.setAttrs({
        nodeMousedownPos: undefined,
        lastOpacity: undefined,
        lastZIndex: undefined,
        selectingZIndex: undefined,
      });
      return copy;
    });
    this.pasteCount = 1;
  }

  // 粘贴
  pasteEnd() {
    if (this.pasteCache.length > 0) {
      this.render.selectionTool.selectingClear();
      this.copy(this.pasteCache);
      this.pasteCount++;
    }
  }

快捷键处理：

    keydown: (e: GlobalEventHandlersEventMap['keydown']) => {
        if (e.ctrlKey) {
          if (e.code === Types.ShutcutKey.C) {
            this.render.copyTool.pasteStart() // 复制
          } else if (e.code === Types.ShutcutKey.V) {
            this.render.copyTool.pasteEnd() // 粘贴
          }
        }
      }
    }

逻辑比较简单，可以关注代码中的注释。

复制粘贴（右键）

  /**
   * 复制粘贴
   * @param nodes 节点数组
   * @param skip 跳过检查
   * @returns 复制的元素
   */
  copy(nodes: Konva.Node[]) {
    const arr: Konva.Node[] = [];

    for (const node of nodes) {
      if (node instanceof Konva.Transformer) {
        // 复制已选择
        const backup = [...this.render.selectionTool.selectingNodes];
        this.render.selectionTool.selectingClear();
        this.copy(backup);
      } else {
        // 复制未选择
        const copy = node.clone();
        // 使新节点产生偏移
        copy.setAttrs({
          x: copy.x() + this.render.toStageValue(this.render.bgSize) * this.pasteCount,
          y: copy.y() + this.render.toStageValue(this.render.bgSize) * this.pasteCount,
        });
        // 插入新节点
        this.render.layer.add(copy);
        // 选中复制内容
        this.render.selectionTool.select([...this.render.selectionTool.selectingNodes, copy]);
      }
    }

    return arr;
  }

逻辑比较简单，可以关注代码中的注释。

删除

处理方法：

  // 移除元素
  remove(nodes: Konva.Node[]) {
    for (const node of nodes) {
      if (node instanceof Konva.Transformer) {
        // 移除已选择的节点
        this.remove(this.selectionTool.selectingNodes);
        // 清除选择
        this.selectionTool.selectingClear();
      } else {
        // 移除未选择的节点
        node.remove();
      }
    }
  }

事件处理：

      keydown: (e: GlobalEventHandlersEventMap['keydown']) => {
        if (e.ctrlKey) {
          // 略
        } else if (e.code === Types.ShutcutKey.删除) {
          this.render.remove(this.render.selectionTool.selectingNodes)
        }
      }

画布归位

逻辑比较简单，恢复画布比例和偏移量：

  // 恢复位置大小
  positionZoomReset() {
    this.render.stage.setAttrs({
      scale: { x: 1, y: 1 }
    })

    this.positionReset()
  }

  // 恢复位置
  positionReset() {
    this.render.stage.setAttrs({
      x: this.render.rulerSize,
      y: this.render.rulerSize
    })

    // 更新背景
    this.render.draws[Draws.BgDraw.name].draw()
    // 更新比例尺
    this.render.draws[Draws.RulerDraw.name].draw()
    // 更新参考线
    this.render.draws[Draws.RefLineDraw.name].draw()
  }

稍微说明一下，初始位置需要考虑比例尺的大小。

层次调整

关于层次的调整，相对比较晦涩。

一些辅助方法

获取需要处理的节点，主要是处理 transformer 内部的节点：

  // 获取移动节点
  getNodes(nodes: Konva.Node[]) {
    const targets: Konva.Node[] = []
    for (const node of nodes) {
      if (node instanceof Konva.Transformer) {
        // 已选择的节点
        targets.push(...this.render.selectionTool.selectingNodes)
      } else {
        // 未选择的节点
        targets.push(node)
      }
    }
    return targets
  }

获得计算所需的最大、最小 zIndex:

  // 最大 zIndex
  getMaxZIndex() {
    return Math.max(
      ...this.render.layer
        .getChildren((node) => {
          return !this.render.ignore(node)
        })
        .map((o) => o.zIndex())
    )
  }

  // 最小 zIndex
  getMinZIndex() {
    return Math.min(
      ...this.render.layer
        .getChildren((node) => {
          return !this.render.ignore(node)
        })
        .map((o) => o.zIndex())
    )
  }

记录选择之前的 zIndex

由于被选择的节点会被临时置顶，会影响节点层次的调整，所以选择之前需要记录一下选择之前的 zIndex：

  // 更新 zIndex 缓存
  updateLastZindex(nodes: Konva.Node[]) {
    for (const node of nodes) {
      node.setAttrs({
        lastZIndex: node.zIndex()
      })
    }
  }

处理 transformer 的置顶影响

通过 transformer 选择的时候，所选节点的层次已经被置顶。

所以调整时需要有个步骤：

• 记录已经被 transformer 影响的每个节点的 zIndex（其实就是记录置顶状态）
• 调整节点的层次
• 恢复被 transformer 选择的节点的 zIndex（其实就是恢复置顶状态）

举例子：

现在有节点：

A/1 B/2 C/3 D/4 E/5 F/6 G/7

记录选择 C D E 之前的 lastZIndex：C/3 D/4 E/5

选择后，"临时置顶" C D E：

A/1 B/2 F/3 G/4 C/5 D/6 E/7

此时置底了 C D E，由于上面记录了选择之前的 lastZIndex，直接计算 lastZIndex，变成 C/1 D/2 E/3

在 selectingClear 的时候，会根据 lastZIndex 让 zIndex 的调整生效：

逐步变化：

0、A/1 B/2 F/3 G/4 C/5 D/6 E/7 改变 C/5 -> C/1

1、C/1 A/2 B/3 F/4 G/5 D/6 E/7 改变 D/6 -> D/2

2、C/1 D/2 A/3 B/4 F/5 G/6 E/7 改变 E/7 -> E/3

3、C/1 D/2 E/3 A/4 B/5 F/6 G/7 完成调整

因为 transformer 的存在，调整完还要恢复原来的"临时置顶"：

A/1 B/2 F/3 G/4 C/5 D/6 E/7

下面是记录选择之前的 zIndex 状态、恢复调整之后的 zIndex 状态的方法：

  // 记录选择期间的 zIndex
  updateSelectingZIndex(nodes: Konva.Node[]) {
    for (const node of nodes) {
      node.setAttrs({
        selectingZIndex: node.zIndex()
      })
    }
  }

  // 恢复选择期间的 zIndex
  resetSelectingZIndex(nodes: Konva.Node[]) {
    nodes.sort((a, b) => a.zIndex() - b.zIndex())
    for (const node of nodes) {
      node.zIndex(node.attrs.selectingZIndex)
    }
  }

关于 zIndex 的调整

主要分两种情况：已选的节点、未选的节点

• 已选：如上面所说，调整之余，还要处理 transformer 的置顶影响
• 未选：直接调整即可

  // 上移
  up(nodes: Konva.Node[]) {
    // 最大zIndex
    const maxZIndex = this.getMaxZIndex()

    const sorted = this.getNodes(nodes).sort((a, b) => b.zIndex() - a.zIndex())

    // 上移
    let lastNode: Konva.Node | null = null

    if (this.render.selectionTool.selectingNodes.length > 0) {
      this.updateSelectingZIndex(sorted)

      for (const node of sorted) {
        if (
          node.attrs.lastZIndex < maxZIndex &&
          (lastNode === null || node.attrs.lastZIndex < lastNode.attrs.lastZIndex - 1)
        ) {
          node.setAttrs({
            lastZIndex: node.attrs.lastZIndex + 1
          })
        }
        lastNode = node
      }

      this.resetSelectingZIndex(sorted)
    } else {
      // 直接调整
      for (const node of sorted) {
        if (
          node.zIndex() < maxZIndex &&
          (lastNode === null || node.zIndex() < lastNode.zIndex() - 1)
        ) {
          node.zIndex(node.zIndex() + 1)
        }
        lastNode = node
      }

      this.updateLastZindex(sorted)
    }
  }

直接举例子（忽略 transformer 的置顶影响）：

现在有节点：

A/1 B/2 C/3 D/4 E/5 F/6 G/7，上移 D F

执行一次：

移动F，A/1 B/2 C/3 D/4 E/5 G/6 F/7

移动D，A/1 B/2 C/3 E/4 D/5 G/6 F/7

再执行一次：

移动F，已经到头了，不变，A/1 B/2 C/3 E/4 D/5 G/6 F/7

移动D，A/1 B/2 C/3 E/4 G/5 D/6 F/7

再执行一次：

移动F，已经到尾了，不变，A/1 B/2 C/3 E/4 G/5 D/6 F/7

移动D，已经贴着 F 了，为了保持 D F 的相对顺序，也不变，A/1 B/2 C/3 E/4 G/5 D/6 F/7

结束

  // 下移
  down(nodes: Konva.Node[]) {
    // 最小 zIndex
    const minZIndex = this.getMinZIndex()

    const sorted = this.getNodes(nodes).sort((a, b) => a.zIndex() - b.zIndex())

    // 下移
    let lastNode: Konva.Node | null = null

    if (this.render.selectionTool.selectingNodes.length > 0) {
      this.updateSelectingZIndex(sorted)

      for (const node of sorted) {
        if (
          node.attrs.lastZIndex > minZIndex &&
          (lastNode === null || node.attrs.lastZIndex > lastNode.attrs.lastZIndex + 1)
        ) {
          node.setAttrs({
            lastZIndex: node.attrs.lastZIndex - 1
          })
        }
        lastNode = node
      }

      this.resetSelectingZIndex(sorted)
    } else {
      // 直接调整
      for (const node of sorted) {
        if (
          node.zIndex() > minZIndex &&
          (lastNode === null || node.zIndex() > lastNode.zIndex() + 1)
        ) {
          node.zIndex(node.zIndex() - 1)
        }
        lastNode = node
      }

      this.updateLastZindex(sorted)
    }
  }

直接举例子（忽略 transformer 的置顶影响）：

现在有节点：

A/1 B/2 C/3 D/4 E/5 F/6 G/7，下移 B D

执行一次：

移动B，B/1 A/2 C/3 D/4 E/5 F/6 G/7

移动D，B/1 A/2 D/3 C/4 E/5 F/6 G/7

再执行一次：

移动B，已经到头了，不变，B/1 A/2 D/3 C/4 E/5 F/6 G/7

移动D，B/1 D/2 A/3 C/4 E/5 F/6 G/7

再执行一次：

移动B，已经到头了，不变，B/1 D/2 A/3 C/4 E/5 F/6 G/7

移动D，已经贴着 B 了，为了保持 B D 的相对顺序，也不变，B/1 D/2 A/3 C/4 E/5 F/6 G/7

结束

  // 置顶
  top(nodes: Konva.Node[]) {
    // 最大 zIndex
    let maxZIndex = this.getMaxZIndex()

    const sorted = this.getNodes(nodes).sort((a, b) => b.zIndex() - a.zIndex())

    if (this.render.selectionTool.selectingNodes.length > 0) {
      // 先选中再调整
      this.updateSelectingZIndex(sorted)

      // 置顶
      for (const node of sorted) {
        node.setAttrs({
          lastZIndex: maxZIndex--
        })
      }

      this.resetSelectingZIndex(sorted)
    } else {
      // 直接调整

      for (const node of sorted) {
        node.zIndex(maxZIndex)
      }

      this.updateLastZindex(sorted)
    }
  }

从高到低，逐个移动，每次移动递减 1

  // 置底
  bottom(nodes: Konva.Node[]) {
    // 最小 zIndex
    let minZIndex = this.getMinZIndex()

    const sorted = this.getNodes(nodes).sort((a, b) => a.zIndex() - b.zIndex())

    if (this.render.selectionTool.selectingNodes.length > 0) {
      // 先选中再调整
      this.updateSelectingZIndex(sorted)

      // 置底
      for (const node of sorted) {
        node.setAttrs({
          lastZIndex: minZIndex++
        })
      }

      this.resetSelectingZIndex(sorted)
    } else {
      // 直接调整

      for (const node of sorted) {
        node.zIndex(minZIndex)
      }

      this.updateLastZindex(sorted)
    }
  }

从低到高，逐个移动，每次移动递增 1

调整 zIndex 的思路比较个性化，所以晦涩。要符合 konva 的 zIndex 特定，且达到目的，算法可以自行调整。

右键菜单

事件处理

      mousedown: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['mousedown']>) => {
        this.state.lastPos = this.render.stage.getPointerPosition()

        if (e.evt.button === Types.MouseButton.左键) {
          if (!this.state.menuIsMousedown) {
            // 没有按下菜单，清除菜单
            this.state.target = null
            this.draw()
          }
        } else if (e.evt.button === Types.MouseButton.右键) {
          // 右键按下
          this.state.right = true
        }
      },
      mousemove: () => {
        if (this.state.target && this.state.right) {
          // 拖动画布时（右键），清除菜单
          this.state.target = null
          this.draw()
        }
      },
      mouseup: () => {
        this.state.right = false
      },
      contextmenu: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['contextmenu']>) => {
        const pos = this.render.stage.getPointerPosition()
        if (pos && this.state.lastPos) {
          // 右键目标
          if (pos.x === this.state.lastPos.x || pos.y === this.state.lastPos.y) {
            this.state.target = e.target
          } else {
            this.state.target = null
          }
          this.draw()
        }
      },
      wheel: () => {
        // 画布缩放时，清除菜单
        this.state.target = null
        this.draw()
      }

逻辑说明都在注释里了，主要处理的是右键菜单出现的位置，以及出现和消失的时机，最后是右键的目标。

  override draw() {
    this.clear()

    if (this.state.target) {
      // 菜单数组
      const menus: Array<{
        name: string
        action: (e: Konva.KonvaEventObject<MouseEvent>) => void
      }> = []

      if (this.state.target === this.render.stage) {
        // 空白处
        menus.push({
          name: '恢复位置',
          action: () => {
            this.render.positionTool.positionReset()
          }
        })
        menus.push({
          name: '恢复大小位置',
          action: () => {
            this.render.positionTool.positionZoomReset()
          }
        })
      } else {
        // 未选择：真实节点，即素材的容器 group 
        // 已选择：transformer
        const target = this.state.target.parent

        // 目标
        menus.push({
          name: '复制',
          action: () => {
            if (target) {
              this.render.copyTool.copy([target])
            }
          }
        })
        menus.push({
          name: '删除',
          action: () => {
            if (target) {
              this.render.remove([target])
            }
          }
        })
        menus.push({
          name: '置顶',
          action: () => {
            if (target) {
              this.render.zIndexTool.top([target])
            }
          }
        })
        menus.push({
          name: '上一层',
          action: () => {
            if (target) {
              this.render.zIndexTool.up([target])
            }
          }
        })
        menus.push({
          name: '下一层',
          action: () => {
            if (target) {
              this.render.zIndexTool.down([target])
            }
          }
        })
        menus.push({
          name: '置底',
          action: () => {
            if (target) {
              this.render.zIndexTool.bottom([target])
            }
          }
        })
      }

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

      // 绘制右键菜单
      const group = new Konva.Group({
        name: 'contextmenu',
        width: stageState.width,
        height: stageState.height
      })

      let top = 0
      // 菜单每项高度
      const lineHeight = 30

      const pos = this.render.stage.getPointerPosition()
      if (pos) {
        for (const menu of menus) {
          // 框
          const rect = new Konva.Rect({
            x: this.render.toStageValue(pos.x - stageState.x),
            y: this.render.toStageValue(pos.y + top - stageState.y),
            width: this.render.toStageValue(100),
            height: this.render.toStageValue(lineHeight),
            fill: '#fff',
            stroke: '#999',
            strokeWidth: this.render.toStageValue(1),
            name: 'contextmenu'
          })
          // 标题
          const text = new Konva.Text({
            x: this.render.toStageValue(pos.x - stageState.x),
            y: this.render.toStageValue(pos.y + top - stageState.y),
            text: menu.name,
            name: 'contextmenu',
            listening: false,
            fontSize: this.render.toStageValue(16),
            fill: '#333',
            width: this.render.toStageValue(100),
            height: this.render.toStageValue(lineHeight),
            align: 'center',
            verticalAlign: 'middle'
          })
          group.add(rect)
          group.add(text)

          // 菜单事件
          rect.on('click', (e) => {
            if (e.evt.button === Types.MouseButton.左键) {
              // 触发事件
              menu.action(e)

              // 移除菜单
              this.group.removeChildren()
              this.state.target = null
            }

            e.evt.preventDefault()
            e.evt.stopPropagation()
          })
          rect.on('mousedown', (e) => {
            if (e.evt.button === Types.MouseButton.左键) {
              this.state.menuIsMousedown = true
              // 按下效果
              rect.fill('#dfdfdf')
            }

            e.evt.preventDefault()
            e.evt.stopPropagation()
          })
          rect.on('mouseup', (e) => {
            if (e.evt.button === Types.MouseButton.左键) {
              this.state.menuIsMousedown = false
            }
          })
          rect.on('mouseenter', (e) => {
            if (this.state.menuIsMousedown) {
              rect.fill('#dfdfdf')
            } else {
              // hover in
              rect.fill('#efefef')
            }

            e.evt.preventDefault()
            e.evt.stopPropagation()
          })
          rect.on('mouseout', () => {
            // hover out
            rect.fill('#fff')
          })
          rect.on('contextmenu', (e) => {
            e.evt.preventDefault()
            e.evt.stopPropagation()
          })

          top += lineHeight - 1
        }
      }

      this.group.add(group)
    }
  }

逻辑也不复杂，根据右键的目标分配相应的菜单项

空白处：恢复位置、大小

节点：复制、删除、上移、下移、置顶、置底

绘制右键菜单

右键的目标有二种情况：空白处、单个/多选节点。

接下来，计划实现下面这些功能：

• 实时预览窗
• 导出、导入
• 对齐效果
• 等等。。。

是不是值得更多的 Star 呢？勾勾手指~

源码

gitee源码

示例地址