mxGraph学习

时间:2024-03-29 10:15:55

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);
}));

mxGraph学习

上面代码中:

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做一些处理,然后对再添加到画布中

mxGraph学习

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

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

 

简单工具栏:

//获取所需复制工具
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

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

mxGraph学习