模型组合

  写了一个简易的demo并上传了Github。需要做类似功能的同学可以参考一下。实现技术:js+html;确切的说是gojs。
  因为gojs的中文资料实在太少了,所以看api的时候真的是把我看吐了。做这个功能的时候项目时间也比较紧,故而本文中以功能实现为主,笔者没有对gojs太深入的研究。欢迎深入学习,并使用过gojs的同学指正。

demo的GitHub地址:https://github.com/lisiqil/ComboBox.

功能需求:
1、各个模型可拖拽组合
2、组合模型可以连线并记录连接关系
3、双击不同的模块加载不同的传参表单

demo的效果图:
在这里插入图片描述
说一下思路吧,就不在文中贴代码了,需要代码的同学可以去下载demo。可以直接用,注解也写得比较详细。
实现思路如下:
用gojs实现。
1、定义节点类型(既我们拖拽的模块)
2、定义调色板,在其加载我们定义的节点类型和画线方法
3、写出save和laod方法记录节点数据和关系
4、自定义双击事件,双击对应模块,根据定义节点的name来显示对应的传参表单。
(如果需要做右击模块出菜单事件的话与这个类似,我demo里有写右击事件,后面需要找到鼠标右击的x,y的坐标,用绝对定位在次坐标处显示表单。若需要x,ydebug看一下node和e两个参数)

原创文章 19 获赞 16 访问量 2455

猜你喜欢

转载自blog.csdn.net/qq_42778289/article/details/100539105
今日推荐