首页 > 其他分享 >前端使用 Konva 实现可视化设计器(5)

前端使用 Konva 实现可视化设计器(5)

时间:2024-04-16 22:22:05浏览次数:21  
标签:const render Konva stageState 可视化 磁贴 前端 Math 坐标

关于第三章提到的 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.y) // y坐标
          const logicNumY = Math.round(logicY / this.render.bgSize) // y单元格个数
          const logicClosestY = logicNumY * this.render.bgSize // y磁贴目标坐标
          const logicDiffY = Math.abs(logicY - logicClosestY) // y磁贴偏移量
          const snappedY = /^(top|bottom)-/.test(anchor) && logicDiffY < 5 // y磁贴阈值

          if (snappedX && !snappedY) {
            // x磁贴
            return {
              x: this.render.toBoardValue(logicClosestX) + stageState.x,
              y: oldPos.y
            }
          } else if (snappedY && !snappedX) {
            // y磁贴
            return {
              x: oldPos.x,
              y: this.render.toBoardValue(logicClosestY) + stageState.y
            }
          } else if (snappedX && snappedY) {
            // xy磁贴
            return {
              x: this.render.toBoardValue(logicClosestX) + stageState.x,
              y: this.render.toBoardValue(logicClosestY) + stageState.y
            }
          }
        }
      }

      // 不磁贴
      return newPos
    }

主要的逻辑:根据最新的坐标,找到最接近的网格,达到设计的阈值就按官方 api 的定义,返回修正过的坐标(视觉上),所以返回之前,把计算好的“逻辑坐标”用 toBoardValue 恢复成“视觉坐标”。

移动磁贴网格效果

在这里插入图片描述
在这里插入图片描述

这个功能实现起来比较麻烦,官方是没有像类似 anchorDragBoundFunc 这样的 api,需要在 transformer 的 dragmove 介入修改。官方有个对齐线示例,也是“磁贴”相关的,证明在 transformer 的 dragmove 入手是合理的。主要差异是,示例是针对单个节点控制的,本设计是要控制在 transformer 中的多个节点的。

主要流程:

  • 通过 transformer 的 dragmove 获得拖动期间的坐标
  • 计算离四周网格的距离和偏移量
  • 横向、纵向分别找到达到接近阈值,且距离最近的那个网格坐标(偏移量最小)
  • 把选中的所有节点进行坐标修正

核心逻辑:

  // 磁吸逻辑
  attract = (newPos: Konva.Vector2d) => {
    // 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

    if (this.render.config.attractBg) {
      const logicLeftX = this.render.toStageValue(newPos.x - stageState.x) // x坐标
      const logicNumLeftX = Math.round(logicLeftX / this.render.bgSize) // x单元格个数
      const logicClosestLeftX = logicNumLeftX * this.render.bgSize // x磁贴目标坐标
      const logicDiffLeftX = Math.abs(logicLeftX - logicClosestLeftX) // x磁贴偏移量

      const logicRightX = this.render.toStageValue(newPos.x + width - stageState.x) // x坐标
      const logicNumRightX = Math.round(logicRightX / this.render.bgSize) // x单元格个数
      const logicClosestRightX = logicNumRightX * this.render.bgSize // x磁贴目标坐标
      const logicDiffRightX = Math.abs(logicRightX - logicClosestRightX) // x磁贴偏移量

      const logicTopY = this.render.toStageValue(newPos.y - stageState.y) // y坐标
      const logicNumTopY = Math.round(logicTopY / this.render.bgSize) // y单元格个数
      const logicClosestTopY = logicNumTopY * this.render.bgSize // y磁贴目标坐标
      const logicDiffTopY = Math.abs(logicTopY - logicClosestTopY) // y磁贴偏移量

      const logicBottomY = this.render.toStageValue(newPos.y + height - stageState.y) // y坐标
      const logicNumBottomY = Math.round(logicBottomY / this.render.bgSize) // y单元格个数
      const logicClosestBottomY = logicNumBottomY * this.render.bgSize // y磁贴目标坐标
      const logicDiffBottomY = Math.abs(logicBottomY - logicClosestBottomY) // y磁贴偏移量

      // 距离近优先

      for (const diff of [
        { type: 'leftX', value: logicDiffLeftX },
        { type: 'rightX', value: logicDiffRightX }
      ].sort((a, b) => a.value - b.value)) {
        if (diff.value < 5) {
          if (diff.type === 'leftX') {
            newPosX = this.render.toBoardValue(logicClosestLeftX) + stageState.x
          } else if (diff.type === 'rightX') {
            newPosX = this.render.toBoardValue(logicClosestRightX) + stageState.x - width
          }
          isAttract = true
          break
        }
      }

      for (const diff of [
        { type: 'topY', value: logicDiffTopY },
        { type: 'bottomY', value: logicDiffBottomY }
      ].sort((a, b) => a.value - b.value)) {
        if (diff.value < 5) {
          if (diff.type === 'topY') {
            newPosY = this.render.toBoardValue(logicClosestTopY) + stageState.y
          } else if (diff.type === 'bottomY') {
            newPosY = this.render.toBoardValue(logicClosestBottomY) + stageState.y - height
          }
          isAttract = true
          break
        }
      }
    }

    return {
      pos: {
        x: newPosX,
        y: newPosY
      },
      isAttract
    }
  }

