【mxGraph】源码学习：（1）mxGraph库

最新推荐文章于 2024-05-16 00:20:39 发布

remo0x

最新推荐文章于 2024-05-16 00:20:39 发布

阅读量4.3k

点赞数 7

分类专栏：前端 mxGraph源码学习文章标签： mxGraph 概览源码

本文链接：https://blog.csdn.net/white_idiot/article/details/83016745

版权

基于mxGraph 3.9.9，记录学习收获

mxGraph是一个JavaScript图表库，可以快速创建交互式图形和图表应用程序，这些应用程序可以在其供应商支持的任何主要浏览器中运行。

mxGraph在2005年创建，作为商业项目一直持续到2016年，由于前端有很多新技术出现，所以mxGraph作为封装库的优势渐渐消失，最后创建者开明的以Apache 2.0开源协议在GitHub上公布源码。

mxGraph的主要优点是：

不需要第三方插件。这消除了插件供应商的依赖性。
所涉及的技术是开放的，并且有许多开放式实施，没有一个供应商可以删除让你的应用程序在实践中不可用的产品或技术。
标准化技术，这意味着你的应用程序可以部署到最大数量的浏览器用户，而无需在客户端计算机上进行其他配置或安装。大型企业环境通常不喜欢允许个人安装浏览器插件，并且不喜欢更改所有计算机的标准版本。

mxGraph的组件及其联系如下图所示：

因为这一系列文章是记录学习mxGraph源码过程中的理解，所以不赘述mxGraph的其他方面，更详细的介绍可以阅读官方文档。

首先需要获取mxGraph的源码及其文档，地址如下所示：

将整个mxGraph项目从GitHub中clone到本地：

git clone https://github.com/jgraph/mxgraph.git

mxGraph的主要文件和文件夹描述如下表所示：

我主要阅读的是javascript/src/js下面的源码，这个JavaScript库分为8个包，顶级mxClient类包括（或动态导入）其他所有内容。主要的包描述如下表所示：

包	描述
editor	提供了实现图编辑器所需的类，主要的类是mxEditor
handler, layout, shape	分别包含事件监听器，布局算法和形状。图形事件监听器包括用于框线选择的mxRubberband，用于工具提示的mxTooltipHandler和用于基本单元修改的mxGraphHandler。mxCompactTreeLayout实现树形布局算法，shape包提供各种形状，这些形状是mxShape的子类。
view, model	view和model实现了图形组件，由mxGraph表示。它指的是包含了mxCells并缓存mxGraphView中单元格的状态的mxGraphModel。根据mxStylesheet中定义的外观，使用mxCellRenderer绘制单元格。撤消历史记录在mxUndoManager中实现。要在图表上显示图标，可以使用mxCellOverlay。验证规则使用mxMultiplicity定义。
util	提供了实用程序类，包括用于复制粘贴的mxClipboard，用于键和样式表值的mxConstants，用于跨浏览器事件处理和通用功能的mxEvent和mxUtils，用于国际化的mxResource和mxLog用于控制台输出。
io	实现了一个通用的mxObjectCodec，用于将JavaScript对象转换为XML。主要类是mxCodec。mxCodecRegistry是自定义编解码器的全局注册表。

mxGraph是一个纯JavaScript库，相当于是一个框架，框架的使用步骤通常是先导入再实例化，对于mxGraph来说也是如此，比如下面这个Hello World例子：

<html>

关注

专栏目录