mxPanningHandler.prototype.isPanningTrigger = function(me){ var evt = me.getEvent(); return (me.getState() == null && !mxEvent.isMouseEvent(evt)) || (mxEvent.isPopupTrigger(evt) && (me.getState() == null || mxEvent.isControlDown(evt) || mxEvent.isShiftDown(evt)));}; var graph = new mxGraph(container); //允许移动背景 graph.setPanning(true);
1. 简介mxgraph 内部使用一种树形数据结构记录图形文档的内容，在内容树上，每一个节点代表一个图形元素，元素信息会被存储在节点对象上；节点的父子关系表示父节点图形包含子节点图形，可以用于实现图形的分层、分组功能。例如，对于下面的图形： 内容树是图形文档的底层数据模型，有点像 vdom 之于 react；vnode 之于 vue。mxgraph 的许多功能都是围绕内容树展开的，例如渲染器 mxCellRenderer 根据内容树渲染出图形文档；编解码器 mxCellCodec 实现了外部存储格式与内容树之间的互相转换；各种 布局算法 的基本操作单位也都是内容树节点。因此，深入理解内容树模型能够为后面的源码学习过程打下扎实基础！ 内容树模型由以下几个类实现： mxGraphModel: 内容树模型，主要实现一系列树结构操作方法。mxCell: 内容树节点，用于存储图形、连接线、分层等图元的状态信息。mxGeometry: 树节点的几何信息，记录了图形元素的宽高、坐标位置；连线的开始节点、结束节点等几何特性。上面是哪个类的关系如下： 本文主要关注内容树节点 mxCell 的用法，关于 mxGraphModel、mxGeometry 的内容后续会用专门章节作介绍。 2. 初识 mxCellmxCell 类定义在 javascript/src/js/model/mxCell.js 文件中，构造函数签名： function mxCell(value, geometry, style)，参数解释： value: 用于定义图元的内容，支持传入 dom 对象、字符串。geometry: 图形的几何数值，对于 vertex 类型记录了图形的 x、y、width、height 属性；edge 类型还会记录线段两端连接的点。style: 图形样式如下示例展示了如何构造 mxCell 对象： // 构造mxCell实例const cell = new mxCell('Hello world!', new mxGeometry(60, 80, 100, 100), 'fillColor=#ddd');// 将cell设定为几何图案类型cell.vertex = true;// 使用 cell 对象构造模型const model = new mxGraphModel(cell);// 渲染模型new mxGraph(document.getElementById('container'), model);渲染结果： ...