Mxgraph使用总结二
var container = document.getElementById("main");
//设置背景样式
container.style.background = 'url(editors/images/grid.gif)'; 复制 container.style.height = "300px";
container.style.padding = "20px";
//创建一个画板
var graph = new mxGraph(container);
//获取顶层，可以认为是父节点
var parent = graph.getDefaultParent();复制createVertex = function(){
var container = document.getElementById("main");
var graph = new mxGraph(container);
var parent = graph.getDefaultParent();
// 开启拖拽选择
new mxRubberband(graph);
v1 = graph.insertVertex(parent, null, "text1", , , , );
graph.insertVertex(parent, null, "text2", , , , );
graph.insertVertex(parent, null, "text3", , , , );return graph;
};
// 声明一个object
var style = {};
// 克隆一个object
style = mxUtils.clone(style);
style\[mxConstants.STYLE\_SHAPE\] = mxConstants.SHAPE\_LABEL; **// 不设置这个属性 背景图片不出来**
// 边框颜色
style\[mxConstants.STYLE\_STROKECOLOR\] = '#999999';
// 边框大小
style\[mxConstants.STYLE\_STROKEWIDTH\] = ;
// 字体颜色
style\[mxConstants.STYLE\_FONTCOLOR\] = '#FFFF00';
// 文字水平方式
style\[mxConstants.STYLE\_ALIGN\] = mxConstants.ALIGN\_CENTER;
// 文字垂直对齐
style\[mxConstants.STYLE\_VERTICAL\_ALIGN\] = mxConstants.ALIGN\_BOTTOM;
// 字体大小
style\[mxConstants.STYLE\_FONTSIZE\] = ;
// 底图水平对齐
style\[mxConstants.STYLE\_IMAGE\_ALIGN\] = mxConstants.ALIGN\_CENTER;
// 底图垂直对齐
style\[mxConstants.STYLE\_IMAGE\_VERTICAL\_ALIGN\] = mxConstants.ALIGN\_CENTER;
// 图片路径
//style\[mxConstants.STYLE\_IMAGE\] = 'images/icons48/gear.png';
style\[mxConstants.STYLE\_IMAGE\] = 'http://imgstatic.baidu.com/img/image/shouye/qizhi0822.jpg';
// 背景图片宽
style\[mxConstants.STYLE\_IMAGE\_WIDTH\] = ;
// 背景图片高
style\[mxConstants.STYLE\_IMAGE\_HEIGHT\] = ;
// 上间距设置
// 即使下边定义了全局设置，但这里单独设置上边间距仍单独有效
style\[mxConstants.STYLE\_SPACING\_TOP\] = ;
// 四边间距设置
style\[mxConstants.STYLE\_SPACING\] = ;
// 把定义好的样式object push到stylesheet
graph.getStylesheet().putCellStyle("style1", style);
//样式使用 复制var v1 = graph.insertVertex(parent, null, "text1", 50, 50, 200, 200, "style1");
3.1 insertVertex 绘制图形
//mxGraph.prototype.insertVertex = function(parent,id,value,x,y,width,height,style,relative)
//parent画板父层，value值，x，y为坐标起点，width宽，height高
//style样式 stylename;image=imageUrl
//relative相对位置
graph.insertVertex(parent, null, '第一个盒子', , , , ,"style1");复制3.2 insertEdge 连线
//mxGraph.prototype.insertEdge = function(parent,id,value,source,target,style)
//parent画板父层，value连线值，source起点，target重点，style样式
graph.insertEdge(parent, null, 'box1 connect to box2', v1, v2 , "");复制3.3 addCellOverlay 添加告警
// 开启提示
graph.setTooltips(true);
// 移出报警
var delOverlay = function(id){
// 获取ID单元
var cell = graph.getModel().getCell(id);
// 修改有报警物体的样式
graph.setCellStyles(mxConstants.STYLE\_FILLCOLOR, "#CCCCCC", \[cell\]);
graph.setCellStyles(mxConstants.STYLE\_FONTCOLOR, "#000000", \[cell\]);
// 移除告警
graph.removeCellOverlays(cell);
};
// 给物体添加报警
var addOverlay = function(id, state){
// 获取ID单元
var cell = graph.getModel().getCell(id);
// 修改有报警物体的样式
graph.setCellStyles(mxConstants.STYLE\_FILLCOLOR, "#FF0000", \[cell\]);
graph.setCellStyles(mxConstants.STYLE\_FONTCOLOR, "#FFFFFF", \[cell\]);
// 添加告警
graph.addCellOverlay(cell, createOverlay(graph.warningImage, '状态: '+state));
};
// 创建告警信息
var createOverlay = function(image, tooltip){
//function mxCellOverlay(image,tooltip,align,verticalAlign,offset,cursor)
//image图片，tooltip提示，align位置，verticalAlign竖直位置
var overlay = new mxCellOverlay(image, tooltip);
overlay.addListener(mxEvent.CLICK, function(sender, evt){
mxUtils.alert(tooltip);
});
return overlay;
};复制3.4 添加按钮
// 添加按钮
document.body.appendChild(mxUtils.button('修改背景颜色', function(evt){
// Alaer
mxUtils.alert("Oh! You will Click me!!");
// 获取单元
var cell = graph.getModel().getCell(v1.id);
// 修改样式
graph.setCellStyles(mxConstants.STYLE\_FILLCOLOR, "#000000", \[cell\]);
graph.setCellStyles(mxConstants.STYLE\_FONTCOLOR, "#FFFFFF", \[cell\]);
}));
// 添加按钮
document.body.appendChild(mxUtils.button('还原背景颜色', function(evt){
// 获取单元
var cell = graph.getModel().getCell(v1.id);
// 获取默认样式
var style = graph.getStylesheet().getDefaultVertexStyle();
// 还原默认样式
for(var i in mxConstants){
graph.setCellStyles(mxConstants\[i\], style\[mxConstants\[i\]\], \[cell\]);
}
}));复制3.5 缩放操作
// 居中缩放
graph.centerZoom = true;
// 放大按钮
document.body.appendChild(mxUtils.button('放大 +', function(evt){
graph.zoomIn();
}));
// 缩小按钮
document.body.appendChild(mxUtils.button('缩小 -', function(evt){
graph.zoomOut();
}));
// 还原按钮
document.body.appendChild(mxUtils.button('还原 #', function(evt){
graph.zoomActual();
graph.zoomFactor = 1.2;
input.value = 1.2;
}));
var input = document.createElement("input");
input.type = "text";
input.value = graph.zoomFactor;
input.addEventListener("blur", function(){
graph.zoomFactor = parseFloat(this.value, );
});
document.body.appendChild(input);复制3.6 拖拽连线操作
// 开启可以拖拽建立关系
graph.setConnectable(true);
// 开启方块上的文字编辑功能
graph.setCellsEditable(false);
// 启用对齐线帮助定位
mxGraphHandler.prototype.guidesEnabled = true;
// 选择基本元素开启
graph.setEnabled(true);
3.7 图形形状介绍
var container = document.getElementById("main");
container.style.background = 'url(editors/images/grid.gif)';
container.style.width = "100%";
container.style.height = (window.screen.availHeight - ) + "px";
container.style.overflow = "hidden";
var graph = new mxGraph(container);
var parent = graph.getDefaultParent();
// 画方块 默认情况下
graph.insertVertex(parent, null, '矩形', , , , );
// 画方块 圆角矩形
// shape=rounded 定义圆角 arcSize=10 定义圆角弧度
graph.insertVertex(parent, null, '圆角矩形', , , , , "rounded=true;perimeter=ellipsePerimeter;arcSize=20;");
// 画椭圆
// shape=elipse 定义椭圆 perimeter=ellipsePerimeter 让连线的箭头或起点触到边缘
graph.insertVertex(parent, null, '椭圆', , , , , "shape=ellipse;perimeter=ellipsePerimeter;");
// 画三角形
// shape=triangl 定义三角形 perimeter=ellipsePerimeter 让连线的箭头或起点触到边缘 direction=south 让三角形倒立
graph.insertVertex(parent, null, '三角形', , , , , "shape=triangle;perimeter=ellipsePerimeter;direction=south;");
// 画菱形
// shape=rhombus 定义菱形
graph.insertVertex(parent, null, '三角形', , , , , "shape=rhombus;perimeter=ellipsePerimeter;");
// 画柱形
// shape=cylinder 定义柱形
graph.insertVertex(parent, null, '柱形', , , , , "shape=cylinder;perimeter=ellipsePerimeter;");
// 画人
// shape=actor 定义演员
graph.insertVertex(parent, null, '演员', , , , , "shape=actor;perimeter=ellipsePerimeter;");
// 画云
graph.insertVertex(parent, null, '云', , , , , "shape=cloud;perimeter=ellipsePerimeter;"); 复制 //矩形默认情况下
graph.insertVertex(parent, null, '矩形', , , , , "shape=rectangle;perimeter=ellipsePerimeter;");
//泳道
graph.insertVertex(parent, null, '泳道', , , , , "shape=swimlane;perimeter=ellipsePerimeter;");
//双圆
graph.insertVertex(parent, null, '双圆', , , , , "shape=doubleEllipse;perimeter=ellipsePerimeter;");
//六边形
graph.insertVertex(parent, null, '六边形', , , , , "shape=hexagon;perimeter=ellipsePerimeter;");
3.8 查看图形的xml
document.body.appendChild(mxUtils.button('View XML', function()
{
var encoder = new mxCodec();
var node = encoder.encode(graph.getModel());
mxUtils.popup(mxUtils.getPrettyXml(node), true); //以窗口的方式展示处理
})); 复制3.9 工具栏常用操作
buttons = \[
{
label : "选择所有",
fun : function(graph){
return function(evt){
graph.selectAll();
};
}
},
{
label : "选择一个",
fun : function(graph){
return function(evt){
graph.selectCell();
};
}
},
{
label : "取消选择",
fun : function(graph){
return function(evt){
var cells = graph.getSelectionCells();
graph.removeSelectionCells(cells);
};
}
},
{
label : "随机添加",
fun : function(graph){
return function(evt){
var randColor = function(){
return "rgb("+randint(,)+","+randint(,)+","+randint(,)+")";
};
var style = "fillColor=" + randColor() + "; fontColor=" + randColor();
var width = randint(, );
var height = randint(, );
var x = randint(, - width);
var y = randint(, - height);
graph.insertVertex(graph.getDefaultParent(), null, "随机添加", x, y, width, height, style);
};
}
},
{
label : "分组所选",
fun : function(graph){
return function(evt){
var cells = graph.getSelectionCells();
graph.groupCells(null, , cells);
};
}
},
{
label : "取消分组",
fun : function(graph){
return function(evt){
var cells = graph.getSelectionCells();
graph.ungroupCells(cells);
};
}
},
{
label : "删除所选",
fun : function(graph){
return function(evt){
var cells = graph.getSelectionCells();
graph.removeCells(cells);
};
}
},
{
label : "缩小",
fun : function(graph){
return function(evt){
graph.zoomOut();
};
}
},
{
label : "放大",
fun : function(graph){
return function(evt){
graph.zoomIn();
};
}
},
{
label : "还原",
fun : function(graph){
return function(evt){
graph.zoomActual();
};
}
},
{
label : "随机所选元素的位置",
fun : function(graph){
return function(evt){
var cells = graph.getSelectionCells();
for(var i=; i<cells.length; i++){
var x = randint(, - cells\[i\].geometry.width);
var y = randint(, - cells\[i\].geometry.height);
}
graph.moveCells(\[cells\[i\]\], x , y);
};
}
}
\]; 复制3.10 将图形的xml进行回显
var xml=
'
var doc = mxUtils.parseXml(xml);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
手机扫一扫
移动阅读更方便
你可能感兴趣的文章