开发图形编辑器
一般开发这种需求,首先要了解几个概念性的东西,才能更好的熟练使用这些框架。
- 节点 (就是每个图形),有矩形、图形,或者自义定图形,像jsplumb它是通过svg和dom结合渲染
- 端点 (图形上面的锚点)一般情况都固定图形的上下左右
- 连接线 (从起始端点连接到结束端点的线).线有很多种、直线、贝塞尔、折线.
另外还有一些其它图形方面可能用到的
- 图形渲染框架.g6、jsplumb、fabric、zrender
- 图形布局(如树图、流程图、力导向图) d3、graphlib
基于g6
g6:支持canvas或svg渲染.
g6是一个更底层的框架,它更多的是渲染一些节点布局,它自带一套布局系统,也可以自定义布局。如果把它用来开发编辑器,很多需要自己来处理。可以通过注册插件扩展应用、注册行为去扩展交互、注册节点扩展节点多样化、注册连接线扩展线的多样化
基于jsplumb
是基于dom和svg渲染。它相比较g6,g6更底层一些,g6很多东西需要自己实现。而jsplumb都有现成的
- 它的节点需要自己定义创建,需要灵活也很高,你可以自己用div设计一个很漂亮和高交互的层.
- 默认样式配置很丰富,样式除了通过动态js配置,也可以通过css来控制
- 各种拦载事件与监听事件很完善
- 没有对应节点对象,所以节点上面的事件或交互需要自己来写