项目演示地址: http://vidanao.com/ml
》注意1:前端兼容性不太好,360浏览器比较兼容;
》注意2:此vidanao.com也是个人我的博文主页,但目前还没部署源码地址:https://github.com/Liwengbin/mmlhtml
开发背景:
大四上的一次实践,那时一些缘由我了解到这个项目的需求,开始接触到了Vue以及SpringBoot,并花时间开始开发这个项目的需求。(身为菜鸟的我仍是很吃力的!···这句纯属废话)前端
前言:
系统代码比较凌乱,没有结果优化,特别前端SVG部分代码比较乱,其中难免包含一些极端的处理方法,请读者提取对本身有用的东西。例如一下5问。请各位大神多多指点!node
简介:
该项目只开放到一半就结束了,系统分为简单的两部分:
Vue 的前端 + SpringBoot&Mysql的后端git
后端:的话没什么东西,也就是些数据的增删改查,因此不作多说,看源码。github
说说前端:sql
提出几个问题
问题1: https://developer.mozilla.org...
这里我使用的是<foreignObject>标签
问题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:这个不说了,网上一搜就有!以下演示