`
JavaCrazyer
  • 浏览: 3012177 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

mxGraph之在流程图上显示图片及泳道

阅读更多

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>

 

 

 

可能有人会问,泳道呢,其实加了刚才三行代码泳道也就自然能显示了

3
1
分享到:
评论
9 楼 qikitty 2011-09-01  
能加你为好友么?我想读取xml文件画流程图,QQ356657939
8 楼 doyuanbest 2011-01-07  
  QQ:306706296 向你请教问题,help me,  好不?
7 楼 doyuanbest 2011-01-07  
在不在??
6 楼 doyuanbest 2010-12-24  
兼容性问题已经解决了,但是我发现我本地的mxclient.js 没有setCellsResizable这个方法啊?会不会是版本问题? 还有就是风格,在我本地好像也不行!
5 楼 doyuanbest 2010-12-24  
4 楼 JavaCrazyer 2010-12-22  
doyuanbest 写道
请问你的程序在各种浏览器下都能正常运行吗?
我的程序现在出来了,但是发现在IE8下面条件(菱形)节点以及连线池(连线)不能显示。你有没有遇到这个问题,是如何解决的?

肯定不行的啦,对于IE,FF和CHROME来说每一种如果想运行MXGRAPH的流程图的话,那么必须在程序中更换对应MXCLIENT.JS了,所以这也就是MXGRAPH的缺点,浏览器不能互相兼容,这些针对特殊浏览器的MXCLIENT.JS可以破解下来的
3 楼 doyuanbest 2010-12-22  
请问你的程序在各种浏览器下都能正常运行吗?
我的程序现在出来了,但是发现在IE8下面条件(菱形)节点以及连线池(连线)不能显示。你有没有遇到这个问题,是如何解决的?
2 楼 JavaCrazyer 2010-12-08  
doyuanbest 写道
你的mxgraph真的很牛,我最近也在学习,可以向你请教吗?
我想在页面加载的时候,初始化两个节点,两个圆形节点,请问该如何处理?

将资源包中的例子导入到MyEclipse中好好研究吧,呵呵,我也好久没学习了,仔细看看还是有收获的
1 楼 doyuanbest 2010-12-08  
你的mxgraph真的很牛,我最近也在学习,可以向你请教吗?
我想在页面加载的时候,初始化两个节点,两个圆形节点,请问该如何处理?

相关推荐

    mxGraph插件,java代码xml导出成图片

    在这个场景中,我们需要利用mxGraph前端插件来绘制流程图,并通过Java后端将XML数据转换为图片。 在前端部分,mxGraph允许用户通过JavaScript代码动态构建图形,这些图形可以是流程图、组织结构图等。用户可以...

    mxgraph流程图绘制

    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 ...

    基于mxGraph来做的一款web的绘制流程图的javascript库工具mxGraph_gpx.zip

    mxGraph是一款强大的JavaScript库,专为在Web上创建和编辑图形和流程图而设计。它提供了丰富的功能,允许用户通过简单易用的API构建复杂的图形界面。基于mxGraph的工具通常用于业务流程建模、软件设计、网络架构可视...

    mxGraph:在HTML页面中制作流程图的JS插件

    mxGraph是一款强大的JavaScript库,专为在Web应用中创建交互式和可编辑的图形界面而设计,特别是用于绘制流程图、组织结构图、网络拓扑图等。它以其丰富的功能集、灵活性和高性能而在IT领域受到广泛欢迎。下面将详细...

    mxgraph之保存图片

    NULL 博文链接:https://lynnlysh.iteye.com/blog/1290007

    mxGraph 破解版备份 流程图 绘制

    mxGraph 破解版备份 流程图 绘制

    mxGraph JS 绘图组件

    mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM 流  程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括用  javescript 写的前端程序,也包括多个和后端程序(java/C#等等)...

    mxGraph流程图js包

    mxGraph是一款强大的JavaScript库,专用于创建交互式和可自定义的图形编辑器,尤其适合构建流程图、网络拓扑图以及UML模型等图表。它提供了丰富的API和功能,使得开发者可以轻松地在Web应用中集成图形编辑功能。 ...

    mxgraph.zip

    在实际应用中,利用mxGraph创建流程图和拓扑图时,首先要定义图形的样式和模板。样式定义了图形元素的颜色、形状、大小等视觉属性,而模板则包含了预定义的图形结构。这些可以通过创建mxStylesheet和...

    mxgraph实体关系(ERD)

    mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javascript写的前端程序,也包括多个和后端程序(java/C#等)集成的例子。以下是...

    mxGraph流程图

    mxGraph是一款强大的JavaScript库,专用于在Web页面上创建流程图和工作流设计器。这款工具以其高度可定制性、灵活性和跨浏览器兼容性而受到广大开发者的青睐。它支持包括Internet Explorer和Firefox在内的多种主流...

    mxGraph图形嵌入开发

    mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javescript写的前端程序,也包括多个和后端程序(java/C#等等)集成的例子。以下...

    mxgraph1.02WEB图形设计

    "mxgraph1.02WEB图形设计"是一个基于EXTJS扩展的开源图形设计工具,主要用于构建Web环境下的流程图和其他图表。这个工具的核心是mxGraph库,它提供了一套强大的JavaScript API,允许开发者在Web浏览器中创建、编辑和...

    mxGraph绘图插件

    在mxGraph中,你可以创建各种形状,如矩形、圆形、箭头等,并通过连接这些形状来构建网络或流程图。其核心概念包括节点(Vertices)、边(Edges)和图形(Graph)。节点代表图中的实体,边则表示它们之间的关系。...

    mxgraph.MXGRAPH..MXGRAPH..

    MXGRAPH通常指的是一个开源的JavaScript图形库,用于创建可交互的图表和流程图,但它与音乐文件无关。如果您需要关于MXGRAPH的详细信息,我可以提供如下内容: MXGRAPH是一个强大的图形编辑框架,主要用于创建富...

    mxgraph-eval-1_5_1_11(流程图表编辑)

    mxGraph是一款强大的JavaScript图形库,专门用于在Web应用程序中创建和编辑各种流程图、工作流图、图表、网络图以及一般的图形。它以其高度可定制性、灵活性和丰富的功能集而受到开发者的青睐。这个“mxgraph-eval-1...

    基于mxgraph的流程建模js框架

    而基于mxgraph的流程建模JavaScript框架则为开发者提供了一个强大且灵活的工具,使得在Web环境中创建交互式流程图成为可能。mxgraph是一个开源的图形库,支持多种图形绘制,包括流程图、网络拓扑图等,它以其高效...

    mxgraph如何实现拓扑图中节点闪烁或节点边框闪烁

    在IT领域,尤其是在图形界面设计和可视化应用中,mxGraph是一个强大的JavaScript库,用于创建交互式的图表和图形,包括复杂的网络拓扑图。本篇文章将深入探讨如何利用mxGraph实现拓扑图中节点和边框闪烁的效果,以...

    web的绘制流程图的javascript库工具(mxgraph)

    mxGraph是一款强大的JavaScript库,专为在Web环境中创建和编辑流程图、图表和其他图形而设计。这个库提供了丰富的功能,使开发者能够轻松地构建交互式的绘图应用。下面将详细介绍mxGraph的核心特性、使用方法以及它...

    结合extjs + mxgraph 网络拓扑图的开发

    extJs 跟mxgraph一样都是一种前台框架,可以混着用,这个例子将结合extjs + mxgraph 做网络拓扑图。mxgraph是将html的页面元素当做一个容器(container),并在此容器中画图的,而extJs也是将此容器包装成一个window...

Global site tag (gtag.js) - Google Analytics