mxGraph使用经验总结

男娘i 2022-10-01 06:52 278阅读 0赞

mxGraph是一个支持多种语言（Java、JavaScript、PHP、.NET）的画图框架，所绘制的图形可以在主流浏览器以及原生应用上使用。 mxGraph官方资料全英文，网上有几篇mxGraph的教程，对于“入门”和“使用”讲解得比较详细。 所以这篇文章不是介绍如何画一个图形，写一个hello world，而是重点介绍学习mxGraph时觉得比较重要的、难以理解的或者容易被忽略的知识点。 需要读者对mxGraph的文档有一定的了解或者使用mxGraph。

# mxGraph的使用场景 #

mxGraph的使用场景有4个：图形可视化、图形交互、图形布局、图形分析。

## 图形可视化 ##

图形可视化是mxGraph的主打功能，这个很好理解，就是把一些抽象的概念用图形来表示，比如常见的流程图、思维导图、实体关系图等。 **需要注意的是mxGraph所绘制的图主要是由“点”（也包括矩形、圆形这类基本形状）和“边”组成的**，如果要用mxGraph来画蒙娜丽莎那就肯定是不合适的。 下图是官方提供的一张样图。 作者猜测实现方式是用世界地图作为背景图片，然后在此之上绘制点和线。 为了验证猜测，访问了官方示例提供的[网站][Link 1],发现是一张jpg图片，而且没有连线。 可能是后端生成导出的位图，或者源图片已经被网站替换了。

## 图形交互 ##

mxGraph除了绘制图形之外还提供了丰富的编辑功能，比如拖拽、选择、复制、调整大小等。 mxGraph甚至还专门提供了一个API类用来支持在线编辑器。 关于这一块我没有使用~

## 图形布局 ##

非常重要的一个功能，能自动排列图形元素。 mxGraph提供了多种布局方式，比如树形布局、栈式布局、圆形布局。 这一块后面重点介绍。

## 图形分析 ##

支持图相关的算法分析，比如找出图中两个节点的最短路径。 关于这一块我没有使用~ 不过我没有找到相关API，估计需要开发者自己实现相关算法。

## 小结 ##

学习新技术或框架的时候首先需要弄清楚它是什么，能做什么。 如果和要实现的功能匹配再继续学习研究。

# mxGraph的绘图方式 #

前端绘制图形有3种方式：

1.  HTML + CSS。
2.  canvas。
3.  svg。

## HTML+ CSS ##

### 优点 ###

*  前端工程师最熟悉最常用的方式，开发起来非常简单。
 *  借助CSS3可以实现炫酷的动画效果。

### 缺点 ###

*  非常依赖浏览器环境，如果要迁移到原生应用上或者客户端就会比较麻烦。
 *  HTML、CSS没有合适的模块机制，所以图形的复用也不方便。

## canvas ##

canvas使用也比较广泛，比如百度的著名开源项目echarts就是通过canvas来绘制各种图形。

### 优点 ###

*  强大的API，可以实现复杂的图形和效果。
 *  渲染速度快，可以利用显卡加速。

### 缺点 ###

*  也非常依赖浏览器环境，而且低版本的浏览器不支持。
 *  代码逻辑比较复杂。
 *  不方便保存和导出。

## svg ##

### 优点 ###

*  宽泛的运行环境。浏览器、绘图工具、编辑器里都可以正常显示。
 *  良好的可编辑性。svg可以在前端通过JavaScript修改，也可以通过后端语言修改，还可以让设计师通过软件修改。
 *  使用简单。svg是xml的语法，没有复杂的逻辑，全都是配置出来
 *  矢量图。相对于位图，无分辨率要求，缩放清晰。

### 缺点 ###

*  复杂图形渲染速度较慢。

## 小结 ##

mxGraph默认绘制的是svg图形（看API文档和源码发现也支持canvas），所以支持后端语言进行预渲染，同时也支持保存和导出，转化为位图也非常方便。 理解了这一点，对我们了解mxGraph的功能特性，以及修改源代码都会有帮助。

# mxGraph的核心概念cell #

cell这个概念可以理解成为双向数据绑定中的数据模型，我们需要修改图形的时候，应该通过mxGraph提供的API来修改mxCell实例的属性，然后mxGraph的绘图函数来根据数据模型来修改视图。 mxGraph的其他很多概念都是以cell作为基础的：样式、布局、内容文本、事件、位置......

## 误区 ##

1.  前面提到mxGraph的图形分为两类：vertex（点）和edge（边），但实际上它们都属于mxCell类的实例，只是一些属性值不同而已。
2.  官方文档提供的`beginUpdate`和`endUpdate`函数，写法上和数据库的事务提交很像，也有文章说是进行批量处理，实际上只是为了避免多次触发而合并了change事件而已，如果不使用这两个函数不会对绘图结果产生什么影响。至于回滚什么的那是想多了。

# mxGraph的布局算法 #

不少开发者看到“算法”这个词就会犯怵，觉得很复杂、难以理解。 但其实mxGraph的布局算法并没有那么难以理解。

