js画图开发库--mxgraph--[fileio-文件读取.html]
读取文件：fileio.txt和fileio.xml
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>文件IO例子</title>
<!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- 引入支持库文件 -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- 示例代码 -->
<script type="text/javascript">
// 程序在此启动
function main(container)
{
//检查浏览器兼容性
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// 在容器中创建图形
var graph = new mxGraph(container);
graph.setEnabled(false);
graph.setPanning(true);
graph.setTooltips(true);
graph.panningHandler.useLeftButtonForPanning = true;
// 鼠标停留到元素上边缘高亮显示
new mxCellTracker(graph);
// 更改节点的默认样式
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ROUNDED;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
style[mxConstants.STYLE_PERIMETER_SPACING] = 4;
style[mxConstants.STYLE_SHADOW] = true;
style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
style = mxUtils.clone(style);
style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_CLASSIC;
graph.getStylesheet().putCellStyle('2way', style);
graph.isHtmlLabel = function(cell)
{
return true;
};
// 更改布局网格大小
graph.gridSize = 20;
// 创建布局更新算法
var layout = new mxFastOrganicLayout(graph);
// 移动布局内的元素
layout.forceConstant = 140;
// 添加一个按钮负责改变布局
document.body.appendChild(mxUtils.button('Arrange',function(evt)
{
var parent = graph.getDefaultParent();
layout.execute(parent);
}));
// 开始布局更新
graph.getModel().beginUpdate();
try
{
// 加载自定义的格式文件 (TXT file)
parse(graph, 'fileio.txt');
// 加载 mxGraph 格式文件 (XML file)
//read(graph, 'fileio.xml');
// 在图形中创建默认组件
var parent = graph.getDefaultParent();
// 展示布局内容
layout.execute(parent);
}
finally
{
// 更新事务结束
graph.getModel().endUpdate();
}
//双击事件
graph.dblClick = function(evt, cell)
{
var mxe = new mxEventObject(mxEvent.DOUBLE_CLICK, 'event', evt, 'cell', cell);
this.fireEvent(mxe);
if (this.isEnabled() &&
!mxEvent.isConsumed(evt) &&
!mxe.isConsumed() &&
cell != null)
{
mxUtils.alert('Show properties for cell '+(cell.customId || cell.getId()));
}
};
if (mxClient.IS_QUIRKS)
{
document.body.style.overflow = 'hidden';
new mxDivResizer(container);
}
}
};
// 自定义文件格式解析器
function parse(graph, filename)
{
var model = graph.getModel();
// 创建默认窗体
var parent = graph.getDefaultParent();
var req = mxUtils.load(filename);
var text = req.getText();
var lines = text.split('\n');
// 在表中创建一个顶点
var vertices = [];
// 开始更新事务
graph.getModel().beginUpdate();
try
{
for (var i=0; i<lines.length; i++)
{
// 忽略注释（以＃开头）
var colon = lines[i].indexOf(':');
if (lines[i].substring(0, 1) != "#" ||
colon == -1)
{
var comma = lines[i].indexOf(',');
var value = lines[i].substring(colon+2, lines[i].length);
if (comma == -1 || comma > colon)
{
var key = lines[i].substring(0, colon);
if (key.length > 0)
{
vertices[key] = graph.insertVertex(parent, null, value, 0, 0, 80, 70);
}
}
else if (comma < colon)
{
// 查找表中的节点
var source = vertices[lines[i].substring(0, comma)];
var target = vertices[lines[i].substring(comma+1, colon)];
if (source != null && target != null)
{
var e = graph.insertEdge(parent, null, value, source, target);
// 采用特殊的2-Way 标签的风格
if (value.indexOf('2-Way') >= 0)
{
e.style = '2way';
}
}
}
}
}
}
finally
{
graph.getModel().endUpdate();
}
};
// 解析mxGraph XML文件格式
function read(graph, filename)
{
var req = mxUtils.load(filename);
var root = req.getDocumentElement();
var dec = new mxCodec(root.ownerDocument);
dec.decode(root, graph.getModel());
};
</script>
</head>
<!-- 页面载入时启动程序 -->
<body onload="main(document.getElementById('graphContainer'))" style="margin:4px;">
<!-- 创建带网格壁纸和曲线的一个容器，请一定要定义的position和overflow的属性！根据在线API的54 页内容增加的大小侦听器 -->
<div id="graphContainer" style="position:absolute;overflow:auto;top:36px;bottom:0px;left:0px;right:0px;border-top:gray 1px solid;">
</div>
</body>
</html>
fileio.txt
# Custom file format for fileio.html (comments start with #, all vertices first) # Vertices (id: label) 1: <img src="editors/images/overlays/user3.png"><br><b>Last, First</b><br>Status<br>Info 2: <img src="editors/images/overlays/error.png"><br><b>Errorcode</b><br>Status<br>Info 3: <img src="editors/images/overlays/flash.png"><br><b>Warning</b><br>Status<br>Info 4: <img src="editors/images/overlays/users3.png"><br><b>Groupname</b><br>Status<br>Info 5: <img src="editors/images/overlays/workplace.png"><br><b>Workplace</b><br>Status<br>Info 6: <img src="editors/images/overlays/information.png"><br><b>Information</b><br>Status<br>Info 7: <img src="editors/images/overlays/printer.png"><br><b>Printername</b><br>Status<br>Info # Edges (source-id,target-id: label) 1,2: <img src="editors/images/overlays/lightbulb_on.png"> Hint 1,3: <img src="editors/images/overlays/help.png"> News 1,4: <img src="editors/images/overlays/information.png"> Member 5,6: <img src="editors/images/overlays/pencil.png"> Details 5,7: <img src="editors/images/overlays/check.png"> Access 4,5: <img src="editors/images/overlays/forbidden.png"> Access 1,5: <img src="editors/images/overlays/lightbulb_on.png"> 2-Way
fileio.xml
<mxGraphModel>
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="2" customId="2" value="<img src="editors/images/overlays/user3.png"><br><b>Last, First</b><br>Status<br>Info" vertex="1" parent="1">
<mxGeometry x="0" y="0" width="80" height="70" as="geometry"/>
</mxCell>
<mxCell id="3" customId="3" value="<img src="editors/images/overlays/error.png"><br><b>Errorcode</b><br>Status<br>Info" vertex="1" parent="1">
<mxGeometry x="0" y="0" width="80" height="70" as="geometry"/>
</mxCell>
<mxCell id="4" customId="4" value="<img src="editors/images/overlays/flash.png"><br><b>Warning</b><br>Status<br>Info" vertex="1" parent="1">
<mxGeometry x="0" y="0" width="120" height="70" as="geometry"/>
</mxCell>
<mxCell id="5" customId="5" value="<img src="editors/images/overlays/users3.png"><br><b>Groupname</b><br>Status<br>Info" vertex="1" parent="1">
<mxGeometry x="0" y="0" width="80" height="70" as="geometry"/>
</mxCell>
<mxCell id="6" customId="6" value="<img src="editors/images/overlays/workplace.png"><br><b>Workplace</b><br>Status<br>Info" vertex="1" parent="1">
<mxGeometry x="0" y="0" width="80" height="70" as="geometry"/>
</mxCell>
<mxCell id="7" customId="6" value="<img src="editors/images/overlays/information.png"><br><b>Information</b><br>Status<br>Info" vertex="1" parent="1">
<mxGeometry x="0" y="0" width="80" height="70" as="geometry"/>
</mxCell>
<mxCell id="8" customId="7" value="<img src="editors/images/overlays/printer.png"><br><b>Printername</b><br>Status<br>Info" vertex="1" parent="1">
<mxGeometry x="0" y="0" width="120" height="70" as="geometry"/>
</mxCell>
<mxCell id="edge-1" customId="edge-1" value="<img src="editors/images/overlays/lightbulb_on.png"> Hint" edge="1" parent="1" source="2" target="3">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="edge-2" customId="edge-2" value="<img src="editors/images/overlays/help.png"> News" edge="1" parent="1" source="2" target="4">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="edge-3" customId="edge-3" value="<img src="editors/images/overlays/information.png"> Member" edge="1" parent="1" source="2" target="5">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="edge-4" customId="edge-4" value="<img src="editors/images/overlays/pencil.png"> Details" edge="1" parent="1" source="6" target="7">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="edge-5" customId="edge-5" value="<img src="editors/images/overlays/check.png"> Access" edge="1" parent="1" source="6" target="8">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="edge-6" customId="edge-6" value="<img src="editors/images/overlays/forbidden.png"> Access" edge="1" parent="1" source="5" target="6">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="edge-7" customId="edge-7" value="<img src="editors/images/overlays/lightbulb_on.png"> 2-Way" style="2way" edge="1" parent="1" source="2" target="6">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
相关推荐
MXGRAPH通常指的是一个开源的JavaScript图形库，用于创建可交互的图表和流程图，但它与音乐文件无关。如果您需要关于MXGRAPH的详细信息，我可以提供如下内容： MXGRAPH是一个强大的图形编辑框架，主要用于创建富...
2. **文件结构**：压缩包中的`jgraph-drawio-e6d99f2`目录包含了源码的各个模块，例如`src/js`存放JavaScript代码，`src/css`存储样式文件，`src/images`包含各种图形资源，`src/json`保存预设的图形模板。...
1. **引入库文件**：在HTML页面中引入`mxgraph.js`或其压缩版本，以及相关的CSS样式文件。 2. **初始化图形实例**：创建`mxGraph`实例，设置绘图区域和模型。 3. **添加图形元素**：通过API添加图形节点和连接线，...
**JS画图框架——mxGraph 入门指南** 在网页应用中，图形界面设计和交互已经成为不可或缺的一部分。JavaScript，作为最广泛使用的客户端脚本语言，自然也提供了多种库和框架来实现这一目标。其中，mxGraph 是一个...
十分强大的js绘图工具，适用于设计/编辑 Workflow/BPM 流程图、图表、网络图和普通图形的 Web 应用程序。这是破解过的源js库。
- 需要引入`mxClient.js`文件，它是mxGraph的主要JavaScript库文件，定义了核心的图表功能。 4. **JavaScript API使用** - `main`函数是mxGraph的入口点，负责初始化和运行图形界面。 - 使用`mxGraphModel`来...
mxgraph.js中文文档是一个官方的api，翻译来源于sunflower(github: https://github.com/SunInfoFE)，提供给更多的开发者参考和共享源码资源！
**mxgraph Editor** 是一款基于JavaScript的开源图形编辑器，专为绘制流程图、工作流、拓扑图等图表设计。它使用了mxGraph库，一个功能强大的图形渲染和操作库，提供了丰富的图形编辑功能。 **mxGraph核心概念：** ...
mxGraph是一款强大的JavaScript库，专为在Web应用中创建交互式和可编辑的图形界面而设计，特别是用于绘制流程图、组织结构图、网络拓扑图等。它以其丰富的功能集、灵活性和高性能而在IT领域受到广泛欢迎。下面将详细...
mxGraph是一款强大的JavaScript图形库，主要用于创建交互式图表和图形应用程序。它提供了丰富的API和功能，使得开发者能够轻松地在Web浏览器中构建复杂的图形编辑器和流程图工具。这款库以其灵活性、性能和易用性...
mxGraph是一个功能强大的JavaScript库，用于创建可交互的图形编辑器，支持绘制流程图、网络拓扑图等各种图表。 首先，让我们深入了解Vue.js的核心概念。Vue采用组件化的开发方式，将UI拆分为可复用的模块，每个模块...
首先，mxgraph.js是一个开源的JavaScript库，专门用于图形绘制和编辑。它提供了一个全面的图形编辑环境，包括图形绘制、布局算法、事件处理等功能。draw.io在其基础上进行了扩展和优化，使得用户可以创建复杂的流程...
mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM 流 程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括用 javescript 写的前端程序,也包括多个和后端程序(java/C#等等)...
首先，mxgraph.js是mxGraph库的主要JavaScript实现，它提供了丰富的图形绘制和编辑功能。该库支持SVG、VML和Canvas等多种渲染方式，确保在各种浏览器上都能获得良好的兼容性。mxGraph的核心组件包括模型（Model）、...
一套将SVG文件转换为mxGraph资源的工具。 该存储库基于： SVG to XML mxGraph stencil definition translation tool. This was created for internal use, so there are lots of things unfinished. 它包含原始的...
mxGraph是一款强大的JavaScript图形库，用于在Web应用中创建交互式和可自定义的图表、流程图和其他图形。它提供了一种直观的方式来处理图形编辑，包括拖放功能、形状库和丰富的API。在这个场景中，我们需要利用...
带Webpack的typed-mxgraph演示 来自Webpack Typescript入门 如何使用 在本地克隆项目 git clone https://github.com/typed-mxgraph/typed-mxgraph-demo.git 切换到项目目录 cd typed-mxgraph-demo 确保使用节点10...
mxGraph是一个功能强大的JavaScript图形库，主要用于创建交互式图表、流程图、网络拓扑图等。其最新版本1_10_4_0提供了丰富的功能，不仅包括源代码，还附带了详尽的文档和示例，方便开发者快速理解和应用。 一、...
mxGraph 是一个强大的 JavaScript 图形库，它允许开发者在 Web 浏览器中创建和编辑图形界面。这个名为 "mxgraph-demo-源码" 的压缩包包含了 mxGraph 的示例源代码，为我们提供了一个深入理解 mxGraph 功能和实现原理...