1.首先,什么是mxcell:根据mxgraph的js部分的API,我们得知,mxCell就是在图中那些顶点和边的组合,也就是流程图中的图标和连线之类的。这些mxcell需要画在一个面板中,这个面板叫做mxgraph:
Java代码 收藏代码
container = document.getElementById(‘lala’);
var model = new mxGraphModel();
var graph = new mxGraph(container, model);
2.如何创建mxcell:
Js代码
var cell = new mxCell(value, geometry, style );
graph.addCell(cell);
value:cell的值(可显示在cell上)
geometry:可选几何形状(new mxGeometry(0, 0, w, h))
style:风格样式
3.更改mxcell的样式(style):
Js代码
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