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

mxGraph为读取出来的mxe或xml图添加cell事件(禁止cell拖拽修改)

阅读更多

 

 

 为了模仿mxGraph中javascript里面的例子中的userobject.html展示出来的效果,可费了不少功夫,花费了大半天的时间,先总结如下:

  其一:userobject.html中的并没有读取任何mxe或者xml文件,它里面的都是自己造的XML文件,我要做的是先用CS端的Graph画好一张图生成mxe然后进行处理在读出来

  其二:userobject.html显示出来的效果图有单击事件,每单击一个cell(vertex或者edge)都会在右边显示出来一个表单用来展现其全部属性内容。它的缺陷就是,看图的人可以随便拖动并修改cell中的内容,所以我要做的是,能单击事件但不要进行拖动

  其三:mxGraph的拖动效果与graph.setEnabled(false)这个方法是挂钩的,设置true就表示可拖拽修改,反之就不可以,需要说明的是,我们单击的时候肯定是要获取每个cell的内容的,然而,如果你在设置为false的情况下使用

 graph.getSelectionModel().addListener(mxEvent.CHANGE, function(sender, evt)
    {
     selectionChanged(graph);//显示属性面板
    });

这个监听器就获取不到CELL的值,因为我的selectionChanged方法中使用到了cell,之前我在selectionChanged方法里面是通过var cell = graph.getSelectionCell()来获取cell的,这种情况下如果我利用了上面的那个监听器并且设置

graph.setEnabled(false)那么肯定不会触发事件并显示表单,如果在这种情况下设置graph.setEnabled(true)那么一定可以触发得到表单,之后我有试了其他的监听器

    graph.addListener(mxEvent.CLICK, function(sender, evt)
    {
     selectionChanged(graph);
     });

前提是graph.setEnabled(false)了也是不行的,后来这样试了双击的都不可以于是我就想这中间肯定是cell获取不对的问题,后来参考了script其他的两个例子如overlays的单击监听器中

 graph.addListener(mxEvent.CLICK, function(sender, evt)
    {
     var cell = evt.getProperty('cell');

    。。。

    }

 大家发现什么了吗?对了可以通过evt来获取到单击时的cell而不必像原来那样graph.getSelectionCell()来获取选中的了,这样修改下
 graph.addListener(mxEvent.CLICK, function(sender, evt)
    {
     cell= evt.getProperty('cell');
     selectionChanged(graph,cell);
    });
    selectionChanged(graph,cell);

哈哈哈,终于成功了,终于在禁用托债修改cell的情况下触发事件并显示表单详细内容了,现在贡献代码如下

  

 <html>
<head>
<title>显示CELL表单</title>
<script type="text/javascript">mxBasePath = 'src';</script>
<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的形状内容。
    graph.setPanning(true);//移动镜头
    //重写方法不允许那条线(edge)可以编辑
    graph.isCellEditable = function(cell)
    {
     return !this.getModel().isEdge(cell)&&!this.getModel().isVertex(cell);
    };
    new mxCellTracker(graph);
    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, '345Formatted.xml');
    }
    finally
    {
     graph.getModel().endUpdate();
    }
    //new mxDivResizer(container);
    var cell;
    graph.addListener(mxEvent.CLICK, function(sender, evt)
    {
     cell= evt.getProperty('cell');
     selectionChanged(graph,cell);
     
    });
    
    selectionChanged(graph,cell);
   }
  }; 
  
  // 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());
  };

  /**
   * Updates the properties panel //更新属性面板
   */
  function selectionChanged(graph,cell)
  {
   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 attrs = cell.value.attributes;
    var center = document.createElement('center');
    mxUtils.writeln(center, attrs[0].nodeValue);
    div.appendChild(center);//将创建好的文本标题填入到DIV层里面去
    mxUtils.br(div);
    var form = new mxForm(); //从USER对象的属性中创建一个FORM 
    for (var i = 0; i < attrs.length; i++)
    {
     form.addText(attrs[i].nodeName + ':', attrs[i].nodeValue); //创建文本框
    } 
    div.appendChild(form.getTable()); //将创建的文本框组合成表格追加到DIV里面去vav
    mxUtils.br(div);
   }
  }
 </script>
