mxGraph开发过程中,显示流程图相信好多朋友通过fileio.html那个示例已经都能熟练操作了,至于为什么客户端Graph换出来的流程图上面的图片为什么在web层面上不显示,这是个很麻烦的问题,关键是样式的问题,如果你研究grapheditor.html你就可以发现这个示例上面有一个showxml的菜单选项,每次你画完图点击这个菜单项就会显示最新的xml定义,注意看里面关于图片的内容的代码style="roundImage;image=images/earth.png" 和style="image;image=images/printer.png" ,对于上面的内容你可能会觉得这肯定是跟某项配置有关,没错,你猜对了,就是配置问题,之前我一直在想方面的东西结果经过尝试筛选终于验证了resources下面的default-style.xml是真正起作用的,现在我把关键代码贴在此处,其实就多了三行代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="extjs/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = 'src';
</script>
<!-- Loads and initiaizes the library -->
<script type="text/javascript" src="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.setCellsResizable(false);
graph.setEnabled(false);//设置启用,就是允不允许你改变CELL的形状内容。这里我要说明的是必须设置为TRUE才可显示右边的值
graph.setPanning(true);//移动镜头
//重写方法不允许那条线可以编辑
graph.isCellEditable = function(cell)
{
return !this.getModel().isEdge(cell)&&!this.getModel().isVertex(cell);
};
new mxCellTracker(graph);
//就是这三行代码,一定要记得default-style.xml是editors里面reourse文件夹下的
var node = mxUtils.load('default-style.xml').getDocumentElement();
var dec = new mxCodec(node.ownerDocument);
dec.decode(node, graph.getStylesheet());
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_STROKECOLOR] = 'gray';
style[mxConstants.STYLE_SHADOW] = true;
style[mxConstants.STYLE_FILLCOLOR] = '#DFDFDF';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
style[mxConstants.STYLE_FONTCOLOR] = 'black';
style[mxConstants.STYLE_FONTSIZE] = '12';
style[mxConstants.STYLE_SPACING] = 4;
style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_STROKECOLOR] = '#0C0C0C';
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
//定义为形状的关键。可能的值是一个形状前缀或新定义的任何形状的名称的所有常量。
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_FONTCOLOR] = 'black';
style[mxConstants.STYLE_FONTSIZE] = '10';
graph.gridSize = 20;
graph.setResizeContainer(true);
graph.minimumContainerSize = new mxRectangle(0, 0, 500, 380);
graph.setBorder(60);
graph.getModel().beginUpdate();
try
{
read(graph, 'MyXml.xml');
}
finally
{
graph.getModel().endUpdate();
}
new mxDivResizer(container);
var cell=null;
var oid;
var name;
var div = document.getElementById('properties');//获取属性面板
// Forces focusout in IE //IE中强调焦点移出事件
graph.container.focus()
// Clears the DIV the non-DOM way
div.innerHTML = ''; //清理DIV没有DOM
// Gets the selection cell
//mxUtils.writeln(div, '当前没有选择一项'); //当没有获取CELL时,就显示什么也没有选择
graph.addListener(mxEvent.CLICK, function(sender, evt)
{
//cell= evt.getProperty('cell');
//Ext.Ajax.request({
// url:path+'diagram/findDiagram.action',
// params:{
// id:cell.getId()
// },
// success: function(resp,opts) {
// var respText = Ext.util.JSON.decode(resp.responseText);
// name=respText.name;
// oid=respText.id;
//findbyid(graph,cell,oid,name);
//Ext.Msg.alert('错误', respText.name+"====="+respText.id);
//},
// failure: function(resp,opts) {
// var respText = Ext.util.JSON.decode(resp.responseText);
// Ext.Msg.alert('错误', respText.error);
// }
//});
});
}
};
function findbyid(graph,cell,oid,name)
{
var div = document.getElementById('properties');//获取属性面板
// Forces focusout in IE //IE中强调焦点移出事件
graph.container.focus()
// Clears the DIV the non-DOM way
div.innerHTML = ''; //清理DIV没有DOM
// Gets the selection cell
if (cell == null)
{
//mxUtils.writeln(div, '当前没有选择一项'); //当没有获取CELL时,就显示什么也没有选择
}
else
{
var a=cell.value;
if(typeof(a)=="object"&&id!="undefined"&&name!="undefined")//判断每个CELL的值是否是对象类型的,如果是就执行对象类型的ID
var center = document.createElement('center');
mxUtils.writeln(center, name);
div.appendChild(center);//将创建好的文本标题填入到DIV层里面去
mxUtils.br(div);
var form = new mxForm(); //从USER对象的属性中创建一个FORM
form.addText('id:', oid); //创建文本框
form.addText('name:', name); //创建文本框
div.appendChild(form.getTable()); //将创建的文本框组合成表格追加到DIV里面去vav
mxUtils.br(div);
}
}
// Parses the mxGraph XML file format
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>
<!-- Page passes the container for the graph to the grogram -->
<body onLoad="main(document.getElementById('graphContainer'))">
<table>
<tr>
<td>
<div id="graphContainer">
</div>
</td>
<!--<td valign="top"> 垂直对齐在顶部,这个是属性面板 -->
<!--<div id="properties"
style="border: solid 1px black; padding: 10px;">
</div>
</td> -->
</tr>
</table>
</body>
</html>
可能有人会问,泳道呢,其实加了刚才三行代码泳道也就自然能显示了
分享到:
相关推荐
前段实现mxgraph插件绘制流程图,后台实现保存的xml导出成图片格式,遇到图标没有引用,文字label位置不正确,label换行不识别 标签,linux服务器部署中文字体等问题
基于mxGraph来做的一款web的绘制流程图的javascript库工具
NULL 博文链接:https://lynnlysh.iteye.com/blog/1290007
Based on the latest web technologies, mxGraph is the ultimate component for drawing diagrams in a browser. Using open standards, mxGraph does not depend on any third-party plugins and proprietary ...
这个插件支持在HTML页面中插入流程图,画得很漂亮 :-)
mxGraph 破解版备份 流程图 绘制
非常酷的Web页面工作流设计器,兼容IE/Firfox浏览器,纯JavaScript程序,无需插件。有例子程序和源码程序。
比较好的javascrip绘制流程图的js脚本。进一步的了解可参考mxGraph的官网~~
mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM 流 程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括用 javescript 写的前端程序,也包括多个和后端程序(java/C#等等)...
本demo是运用mxgraph.js 和node api 读取xml文件,并解析出来显示,业务上常用这个画流程图和topo状态图;主要适用于,现在的图形可视化操作
mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javescript写的前端程序,也包括多个和后端程序(java/C#等等)集成的例子。以下...
extJs 跟mxgraph一样都是一种前台框架,可以混着用,这个例子将结合extjs + mxgraph 做网络拓扑图。mxgraph是将html的页面元素当做一个容器(container),并在此容器中画图的,而extJs也是将此容器包装成一个window...
MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..
mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javascript写的前端程序,也包括多个和后端程序(java/C#等)集成的例子。以下是...
mxGraph是一款基于web的绘制流程图的javascript库工具
mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。 基于EXTJS. 此附件版权归原作者所有。
很好的一个JS绘图库 var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30); var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); var e1 = graph.insertEdge(parent, null,...
mxgraph.js中文文档是一个官方的api,翻译来源于sunflower(github: https://github.com/SunInfoFE),提供给更多的开发者参考和共享源码资源!
mxgraph如何实现拓扑图中节点闪烁或节点边框闪烁的功能,模拟某些节点出现故障时候图元闪烁。
基于mxgraph的流程建模js框架,部分实现了fireflow的建模环境