mxGraph常用功能代码

最新推荐文章于 2024-10-26 12:10:15 发布

lanyunit

最新推荐文章于 2024-10-26 12:10:15 发布

阅读量3.9k

点赞数

分类专栏： JAVA开发 WEB开发

本文链接：https://blog.youkuaiyun.com/lanyunit/article/details/8149699

版权

JAVA开发同时被 2 个专栏收录

8 篇文章

订阅专栏

WEB开发

8 篇文章

订阅专栏

本文介绍如何使用JavaScript增强流程图编辑体验，包括鼠标悬停高亮、特定节点标记、获取选中节点信息及流程图的导入导出方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、设置当鼠标移到流程图的节点上时，给个绿色边框标记，鼠标移开时标记消失：

new mxCellTracker(editor.graph, '#00FF00');

2、给指定流程图节点加上红色边框标记

/**
* 给指定节点加上标记
* cellId -- 节点ID
**/
flagCurNode: function(cellId) {
  var self = this;
  var model = self.editor.graph.getModel();
  var curCell = model.getCell(cellId);
  model.beginUpdate();
  try {
   self.editor.graph.setCellStyles("strokeColor", "red", [curCell]);
   self.editor.graph.setCellStyles("strokeWidth", "2", [curCell]);
  } finally {
   model.endUpdate();
  }
}

3、取当前选择的流程图节点的信息

  var self = this,
   graph = self.editor.graph,
   cell = graph.getSelectionCell();
  if (cell == null) {
   JxHint.alert(jx.wfx.nopic); //'没有选择图形元素！'
   return;
  }

  var objId = cell.getId();  //元素ID
  var enc = new mxCodec();
  var node = enc.encode(cell); //解析为DOM对象时自定义属性才可以识别
  var nodetype = node.getAttribute('nodetype'); //取节点类型，如果是线则为空
  var source = node.getAttribute('source');  //取线的来源节点ID，如果是节点则值为空

4、加载xml格式描述的流程图设计文件显示到设计控件中

  var hdCall = function(xmlfile) {
   if (xmlfile == null || xmlfile.length == 0) {
    xmlfile = "<?xml version='1.0' encoding='utf-8'?>";
    xmlfile += "<mxGraphModel><root><mxCell id='0'/><mxCell id='1' parent='0'/></root></mxGraphModel>";
   }

   var doc = mxUtils.parseXml(xmlfile);
   var dec = new mxCodec(doc);
   dec.decode(doc.documentElement, self.editor.graph.getModel());
  };

5、保存设计信息到xml文件中

  var self = this,
   enc = new mxCodec(),
   graph = self.editor.graph,
   nodeGraph = enc.encode(graph.getModel()),
   rootNode = nodeGraph.getElementsByTagName('root')[0],
   mxCells = rootNode.childNodes;

//校验节点设置的有效性

...

//保存到xml中

var xmlFile = mxUtils.getPrettyXml(nodeGraph);