</head>
<!-- Page passes the container for the graph to the grogram -->
<body onload="main(document.getElementById('graphContainer'))">
<table>
 <tr>
  <td>
   <div id="graphContainer"
    style="border: solid 1px black;overflow:hidden;width:321px;height:241px;">
   </div>
  </td>
  <td valign="top"><!-- 垂直对齐在顶部,这个是属性面板 -->
   <div id="properties"
    style="border: solid 1px black; padding: 10px;">
   </div>
  </td>
 </tr>
</table>
</body>
</html>

 

 

6
0
分享到:
评论
11 楼 donggongai 2012-02-21  
直接用graph的setcellslocked不就行吗?
10 楼 xiaotiantian-58 2012-02-11  
想请教一下,页面上老是弹出来this.undomanager为空或不是对象是什么原因?
mxEditor.prototype.resetHistory = function() {
    this.lastSnapshot = new Date().getTime();
    this.undoManager.clear();
    this.ignoredChanges = 0;
    this.setModified(false);
};

把这个方法重写注释掉this.undoManager.clear();这句,有影响嚒?
9 楼 JavaCrazyer 2010-04-13  
晕倒,我意思是说mxGraph源代码示例中不是有个grapheditor的JAVA程序吗,你将它运行起来然后画张图,之后保存,我上面写的代码就能读取出来了
8 楼 zxh168 2010-04-13  
JavaCrazyer 写道
你如果用grapheditor那个程序里面画的生成的图形就我的程序就能读取出来

你的程序?你自己写的,还是用mxgraph的。能不能给我一份呢?O(∩_∩)O~
7 楼 JavaCrazyer 2010-04-12  
你如果用grapheditor那个程序里面画的生成的图形就我的程序就能读取出来
6 楼 zxh168 2010-04-12  
JavaCrazyer 写道
我的主要是读取CS端JGRAPH画出来的图的,你参考下fileio.html或许会有所收获


你是用JGRAPH生成的图呀,我是用自己带的那个editor里面的画的,所以形成的图可能和那个格式不一样吧
5 楼 JavaCrazyer 2010-04-12  
我的主要是读取CS端JGRAPH画出来的图的,你参考下fileio.html或许会有所收获
4 楼 zxh168 2010-04-12  
    <mxCell id="5" customId="5" value="&lt;img src=&quot;editors/images/overlays/users3.png&quot;&gt;&lt;br&gt;&lt;b&gt;Groupname&lt;/b&gt;&lt;br&gt;Status&lt;br&gt;Info" vertex="1" parent="1">
      <mxGeometry x="0" y="0" width="80" height="70" as="geometry"/>
    </mxCell>


      <mxCell style="symbol;image=images/img/server.jpg" vertex="1" parent="1">        <mxGeometry x="310" y="290" width="32" height="32" as="geometry"/>      </mxCell>
3 楼 zxh168 2010-04-12  
用的是example里面的workfloweditor.html画的,然后用你说那个方法解析,但是发现两者xml对于图片的值不一样,一个放在style里面,一个是value里面。你是用那个画的图呢?
2 楼 JavaCrazyer 2010-04-11  
图片能不出来吗?不会吧,你是用什么画的图啊
1 楼 zxh168 2010-04-10  
我也在研究mxgraph,使用了生成的xml解析出来,但是图片却出不来,想向你请教。
能不能把你的破解的给我发一份,谢谢。zhuxiaohong0123@163.com

