图形可视化
mxGraph绘制的图片主要是由“点”(还包括矩形、圆形等基本形状)和“边”组成。
图形交互
mxGraph除绘制图片外,还提供编辑功能(拖拽、选择、复制、调整大小等)。
图形布局
自动排列图形元素,mxGraph提供多种布局方式,比如树形布局、栈形布局、圆形布局。
图形分析
与图相关的算法分析。
绘图方式
前端绘图方式
- HTML+CSS
优点:最常用,开发简单,借助CSS3可以实现动画效果。
缺点:非常依赖浏览器环境,迁移到原生应用或者客户端较麻烦。HTML、CSS没有合适的模块机制,图形复用麻烦。 - canvas
百度的著名开源项目echarts就是通过canvas绘制的。
优点:有强大的API,可以实现复杂的图形和效果;渲染速度快,可以利用显卡加速。
缺点:非常依赖浏览器环境,低版本浏览器不支持;代码逻辑较复杂;不方便保存和导出。 - svg
优点:运行环境宽泛,浏览器、绘图工具、编辑器都可以正常显示;良好的可编辑性,svg在前端可以通过JavaScript修改,后端也可以通过语言修改,还可以通过软件修改;使用简单,svg是xml语法,无复杂逻辑,配置修改;矢量图,无分辨率要求,缩放清晰。
缺点:复杂图形渲染速度慢。
mxGraph默认绘制svg图形,支持后端语言进行预渲染,支持保存和导出
mxGraph的核心概念cell
cell可以理解为双向数据绑定中的数据模型。
修改图形时,通过mxGraph提供的API来修改mxCell实例的属性,然后mxGraph的绘图函数根据数据模型修改视图。
- mxGraph的图形分为vertex(点)和edge(边),但实际上都属于mxCell类的实例,只是属性值不同。
mxGraph的布局算法
- 所有的布局算法类都是继承基类mxGraphLayout,自定义了一些属性,同时实现API函数execute,mxGraph在绘制图形的时候会调用这个函数。
- 布局算法只涉及到vertex(点)的操作,当vertex被移动后,mxGraph会自动调整edge(隐藏或弯曲)。
- 如果需要绘制大量的图形容易造成性能问题,不应该在算法中出现。可以借助1.折叠/展开;2.钻取/弹出;3.分层过滤显示。
样式
mxGraph对样式的支持是不完善的。
- 不支持使用css,所以无法使用样式继承,样式类等特征。
- 修改的时候需要通过API,传入JSON对象。
- mxGraph内部操作样式的时候没有使用defs标签来声明样式类,而是直接修改标签的style、fill这些属性,会导致很多重复样式代码,同时不方便样式覆盖。