*  所有的布局算法类都是“继承”自基类mxGraphLayout，自定义了一些属性，同时实现API函数execute，mxGraph在绘制图形的时候会调用这个函数。
 *  布局算法只涉及到vertex（点）的操作，当vertex（点）被调整之后，mxGraph会自动调整它们之间edge（边）的关系，或是显示隐藏或是弯曲。
 *  如果需要绘制大量的图形容易造成性能问题，不应该在算法中实现这。而可以借助mxGraph提供的几种默认方式实现：1.折叠/展开；2. 钻取/弹出；3.分层过滤显示

# mxGraph的定制化 #

很多时候我们还需要对mxGraph绘制的图形进行定制化开发，主要为下面几点。

## 样式 ##

mxGraph对样式的支持是非常不完善的。

*  首先不支持使用css，。这样也就意味着无法使用样式继承，样式类这些特性了。
 *  修改的时候需要通过API函数，传入JSON对象。
 *  mxGraph内部操作样式的时候并没有使用defs标签来声明样式类，而是直接修改标签的style、fill这些属性。这样会导致很多重复样式代码，同时不方便样式覆盖。

例如下面的代码是用来实现一个高亮样式的，如果支持CSS样式类，我们只需要写个高亮样式，增删类名即可。 但是mxgraph就比较麻烦，要写成对象，同时在取消高亮时要手动清除对应属性。

## HTML元素 ##

mxGraph一个强大之处是支持在svg中插入HTML元素，官方给出的examples中有个htmllabel.html实现了类似功能。 概括地说两步实现：

1.  在创建点的时候插入一个 UserObject 对象声明，表明此处可以插入DOM元素。
2.  重载 convertValueToString 函数，返回DOM元素。

相关代码如下：

var obj = doc.createElement('UserObject');
    obj.setAttribute('label', 'FASTQ files');
    var v1 = graph.insertVertex(col[0], null, obj, 0, 0, width, height)
    ...
    graph.convertValueToString = function (cell) {
      let div = document.createElement('div')
      ...
      return div;
    }
    复制代码

## 边 ##

mxGraph的边都是自动绘制的，API支持对边的样式修改，比如箭头、粗细等。 边绘制成折线的时候为两种形式，默认是通过贝塞尔曲线绘制成带圆角的折线，另一种是直角折线。 mxGraph内部并没有对这些边进行优化，如果布局不合理，交叉、穿过点的情况就会发生。 在开发中我对边的绘制方式进行了小小的修改，统一改为直接使用三次贝塞尔曲线连接，具体代码如下：

// shap/mxShap.js
    mxShape.prototype.addPoints = function(c, pts, rounded, arcSize, close, exclude, initialMove)
    {
    	if (pts != null && pts.length > 0)
    	{
    		initialMove = (initialMove != null) ? initialMove : true;
    		var pe = pts[pts.length - 1];
    		
    		// Adds virtual waypoint in the center between start and end point
    		if (close && rounded)
    		{
    			pts = pts.slice();
    			var p0 = pts[0];
    			var wp = new mxPoint(pe.x + (p0.x - pe.x) / 2, pe.y + (p0.y - pe.y) / 2);
    			pts.splice(0, 0, wp);
    		}
    	
    		var pt = pts[0];
    		var i = 1;
    	
    		// Draws the line segments
    		if (initialMove)
    		{
    			c.moveTo(pt.x, pt.y);
    		}
    		else
    		{
    			c.lineTo(pt.x, pt.y);
        }
        const midX = pt.x / 2 + pe.x / 2
        // 调用内置函数绘制三次贝塞尔曲线
        c.curveTo(midX, pt.y, midX, pe.y, pe.x, pe.y)
        // 忽略后面绘制折线的代码
        return;
        //...
      }
    复制代码

参考：

*  [《mxGraph Tutorial》][mxGraph Tutorial]
 *  [《mxGraph User Manual – JavaScript Client》][mxGraph User Manual _ JavaScript Client]

--------------------

原文链接：[tech.gtxlab.com/mxgraph-kno…][tech.gtxlab.com_mxgraph-kno] 作者信息：[朱德龙][Link 2]，人和未来高级前端工程师。

转载于:https://juejin.im/post/5ce4afad5188252dc441788a

[Link 1]: https://link.juejin.im?target=http%3A%2F%2Fwww.world-maps.co.uk
[mxGraph Tutorial]: https://link.juejin.im?target=https%3A%2F%2Fjgraph.github.io%2Fmxgraph%2Fdocs%2Ftutorial.html
[mxGraph User Manual _ JavaScript Client]: https://link.juejin.im?target=https%3A%2F%2Fjgraph.github.io%2Fmxgraph%2Fdocs%2Fmanual.html%231.2
[tech.gtxlab.com_mxgraph-kno]: https://link.juejin.im?target=https%3A%2F%2Ftech.gtxlab.com%2Fmxgraph-knowledge-point.html
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fyalishizhude.github.io%2Fabout%2F