当前位置:首页 > 网站建设 > mxgraph 之 让流程图文件(xml格式)以图的方式显示在面板上

mxgraph 之 让流程图文件(xml格式)以图的方式显示在面板上

发表时间:2017-10-17 15:19:58 文章编辑:威云网络 浏览次数 :


mxgraph有encode 和decode方法,既然可以通过encode编码为xml文件: 

Js代码  

var encoder = new mxCodec();  
var node = encoder.encode(graph.getModel());

  


那么解码成图像也可以实现: 

Js代码  

var req = mxUtils.load('jbpm/mxgraph.xml');     
var root = req.getDocumentElement();     
var dec = new mxCodec(root);     
dec.decode(root, graph.getModel());    
graph.getModel().endUpdate();

  


需要注意的是: 
mxgraph.xml中自定义的style在这个解码图像的js中也要写一遍,如: 

Js代码  

var style = new Object();  
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;  
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;  
style[mxConstants.STYLE_IMAGE] = 'editors/images/bigicon/start_event_empty.png';  
style[mxConstants.STYLE_IMAGE_WIDTH] = '48';  
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';  
style[mxConstants.STYLE_FONTCOLOR] = '#000000';  
style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_CENTER;  
graph.getStylesheet().putCellStyle('start-s', style);

 


完整的一个显示xml流程图的代码: 
mxgraphShow.html 

Html代码  

    
    UIConfig example

  



mxgraph.xml 

Xml代码  

  
    
      
      
      
        
      
    

  


将附件中图片放在webRoot/images/start_event_empty.png 

文章结束语------**祝大家工作顺利**-------

相关文章