前端绘制图形有3种方式：
- HTML + CSS
- canvas
- svg
| 前端绘制图形 | 优 | 缺 |
|---|---|---|
| HTML + CSS | 简单。CSS3炫酷 | 依赖浏览器环境; 无模块机制，复用难 |
| canvas | 使用广泛，例如echarts;强大的API;渲染快 | 依赖浏览器环境; 复杂；不方便保存和导出 |
| svg | 简单，矢量图 | 渲染慢 |
mxGraph默认绘制的是svg图形（看API文档和源码发现也支持canvas），所以支持后端语言进行预渲染，同时也支持保存和导出，转化为位图也非常方便。
mxGraph的使用场景:
图形可视化、图形交互、图形布局、图形分析
- 图形可视化: 绘制图 , 由“点”（包括矩形、圆形这类基本形状）和“边”组成
- 图形交互：编辑功能，比如拖拽、选择、复制、调整大小等。
- 图形布局：多种布局方式，比如树形布局、栈式布局、圆形布局
- 图形分析：图相关的算法分析，比如找出图中两个节点的最短路径
核心概念cell
cell这个概念可以理解成为双向数据绑定中的数据模型，我们需要修改图形的时候，应该通过mxGraph提供的API来修改mxCell实例的属性，然后mxGraph的绘图函数来根据数据模型来修改视图。
mxGraph的其他很多概念都是以cell作为基础的：样式、布局、内容文本、事件、位置......
网友评论