mxgraph浅入
阅读原文时间:2023年07月10日阅读:4

mxgraph浅入

参考文献:https://www.cnblogs.com/xuxg/articles/3246206.html

1.了解

(1)如何判断需要引入mxgraph产品:过程图、工作流和BPM的可视化图表、流程图、交通或水流量、 数据库和WWW的可视化、网络和电信显示、映射应用和地理信息系统、UML图、电子线路、金融、 超大规模集成电路和社会网络、数据挖掘、生化、生态循环、实体和因果关系和组织图表。

(2)如何选取自己需要mxgraph产品的哪一个库:mxGraph分为在客户端的JavaScript库和在服务器端两种支持的语言之一的.NET或Java库

(3)选取产品的javasript库,底层使用哪种技术实现:mxGraph使用在浏览器上的客户端的JavaScript功能。而在JavaScript代码层面上,在浏览器中使用了基本的矢量图形语言来显示图形, (对于大多数符合标准的浏览器使用SVG技术,而在IE中使用了的VML技术)

2.安装

(1)mxgraph以zip包的形式发布;解压之后可以看到不同的开发库;

donet:服务端.net代码;

java:Java服务器端类;

JavaScript:客户端功能。

(2)也可以通过使用npm进行安装

npm install mxGraph -- save

3.使用

目录如下

代码解析如下

(1)导入

源码中部分实现代码

mxBasePath指定mxgraph的根路径,防止库路径改变引起的引入路径错误问题;该指定需在引入mxClient之前

(2)判断对浏览器的支持性

(3)mxutils底下封装的消息弹窗示例

mxUtils.alert();mxUtils.popup();mxUtils.prompt();mxUtils.confirm();mxUtils.error();

(4)创建容器,平铺整个画布,方便我们验证

(5)mxclient底下封装了mxDivResizer对样式重置,处理IE怪异模式底下的样式问题

------大概看了一下源码,是对页面宽高的重新计算,没有深究是处理怎么样的怪异模式显示问题

(6)mxEvent底下封装了阻止出发容器里面的默认事件,源码核心preventDefault,禁止浏览器默认的右键菜单啦

(7)开始绘图,示例一个mxGraph进行绘制,源码中有队svg和vml支持性的判断,核心有createGraphView,createHtml类等

(8)mxgraph的模型-mxGraphModel (/model/mxgraphModel.js)

是mxgraph的核心类,对于图形的添加,修改,清除,在该类中实现。对于模型的每一个变化,请调用beginUpdate(), 作出适当的调用更改模型,然后调用endUpate()方法来完成的变化,通知发送变化的事件出去。

model常用的api

add(parent, child, index)
remove(cell)
setCollapsed(cell, collapsed)
setGeometry(cell, geometry)
setRoot(root)
setStyle(cell, style)
setTerminal(cell, terminal, isSource)
setTerminals(edge,source,target)
setValue(cell, value)
setVisible(cell, visible)
也就是说使用上述api时,需要使用调用beginUpdate()和endUpdate()

mxGraphModel.beginUpdate() - 启动一个事务或子事务处理。

mxGraphModel.endUpdate() - 完成一个事务或子事务处理。

mxGraph.addVertex() - 添加一个新顶点到指定的父单元(对于cell的操作)。

mxGraph.addEdge() - 添加一个边缘到指定的父单元(对于cell的操作)。

(9)单元对象-mxCell

插入单元:var v1 = graph.insertVertex(parent, null, 'Hello', 20, 20, 80, 30, 'defaultVertex;fillColor=blue');

mxGraph.setCellStyle(style, cells) – 封装在开始/结束的更新中, 指定一组单元的格式。

mxGraph.getCellStyle(cell)

mxGraph.setCellStyle(style, cells) – 封装在开始/结束的更新中, 指定一组单元的格式。

mxGraph.getCellStyle(cell)

(10)组结构

mxGraph.groupCells(group, border, cells) – 在开始/结束更新之间,把指定的单元加入到指定的组

mxGraph.ungroupCells(cells) – 把特定的单元从它的父单元中移除, 并把它们加入到它们父单元的父单元。操作之后的空组会被删除。这些操作都是在开始/结束更新之间发生。

(11)初始化的API

画布大小

wnd.setMaximizable(true);

wnd.setResizable(true);

wnd.setVisible(true);

wnd.setScrollable(true);

图像大小

graph.zoomIn();

graph.zoomOut();

// 禁用浏览器默认的右键菜单栏

mxEvent.disableContextMenu(container);

// 在已有容器内构造一个graph

var graph = new mxGraph(container);

// 鼠标框选

new mxRubberband(graph);

// 在图形中创建默认组件

var parent = graph.getDefaultParent();

// 只可预览不可选中拖动连接

graph.setEnabled(false);

// 容器大小自适应

graph.setResizeContainer(true);

// 动态改变样式

graph.getView().updateStyle = true;

// 可否重复连接

graph.setMultigraph(false);

// 禁止改变元素大小

graph.setCellsResizable(false);

// 允许连线的目标和源是同一元素

graph.setAllowLoops(true);

4.源码框架解析

1.mxgraph的javascript库分为8个类;顶级引入的是mxClient类,包括其他的类

mxClient.include(mxClient.basePath+'/js/util/…

mxClient.include(mxClient.basePath+'/js/shape/…

mxClient.include(mxClient.basePath+'/js/layout/…

mxClient.include(mxClient.basePath+'/js/model/…

mxClient.include(mxClient.basePath+'/js/view/…

mxClient.include(mxClient.basePath+'/js/handler/…

mxClient.include(mxClient.basePath+'/js/editor/…

mxClient.include(mxClient.basePath+'/js/io/…

父类引入子类得方法如下:

(1)图编辑器包:editor(主要类是mxEditor);

(2)事件监听:handler(用于框架选择:mxRubberband;工具提示:mxTooltipHandler;单元修改:mxGraphHandler);

(3)布局处理:layout(实现树形布局算法:mxCompactTreeLayout;)

mxShape的子类mxPolyline如下继承:

(4)各种形状包:shape(shape包提供各种形状,这些形状是mxShape的子类)

(5,6)图像的处理:view,model(核心类:mxGraph)

/*********************************************引用start************************************************__/__

mxGraph指的是包含了mxCells并缓存mxGraphView中单元格的状态的mxGraphModel。根据mxStylesheet中定义的外观,使用mxCellRenderer绘制单元格。撤消历史记录在mxUndoManager中实现。要在图表上显示图标,可以使用mxCellOverlay。验证规则使用mxMultiplicity定义
/*********************************************引用end************************************************___/_

(7) 其他类需要用到的实用方法:util(复制粘贴的mxClipboard;跨浏览器事件处理:mxEvent;通用功能:mxUtils;国际化:mxResource;)

(8)将JavaScript对象转换为XML:io

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章