相关推荐

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

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

    mxgraph.zip

    在Node.js环境中,可以使用fs模块读取XML文件,然后通过mxUtils或mxObjectCodec等工具将XML数据转化为mxGraph可理解的对象结构。 XML文件在mxGraph中通常用来存储图形的布局和元数据。每个图形元素(节点、边、属性...

    mxgraph svg2xml

    mxgraph自定义图元很难调试,这个工具可以通过svg转为xml ,通过微调达到图元定义的目的

    mxgraph中右键和toolbar工具条的实现

    mxgraph 是一个强大的JavaScript库,用于创建交互式图形应用程序,如流程图、网络拓扑图等。它提供了丰富的API和功能,使得开发者可以轻松地在Web应用中集成图形编辑功能。在mxgraph中,实现右键菜单和工具条是两个...

    mxGraph图形嵌入开发

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

    mxGraph的一些例子

    - **其他格式**:通过mxGraph提供的工具,可以将图形转换为其他格式,如图片(PNG、SVG)或者XML。 5. **示例** - `examples`目录下的文件展示了如何使用mxGraph创建各种图形应用程序。例如: - `grapheditor....

    mxgraph右键菜 css样式修改

    mxgraph是一款强大的JavaScript图形库,用于创建交互式图表和图形应用程序。在开发过程中,自定义右键菜单的样式是提升用户体验的重要环节。本教程将详细讲解如何修改mxgraph右键菜单的CSS样式,包括背景颜色、分隔...

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

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

    mxgraph editor

    5. **事件处理(Event Handling)**:mxGraph能够捕捉用户的交互事件,如点击、拖动等,通过事件处理器实现交互逻辑。 **mxgraph editor特性:** 1. **拖拽式界面**:用户可以通过简单的拖拽操作添加、移动和连接...

    svg2xml:SVG到XML mxGraph模具定义转换工具

    SVG到XML mxGraph模具定义转换工具。 它是为内部使用而创建的,因此还有很多未完成的事情。 要编译并运行此程序,请使用ant或以下命令。 编译 mkdir classes javac -d classes -classpath lib/mxgraph-core.jar -...

    mxgraph.MXGRAPH..MXGRAPH..

    很抱歉,根据您提供的信息,"MXGRAPH"似乎与音乐文件"陈奕迅 - 不要说话.mp3"、"陈奕迅 - 不如这样.mp3"、"陈奕迅 - 不如不见.mp3"并不相关,这看起来更像一个音乐文件的列表而不是IT行业的专业知识点。MXGRAPH通常...

    mxgraph1.02WEB图形设计

    7. **数据绑定与导入导出**:mxgraph支持多种数据格式的导入和导出,如JSON、XML和图片。这使得用户可以方便地在不同工具间交换数据,或者将图形数据存储在数据库中。 总的来说,"mxgraph1.02WEB图形设计"为Web开发...

    mxGraph流程图js包

    3. **事件处理**:mxGraph具有完整的事件处理机制,可以监听用户的点击、拖拽等操作,为图形元素添加交互行为。 4. **自定义形状**:开发者可以创建自己的图形形状,通过扩展mxGraph的API实现复杂图形的绘制。 5. ...

    mxGraph web javaScript

    mxGraph是一款强大的JavaScript库,专用于在Web上创建和编辑图形和图表,尤其适用于构建交互式、可定制的关系图和流程图。它以其灵活性、性能和丰富的功能集而备受推崇。在本文中,我们将深入探讨如何利用mxGraph库...

    mxgraph_mxgraph_slow3ya_绘图工具_mxclient_

    在"mxgraph_mxgraph_slow3ya_绘图工具_mxclient_"这个压缩包中,我们可以推测它包含的是mxgraph的一个特定版本,可能由用户"slow3ya"进行了优化或定制,以提高性能或添加特定功能。 mxGraph的主要特点包括: 1. **...

    mxgraph之保存图片

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

    mxgraph API和demo

    mxGraph是一款强大的JavaScript图形库,用于绘制和编辑流程图、组织结构图等复杂图表。它提供了丰富的API,使得开发者能够轻松地在Web应用中实现图形化界面。本文将深入探讨mxGraph API的核心概念以及如何通过示例...

    mxgraph工作流插件

    mxgraph是一个强大的JavaScript图形库,主要用于绘制流程图、组织结构图、网络拓扑图等各种复杂图形。它为开发者提供了一整套工具,用于创建可交互、高度自定义的工作流应用程序。在工作流管理领域,mxgraph作为一个...

    mxGraph JS 绘图组件

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

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

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

Global site tag (gtag.js) - Google Analytics