内容简介:mxGraph是一个支持多种语言(Java、JavaScript、PHP、.NET)的画图框架,所绘制的图形可以在主流浏览器以及原生应用上使用。mxGraph官方资料全英文,网上有几篇mxGraph的教程,对于“入门”和“使用”讲解得比较详细。所以这篇文章不是介绍如何画一个图形,写一个hello world,而是重点介绍学习mxGraph时觉得比较重要的、难以理解的或者容易被忽略的知识点。
mxGraph是一个支持多种语言(Java、JavaScript、 PHP 、.NET)的画图框架,所绘制的图形可以在主流浏览器以及原生应用上使用。
mxGraph官方资料全英文,网上有几篇mxGraph的教程,对于“入门”和“使用”讲解得比较详细。
所以这篇文章不是介绍如何画一个图形,写一个hello world,而是重点介绍学习mxGraph时觉得比较重要的、难以理解的或者容易被忽略的知识点。
需要读者对mxGraph的文档有一定的了解或者使用mxGraph。
mxGraph的使用场景
mxGraph的使用场景有4个:图形可视化、图形交互、图形布局、图形分析。
图形可视化
图形可视化是mxGraph的主打功能,这个很好理解,就是把一些抽象的概念用图形来表示,比如常见的流程图、思维导图、实体关系图等。
需要注意的是mxGraph所绘制的图主要是由“点”(也包括矩形、圆形这类基本形状)和“边”组成的,如果要用mxGraph来画蒙娜丽莎那就肯定是不合适的。
下图是官方提供的一张样图。
作者猜测实现方式是用世界地图作为背景图片,然后在此之上绘制点和线。
为了验证猜测,访问了官方示例提供的网站,发现是一张jpg图片,而且没有连线。
可能是后端生成导出的位图,或者源图片已经被网站替换了。
图形交互
mxGraph除了绘制图形之外还提供了丰富的编辑功能,比如拖拽、选择、复制、调整大小等。
mxGraph甚至还专门提供了一个API类用来支持在线编辑器。
关于这一块我没有使用~
图形布局
非常重要的一个功能,能自动排列图形元素。
mxGraph提供了多种布局方式,比如树形布局、栈式布局、圆形布局。
这一块后面重点介绍。
图形分析
支持图相关的算法分析,比如找出图中两个节点的最短路径。
关于这一块我没有使用~
不过我没有找到相关API,估计需要开发者自己实现相关算法。
学习新技术或框架的时候首先需要弄清楚它是什么,能做什么。
如果和要实现的功能匹配再继续学习研究。
mxGraph的绘图方式
前端绘制图形有3种方式:
-
HTML + CSS。
-
canvas。
-
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作为基础的:样式、布局、内容文本、事件、位置……
误区
-
前面提到mxGraph的图形分为两类:vertex(点)和edge(边),但实际上它们都属于mxCell类的实例,只是一些属性值不同而已。
-
官方文档提供的
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实现了类似功能。
概括地说两步实现:
-
在创建点的时候插入一个 UserObject 对象声明,表明此处可以插入DOM元素。
-
重载 convertValueToString 函数,返回DOM元素。
相关代码如下:
边
mxGraph的边都是自动绘制的,API支持对边的样式修改,比如箭头、粗细等。
边绘制成折线的时候为两种形式,默认是通过贝塞尔曲线绘制成带圆角的折线,另一种是直角折线。
mxGraph内部并没有对这些边进行优化,如果布局不合理,交叉、穿过点的情况就会发生。
在开发中我对边的绘制方式进行了小小的修改,统一改为直接使用三次贝塞尔曲线连接,具体代码如下:
参考:
-
《mxGraph Tutorial》
-
《mxGraph User Manual – JavaScript Client》
本文可被转发或分享,但必须保留完整图文信息和出处,作者保留追究一切法律责任的权利和手段~
搜索关注公众号“web学习社”~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
《10%创业家》
[美] 帕特里克•J.麦金尼斯 / 李文远 / 广东人民出版社 / 2017-4 / 45.00
还在打工和创业之间苦苦挣扎吗?麦金尼斯用亲身经历告诉你,不用辞职,只需投入10%的时间和资源,就能获得100%的财务自由。你不需要雄厚的资本,也不必占用工作时间,只要准确掌握本书所授的方法,就能立即开始创业。 麦金尼斯是世界银行风投顾问,同时也是一名10%创业家。在本书中,他结合自身的创业咨询经历,为读者讲解了移动互联时代的5种创业模式,还提供了创业基因测试、10%创业计划、自传模板等个性化......一起来看看 《《10%创业家》》 这本书的介绍吧!