这段逻辑及其相关事件的改动,不下 5 次,才勉强达到预期的效果。

接下来,计划实现下面这些功能:

  • 实时预览窗
  • 导出、导入
  • 节点层次单个、批量调整
  • 键盘复制、粘贴
  • 对齐效果
  • 等等。。。

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

源码

gitee源码

示例地址

标签:const,render,Konva,stageState,可视化,磁贴,前端,Math,坐标
From: https://www.cnblogs.com/xachary/p/18139413

相关文章

  • 前端学习-vue视频学习016-vue3新组件
    尚硅谷视频教程Teleport:让部分元素脱离原来的位置,到to指定的位置去此处指定了弹窗到body标签内<template><h4>Model</h4><button@click="isShow=true">打开弹窗</button><Teleportto='body'><divclass="tanchuang&q......
  • 自建一款现代化的K8s可视化管理系统
    自建一款现代化的K8s可视化管理系统原创 院长技术 院长技术 2024-03-0107:30 北京 3人听过院长简介作者:院长职位:运维开发工程师官网:https://deanit.cn博客:https://blog.deanit.cn擅长:【虚拟化,容器化,自动化运维,CICD,监控,日志,中间件,双机热备,分布式存储,数据库,认......
  • 使用t-SNE可视化CIFAR-10的表征
    t-SNE理论相关理论可参见t-SNE算法。本文通过PyTorch提供的预训练Resnet50提取CIFAR-10表征,并使用t-SNE进行可视化。加载预训练Resnet50importtorchfromtorchvision.modelsimportresnet50,ResNet50_Weights#加载ResNet模型resnet=resnet50(weights=ResNet50_Weight......
  • 揭秘小型燃气站新宠:3D可视化技术引领行业变革
    随着科技的不断进步,越来越多的行业开始融入3D可视化技术,燃气行业也不例外。 小型燃气站作为城市燃气供应的重要节点,其安全性和运行效率至关重要。传统的燃气站管理方式往往依赖于人工巡检和纸质记录,这种方式不仅效率低下,而且难以发现潜在的安全隐患。 3D可视化技术的引入,为......
  • 前端大文件分片上传
    1.分片上传整体流程开始上传:前端启动文件分片上传。后端返回唯一标识。分片上传:获取到上传的文件,然后设置一个固定的分片大小,将文件切成多个小片,计算出每一个分片的MD5值(32位)。将每个分片的内容和MD5标识符一同上传至服务器。服务端接收每个分片及相关信息后,通过对每个分片进行校......
  • 前端学哪些技能饭碗越铁收入还高
    随着经济的下行以及移动互联网发展趋于成熟,对软件开发人员的需求大大减少,互联网行业所有的公司都在降本增效,合并通道,降薪裁员的新闻层出不穷。但相比其他行业,互联网行业的从业者薪资还是比较可观的,但要求也比之前高了很多,需要大家掌握更多的技能和在某些技术领域深耕。本文,我们......
  • Python- pyecharts 制作示例可视化图表
    1、开发可视化图表使用的技术栈:Echarts框架的Python包——pyecharts2、官方网站:pyecharts-APythonEchartsPlottingLibrarybuiltwithlove.3、官方画廊:中文简介-Document(pyecharts.org)安装pyecharts包:pipinstallpyecharts一、构建各类图表所创建的对象......
  • React前端技术深度解析与实践
    React作为当今最热门的前端技术之一,以其组件化、高效性和灵活性等特点赢得了广大开发者的青睐。本文将深入探讨React前端技术的核心原理、实践技巧以及未来的发展趋势,帮助读者更好地理解和应用React。一、React的核心原理React的核心原理是组件化开发。组件是React应用的基本构......
  • 微前端--通俗易懂
    是什么微前端是指存在于浏览器中的微服务。微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具,而是一套架......
  • 前端开发框架的选择-Vue.js
    Vue.js秉持简约哲学,通过精炼的代码实现功能——它专注于为Web应用开发提供核心工具,而非让冗余特性成为负担。这种简约设计思路使得代码更加明晰,易于阅读和维护。长远看来,Vue.js的简约特性使得项目运作更为流畅。无论是小型网站还是大型单页应用,Vue.js都能轻松应对——它并非万金......