前端使用 Konva 实现可视化设计器（5）- 磁贴效果

@xachary

已于 2024-05-11 22:42:00 修改

阅读量561

点赞数 6

分类专栏：前端使用 Konva 实现可视化设计器文章标签：前端 canva可画 typescript

于 2024-04-16 22:16:21 首次发布

本文链接：https://blog.youkuaiyun.com/xachary2/article/details/137841512

版权

关于第三章提到的 selectingNodesArea，在后续的实现中已经精简掉了。

而 transformer 的 dragBoundFunc 中的逻辑，也直接移动 transformer 的 dragmove 事件中处理。

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

这一章花了比较多的时间调试，创作不易~

github源码

gitee源码

示例地址

磁贴效果

放大缩小点磁贴网格效果

在这里插入图片描述

官方提供的便捷的 api 可以实现该效果，就是 transformer 的 anchorDragBoundFunc，官方实例，在此基础上，根据当前设计进行实现。

    // 变换中
    anchorDragBoundFunc: (oldPos: Konva.Vector2d, newPos: Konva.Vector2d) => {
   
      // 磁贴逻辑

      if (this.render.config.attractResize) {
   
        // transformer 锚点按钮
        const anchor = this.render.transformer.getActiveAnchor()

        // 非旋转（就是放大缩小时）
        if (anchor && anchor !== 'rotater') {
   
          // stage 状态
          const stageState = this.render.getStageState()

          const logicX = this.render.toStageValue(newPos.x - stageState.x) // x坐标
          const logicNumX = Math.round(logicX / this.render.bgSize) // x单元格个数
          const logicClosestX = logicNumX * this.render.bgSize // x磁贴目标坐标
          const logicDiffX = Math.abs(logicX - logicClosestX) // x磁贴偏移量
          const snappedX = /-(left|right)$/.test(anchor) && logicDiffX < 5 // x磁贴阈值

          const logicY = this.render.toStageValue(newPos.y - stageState

最低0.47元/天解锁文章