mxGraph学习（一）简介

清疚 2023-05-28 14:27 13阅读 0赞

## mxgraph图表库 ##

**1.概述**  
该JavaScript库分为8个包。 顶级mxClient类包含（或动态导入）其他所有内容。 当前版本存储在mxClient.VERSION中。  
编辑器包提供实现图编辑器所需的类。 该软件包的主要类是mxEditor。  
视图和模型包实现了由mxGraph表示的图形组件。 它引用了一个包含mxCells的mxGraphModel，并在mxGraphView中缓存了单元的状态。 根据mxStyle表中定义的外观，使用mxCellRenderer绘制单元格。 撤消历史记录在mxUndoManager中实现。 要在图形上显示图标，可以使用mxCellOverlay。 验证规则是使用mx乘数定义的。  
处理程序（event），布局和形状包分别包含事件侦听器，布局算法和形状。 图形事件侦听器包括用于橡皮筋选择的mxRubber条，用于工具提示的mxTooltipHandler和用于基本单元格修改的mxGraphHandler。 mxCompactTreeLayout实现树布局算法。 形状包装提供各种形状。 它们是mxShape的子类。  
util软件包提供实用程序类，包括用于复制和粘贴的mxClipboard，用于拖放的mxClipboard，用于拖放的mxConstants，用于样式表键的mxConstants和用于跨浏览器事件处理和常规功能的值以及跨浏览器事件 处理和mxLog（用于通用功能），mxResources（用于国际化）和mxLog（用于控制台输出）。  
io包实现了用于将JavaScript对象转换为XML的通用mxObjectCodec。 主要类是mxCodec。 mxCodecRegistry是自定义编解码器的全局注册表。

**2.事件**  
有三种不同类型的事件，即本机DOM事件，在mxEventSource中触发的mxEvent对象和在mxGraph中触发的mxMouse事件。  
mxEvent中提供了一些用于处理本机事件的辅助方法。 它还负责DOM节点和JavaScript事件处理程序之间的解析周期，这可能导致IE6中的内存泄漏。  
mxGraph中的大多数自定义事件都是使用mxEventSource实现的。 它的侦听器是一个获取发送者和mxEventObject的函数。 此外，mxGraph类触发使用鼠标侦听器处理的特殊mxMouse事件，该事件是提供鼠标按下，鼠标移动和鼠标按下方法的对象。  
使用mxEventSource.fireEvent触发mxEventSource中的事件。 使用mxEventSource.addListener和mxEventSource.removeListener可以添加和删除侦听器。 使用mxGraph.fireMouse事件在mxGraph中触发mxMouse事件。使用mxGraph.addMouseListener和mxGraph.removeMouseListener分别添加和删除侦听器。

**3.密钥绑定**  
为所有浏览器和平台中的客户端中的鼠标事件定义了以下按键绑定：控制拖动：重复（克隆）选定的单元格移位：显示上下文菜单Alt-单击：强制橡皮筋（（也称为复选框）控件选择 ：切换选择状态Shift拖动：将偏移限制在一个方向上Shift Control-Drag：平移（也向右拖动）

**4.配置文件**  
mxBasePath: 在mxClient.basePath中指定路径。  
mxImageBasePath: 在mxClient.imageBasePath中指定路径.  
mx language: 在mxClient中指定资源的语言。 语言。  
mxDefault language: 在mxClient.default语言中指定默认语言。  
mxLoadResources: 指定是否应加载任何资源。 默认值是true。  
mxLoadStyle table:指定是否应加载任何样式表。 默认值是true。