摘要：身为菜鸟的我还是很吃力的这句纯属废话前言系统代码比较凌乱，没有结果优化特别前端部分代码比较乱，其中不免包含一些极端的处理方法，请读者提取对自己有用的东西。问题四次贝塞尔曲线在每个节点中上下都会有个或多个输入输出端点，注意数据源没有输入端点。
项目演示地址：http://vidanao.com/ml
》注意1:前端兼容性不太好，360浏览器比较兼容;
》注意2:此vidanao.com也是我的个人博文主页，但目前还没部署源码地址：https://github.com/Liwengbin/mml
开发背景：
大四上的一次实践，那时一些原因我了解到这个项目的需求，开始接触到了Vue以及SpringBoot,并花时间开始开发这个项目的需求。（身为菜鸟的我还是很吃力的！···这句纯属废话）
前言：
系统代码比较凌乱，没有结果优化,特别前端SVG部分代码比较乱，其中不免包含一些极端的处理方法，请读者提取对自己有用的东西。例如一下5问。请各位大神多多指点！
简介：
该项目只开放到一半就结束了，系统分为简单的两部分：
Vue 的前端 + SpringBoot&Mysql的后端
后端：的话没什么东西，也就是些数据的增删改查，所以不做多说，看源码。
说说前端：
提出几个问题
问题1：svg 中包含html标签问题？
问题2：将HTML标签拖着到Svg画图面板中，并实时渲染的问题？
问题3：俩个（node）节点间连线问题？
问题4：拖拽（node）节点连接线跟随变动的问题？
问题5：（node）节点鼠标右击菜单问题？
问题1：https://developer.mozilla.org...
这里我使用的是标签
问题2：（拖拽使用的是）https://developer.mozilla.org...
拖拽复制SVG面板外的HTML标签到SVG面板中：思想并没有正真的HTML拖拽， (1)只是通过鼠标按下左键 - ->将html中的数据保存在拖拽方法提供的变量中 (2)并拖动 (3)到SVG面板中获取鼠标最后一次抬起的位置,组装nodes数据（这里就自动提交数据到后台），因为数据是双向绑定的所以会自动渲染到SVG面板中。
问题3：
四次贝塞尔曲线：https://www.zhangxinxu.com/wo...
在每个节点中上下都会有0个或多个输入输出端点，注意：数据源没有输入端点。 每个端点都有自己的id,鼠标点击并移动会通过ID找到起始点的位置，并使用path的 四次贝塞尔曲线 画线 （这里依然是通过数据的双向绑定来达到画线的）
问题4：如果问题3没问题，问题4就解决了
拖拽某个"node"节点，通过数据源找到与其关联的输入输出端点并对相关的端点间的连接线进行计算,在通过数据自动画出变化
问题5：这个不说了，网上一搜就有！如下演示
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98321.html
摘要：身为菜鸟的我还是很吃力的这句纯属废话前言系统代码比较凌乱，没有结果优化特别前端部分代码比较乱，其中不免包含一些极端的处理方法，请读者提取对自己有用的东西。问题四次贝塞尔曲线在每个节点中上下都会有个或多个输入输出端点，注意数据源没有输入端点。 项目演示地址：http://vidanao.com/ml》注意1:前端兼容性不太好，360浏览器比较兼容; 》注意2:此vidanao.com也是...
摘要：巅峰人生年老兵思路上的转变，远比单纯提升技术更有价值本文节选自赵成教授在极客时间开设的赵成的运维体系管理课，是其对自己十年技术生涯的回顾与总结。赵成教授来自美丽联合集团，集团旗下两大主力产品是蘑菇街和美丽说，目前负责管理集团的技术服务团队。 showImg(https://segmentfault.com/img/remote/1460000012476504?w=1240&h=826...
阅读 2998·2021-11-18 10:07
阅读 3740·2021-11-17 17:00
阅读 2066·2021-11-15 18:01
阅读 909·2021-10-11 10:58
阅读 3308·2021-09-10 10:50
阅读 3394·2021-08-13 15:05
阅读 1209·2019-08-30 15:53
阅读 2618·2019-08-29 13:01
