mxGraph学习

mxgraph的渲染过程

1：初始化mxUtils对象：doc = mxUtiles.createXmlDocument();

2：使用创建的对象，创建具体模型：

  Var person = doc.createElement(‘模型名字’);

  可以通过setAttribute来设置模型对象的属性：

person.setAttribute('lastName', 'Duck');

person1.setAttribute('firstName', 'Daffy');

3：设置画布

   通过页面中选定一个已有元素作为画布：

var graph = new mxGraph(container);其中container的方法使用原生js：container = doucment.getElementById("id")

4：设置画布属性

graph.setCellsResizable(false);定义画布中模型元素是否可拉伸

设置画布大小：

graph.setResizeContainer(true);该属性为true的时候可以通过minimumContainerSize 来控制画布整体大小展示

graph.minimumContainerSize = new mxRectangle(0, 0, 500, 380);

 

 

获取画布xml内容

document.body.appendChild(mxUtils.button('View XML', function()
{
   var encoder = new mxCodec();
   console.log('122',graph.getModel())
   var node = encoder.encode(graph.getModel());
   console.log('123',mxUtils.getPrettyXml(node));获取标准xml
    mxUtils.getXml(result);获取去除空格xml
   mxUtils.popup(mxUtils.getPrettyXml(node), true);
}));

上面代码中：

mxUtils.button定义了特定按钮，可操作mxgraph画布

mxCodec是官方给出的xml编解码器，很明显我们通过graph.getModel()获得到的是画布对象的整体属性，包括节点，属性，监听事件等（未知，为了更深了解，后面需要更加深入了解）。

var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(editor.graph.getModel());

 

后面的eg我们通过encoder.encode可以看到输出的是正常的xml字符串，目前个人理解这个字符串就是我们需要保存的最终数据。

可以拿到xml那必然可以添加xml到画布，encode对应的就是decode，

var xml = '<root><mxCell id="2" value="Hello," vertex="1"><mxGeometry x="20" y="20" width="80" height="30" as="geometry"/></mxCell><mxCell id="3" value="World!" vertex="1"><mxGeometry x="200" y="150" width="80" height="30" as="geometry"/></mxCell><mxCell id="4" value="" edge="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell></root>';
var doc = mxUtils.parseXml(xml);
var codec = new mxCodec(doc);
var elt = doc.documentElement.firstChild;
var cells = [];

while (elt != null)
{
    cells.push(codec.decode(elt));
    elt = elt.nextSibling;
}

graph.addCells(cells);

这个例子是官网的api上给的例子

可以看到需要先通过mxCodec对xml做一些处理，然后对再添加到画布中

可以看到上面画布中出现了两个蓝色举行跟一条线连接。

所以说，通过对画布操作可以实现模型的后台存储与展示。

 

简单工具栏：

//获取所需复制工具
var cells = graph.getSelectionCells();
var bounds = graph.getView().getBounds(cells);

var funct = function(graph, evt, cell)
{
   graph.stopEditing(false);

   var pt = graph.getPointForEvent(evt);
   var dx = pt.x - bounds.x;
   var dy = pt.y - bounds.y;
   
   graph.setSelectionCells(graph.importCells(cells, dx, dy, cell));
}
//添加工具栏
var img = toolbar.addMode(null, 'editors/images/outline.gif', funct);
mxUtils.makeDraggable(img, graph, funct);

mxUtils.show可对画布进行截屏或者局部截屏

 

insertVertex可新增自定义图形，可引入自定义图片，参考官网ports.html

左侧工具栏可做自己自定义部分