基于vue2.0+svg 拓扑组件

2024年1月9日 329次阅读 来源: 鏡囝

序

2016年9月接到html5替换flash的拓扑图任务，历时3月整，使用jquery+SVG技术完成第一款拓扑图组件，涵盖拖拽、缩放、删除、选中区域、连线、导入、保存图片、多种布局显示等功能，但当node数高达百位时，因dom的操作，出现了非常可怕的性能问题。<br/>
2017年10月20日，因新公司项目需要，果断决定结合当下流行的VUE2.0框架 + SVG技术 重写拓扑组件，并将此开源，希望大家多提意见

技术选型

  • VUE2.0
  • SVG
  • Element

源码地址

https://github.com/Mirror1988…（开源）

demo演示地址

https://mirror198829.github.i…

功能分析及技术点

功能技术点
toolbar拖拽记录鼠标位置；<br/>拖拽物体的显示隐藏；
连接关系：创建连线绘制时：使用svg的 <line>，需正确获取起始和终止点；<br/> 结束绘制：使用<path>路径绘制连线形态，根据两者节点位置不同，共计4种连线形态展示；
包含关系：单层嵌套依据最终的位置判断是否为包含关系（这里的算法有待优化）;<br/>重新计算父节点宽高： 父结点宽高为子节点宽高+边距<br/>重新计算子节点的位置信息：父节点位置信息 – 边距
包含关系：多层嵌套通过递归的方式完成嵌套布局
包含关系：并列嵌套父节点宽高：内部子节点宽度之和 + 边距，父节点高度：最高子节点高度 + 边距；<br/> 每个子节点位置：当前节点位置 = 前一个节点位置 + 前一个节点宽度 + 间隔边距
删除：单结点删除节点同时删除关联连线（source&target
删除：包含关系删除包含关系同时恢复父节点的宽高同时刷新并列节点位置
删除：连线刷新原本有连线的连接点样式
删除：多节点使用for循环，注意i–
框选使用<reat>,根据鼠标移动位移的正负数，选择不同的x和y值
svg的viewbox的移动功能记录鼠标移动的位移，修改viewbox的视图位置

Usage

npm install
npm run dev

说明

代码开源，欢迎码农们提出宝贵意见，bug请提issues，本人将及时修改。最后著作权归一步工程师，请大家注明代码来源：https://github.com/Mirror1988…

说明
1.拓扑组件持续更新
2.欢迎大家提issues
3.觉得不错的请给个star
4.转载使用请注明出自：https://github.com/Mirror1988…

    原文作者：鏡囝
    原文地址: https://segmentfault.com/a/1190000012192839
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