longsan
- 浏览: 47189 次
- 性别:
- 来自: 上海
-
最新评论
-
xxg2810：
hi,不知道你发现了一个问题没有,就是通过graph.setS ...
mxgraph之朝花夕拾 -
xxg2810：
附上我本人做的一个东西<!DOCTYPE html> ...
mxgraph之朝花夕拾 -
xxg2810：
非常好的学习资料，
mxgraph之朝花夕拾 -
longsan：
gg_mm_123 写道mxgraph\javascript\ ...
mxgraph之朝花夕拾 -
gg_mm_123：
mxgraph\javascript\examples\sty ...
mxgraph之朝花夕拾
学习mxgraph一段时间了，列一些常用代码段，于己于人都方便
设置节点在线上（即：线和元素重叠式，线被节点遮住）
graph.selectEdges();//选中所有的线 graph.orderCells(true);//使线在所有元素的底下 graph.clearSelection();//取消选中的元素
设置画布背景图片
var img = new mxImage(imageSrc,1280 ,1024); // w:1280 h:1024 graph.setBackgroundImage(img); graph.view.validate();
自定义ToolTip
graph.setTooltips(true);
graph.getTooltipForCell = function(cell){
return "下级设备1:"+cell.downDevice1
+ "\n下级设备2: "+cell.downDevice2
+ "\n下级设备3: "+cell.downDevice3
+ "\n下级设备数: "+cell.downDeviceNum;
}
事件
//移动元素触发事件
graph.addListener(mxEvent.CELLS_MOVED,function(sender, evt){
//alert("CELLS_MOVED");
var cell = evt.getProperty('cell');
if(cell==null&&sender.graphHandler.cells!=null){
cell = sender.graphHandler.cells[0];//保证cell有值，否则移动时cell
}
if(cell != null && cell.vertex == 1) {//代表鼠标点击的是节点
//alert("移动节点"+cell.id);
cell.autoSaveNode = '1';//给cell节点增加一个自定义属性,标识处于可保存状态
}
});
更新指定节点图片，可配合ajax无刷新实现告警时自动闪烁
graph.getModel().beginUpdate();
try{
for (var i = 0; i < nodelist.length; i++) {
//alert(nodelist[i].deviceid+1);
var cellId = nodelist[i].deviceid+1;
var picUrl = "";
//alert(cellId);
if(nodelist[i].sr_alarmsum>0) picUrl = "red.gif";
else if (nodelist[i].sw_alarmsum >0) picUrl = "orange.gif";
var cell = graph.getModel().getCell(cellId);
// Updates the cell color and adds some tooltip information
if (cell != null) {
graph.setCellStyles(mxConstants.STYLE_IMAGE, "image;image="+picUrl, [cell]);
}
}
} finally {
graph.getModel().endUpdate();
//alert("ol1");
}
设置画布只能预览，禁止拖动或点击
graph.setEnabled(false);//graph只能预览
graph.getCursorForCell = function(cell){//预览时鼠标悬浮到节点时，改变鼠标样式
if (cell != null && cell.value != null && cell.vertex ==1 )
{
return 'pointer';
}
};
分享到：
评论
14 楼
xxg2810
2013-08-05
hi,不知道你发现了一个问题没有,就是通过graph.setStyles方法给vertex和edge修改属性时，如果节点特别多的话，内存上升的很严重，尤其是在IE下。用各种工具来查看详细信息，会发现dom节点一直上升，没有释放，不知道你对这个有没有好的解决方案。附上我的例子。
<!--
$Id: images.html,v 1.25 2012/11/20 09:06:07 gaudenz Exp $
Copyright (c) 2006-2010, JGraph Ltd
Images example for mxGraph. This example demonstrates using
background images and images for for the label- and image-shape.
-->
<html>
<head>
<title>Images example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Creates the graph inside the given container
var graph = new mxGraph(container);
// Disables basic selection and cell handling
//graph.setEnabled(false);
configureStylesheet(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// var pregetImage=mxGraph.prototype.getImage();
// mxGraph.prototype.getImage=function(state){
// var oldImage= (state != null && state.style != null) ?
// state.style[mxConstants.STYLE_IMAGE] : null;
// var imageStyle=['images/icons48/gear.png','images/icons48/server.png','images/icons48/mail_new.png','images/icons48/keys.png','images/icons48/column.png'];
// var rand = Math.floor(Math.random()*4);
// return imageStyle[rand];
// }
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var index=0;
var rowCnt=20;
var colCnt=10;
var vertexes=new Array(); //先声明一维
for(var i=0;i<rowCnt;i++){ //一维长度为rowCnt
vertexes[i]=new Array(); //在声明二维
for(var j=0;j<colCnt;j++){ //二维长度为colCnt
vertexes[i][j]=0;
}
}
var startX=20;
var startY=10;
var gapX=60;
var gapY=90;
for (var i = 0; i < rowCnt; i++) {
for (var j = 0; j < colCnt; j++) {
vertexes[i][j]= graph.insertVertex(parent, null, '', startX+i*gapX,startY+j*gapY, 50, 60, 'image');
}
}
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
setInterval(function(){
randomSetImage(graph);
},10000);
}
};
function randomSetImage(graph){
var imageStyle=['images/icons48/gear.png','images/icons48/server.png','images/icons48/mail_new.png','images/icons48/keys.png','images/icons48/column.png'];
var root=graph.getChildCells(graph.model.getRoot());
var cells=root[0].children;
for (var i = 0; i < cells.length; i++) {
var rand = Math.floor(Math.random()*5);
//var preStyle= cells[i].getStyle();
//graph.model.setStyle(cells[i],imageStyle[rand]);
//console.log(graph.getImage(graph.view.getState(cells[i],false)));
graph.setCellStyles(mxConstants.STYLE_IMAGE, "image;image="+imageStyle[rand],[cells[i]]);
//graph.getView().clear(cells[i], false, false);
//graph.cellRenderer.redraw(graph.view.getState(cells[i],false));
//graph.getView().invalidate(cells[i]);
//graph.getView().revalidate();
//graph.getView().validate();
//preStyle=null;
}
//CollectGarbage();
imageStyle=null;
}
function configureStylesheet(graph)
{
var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_IMAGE] = 'images/icons48/keys.png';
style[mxConstants.STYLE_FONTCOLOR] = '#FFFFFF';
graph.getStylesheet().putCellStyle('image', style);
style = mxUtils.clone(style);
style[mxConstants.STYLE_IMAGE] = 'images/icons48/gear.png';
graph.getStylesheet().putCellStyle('bottom', style);
style = mxUtils.clone(style);
style[mxConstants.STYLE_IMAGE] = 'images/icons48/server.png';
graph.getStylesheet().putCellStyle('top', style);
style = mxUtils.clone(style);
style[mxConstants.STYLE_IMAGE] = 'images/icons48/earth.png';
graph.getStylesheet().putCellStyle('right', style);
style = mxUtils.clone(style);
style[mxConstants.STYLE_IMAGE] = 'images/icons48/gear.png';
graph.getStylesheet().putCellStyle('left', style);
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph -->
<div id="graphContainer" style="position:relative;overflow:hidden;width:1280px;height:800px;cursor:default;">
</div>
</body>
</html>
<!--
$Id: images.html,v 1.25 2012/11/20 09:06:07 gaudenz Exp $
Copyright (c) 2006-2010, JGraph Ltd
Images example for mxGraph. This example demonstrates using
background images and images for for the label- and image-shape.
-->
<html>
<head>
<title>Images example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Creates the graph inside the given container
var graph = new mxGraph(container);
// Disables basic selection and cell handling
//graph.setEnabled(false);
configureStylesheet(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// var pregetImage=mxGraph.prototype.getImage();
// mxGraph.prototype.getImage=function(state){
// var oldImage= (state != null && state.style != null) ?
// state.style[mxConstants.STYLE_IMAGE] : null;
// var imageStyle=['images/icons48/gear.png','images/icons48/server.png','images/icons48/mail_new.png','images/icons48/keys.png','images/icons48/column.png'];
// var rand = Math.floor(Math.random()*4);
// return imageStyle[rand];
// }
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var index=0;
var rowCnt=20;
var colCnt=10;
var vertexes=new Array(); //先声明一维
for(var i=0;i<rowCnt;i++){ //一维长度为rowCnt
vertexes[i]=new Array(); //在声明二维
for(var j=0;j<colCnt;j++){ //二维长度为colCnt
vertexes[i][j]=0;
}
}
var startX=20;
var startY=10;
var gapX=60;
var gapY=90;
for (var i = 0; i < rowCnt; i++) {
for (var j = 0; j < colCnt; j++) {
vertexes[i][j]= graph.insertVertex(parent, null, '', startX+i*gapX,startY+j*gapY, 50, 60, 'image');
}
}
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
setInterval(function(){
randomSetImage(graph);
},10000);
}
};
function randomSetImage(graph){
var imageStyle=['images/icons48/gear.png','images/icons48/server.png','images/icons48/mail_new.png','images/icons48/keys.png','images/icons48/column.png'];
var root=graph.getChildCells(graph.model.getRoot());
var cells=root[0].children;
for (var i = 0; i < cells.length; i++) {
var rand = Math.floor(Math.random()*5);
//var preStyle= cells[i].getStyle();
//graph.model.setStyle(cells[i],imageStyle[rand]);
//console.log(graph.getImage(graph.view.getState(cells[i],false)));
graph.setCellStyles(mxConstants.STYLE_IMAGE, "image;image="+imageStyle[rand],[cells[i]]);
//graph.getView().clear(cells[i], false, false);
//graph.cellRenderer.redraw(graph.view.getState(cells[i],false));
//graph.getView().invalidate(cells[i]);
//graph.getView().revalidate();
//graph.getView().validate();
//preStyle=null;
}
//CollectGarbage();
imageStyle=null;
}
function configureStylesheet(graph)
{
var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_IMAGE] = 'images/icons48/keys.png';
style[mxConstants.STYLE_FONTCOLOR] = '#FFFFFF';
graph.getStylesheet().putCellStyle('image', style);
style = mxUtils.clone(style);
style[mxConstants.STYLE_IMAGE] = 'images/icons48/gear.png';
graph.getStylesheet().putCellStyle('bottom', style);
style = mxUtils.clone(style);
style[mxConstants.STYLE_IMAGE] = 'images/icons48/server.png';
graph.getStylesheet().putCellStyle('top', style);
style = mxUtils.clone(style);
style[mxConstants.STYLE_IMAGE] = 'images/icons48/earth.png';
graph.getStylesheet().putCellStyle('right', style);
style = mxUtils.clone(style);
style[mxConstants.STYLE_IMAGE] = 'images/icons48/gear.png';
graph.getStylesheet().putCellStyle('left', style);
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph -->
<div id="graphContainer" style="position:relative;overflow:hidden;width:1280px;height:800px;cursor:default;">
</div>
</body>
</html>
13 楼
xxg2810
2012-12-04
附上我本人做的一个东西
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = 'mxgraph/javascript/src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="mxgraph/javascript/src/js/mxClient.js"></script>
<script language="javascript" type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function getBackgroundPic(filename){
var req = mxUtils.load(filename);
var text = req.getText();
var lines = text.split('\n');
// Ignores comments (starting with #)
var colon = lines[2].indexOf(':');
if (lines[2].substring(0, 1) == "0") {
var value = lines[2].substring(colon+2, lines[2].length-1);
return value;
}
}
function configureStylesheet(graph)
{
var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_IMAGE] = 'image/port4.jpg';
graph.getStylesheet().putCellStyle('port', style);
var style1 = mxUtils.clone(style);
style1[mxConstants.STYLE_IMAGE] = 'image/port6.jpg';
graph.getStylesheet().putCellStyle('port2', style1);
var style2 = mxUtils.clone(style1);
style2[mxConstants.STYLE_IMAGE] = 'image/port5.jpg';
graph.getStylesheet().putCellStyle('port3', style2);
}
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
//var container = document.getElementById('graphContainer');
//var pic = getBackgroundPic('graphport.txt');
//container.style.background="url('image/" +pic + "')";
// Enables crisp rendering of rectangles in SVG
mxRectangleShape.prototype.crisp = true;
// Creates the graph inside the given container
var graph = new mxGraph(container);
// Uncomment the following if you want the container
// to fit the size of the graph
//graph.setResizeContainer(true);
var img = new mxImage('image/board.jpg',800 ,600); // w:1280 h:1024
graph.setBackgroundImage(img);
graph.view.validate();
// Enables rubberband selection
new mxRubberband(graph);
//graph.setEnabled(false);
configureStylesheet(graph);
// Disables built-in context menu
mxEvent.disableContextMenu(document.body);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, '', 20, 20, 32, 27,'port');
var v2 = graph.insertVertex(parent, null, '', 50, 20, 32, 27,'port');
var v3 = graph.insertVertex(parent, null, '', 80, 20, 32, 27,'port');
var v4 = graph.insertVertex(parent, null, '', 110, 20, 32, 27,'port');
var v5 = graph.insertVertex(parent, null, '', 140, 20, 32, 27,'port');
var v6 = graph.insertVertex(parent, null, '', 200, 20, 30, 27,'port');
var v7 = graph.insertVertex(parent, null, '', 230, 20, 30, 27,'port');
var v8 = graph.insertVertex(parent, null, '', 260, 20, 30, 27,'port');
var v9 = graph.insertVertex(parent, null, '', 290, 20, 30, 27,'port');
var v10 = graph.insertVertex(parent, null, '', 320, 20, 30, 27,'port');
graph.insertVertex(parent, null, '', 20, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 50, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 80, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 110, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 140, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 200, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 230, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 260, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 290, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 320, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 20, 80, 40, 40,'port3');
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
var marker = new mxCellMarker(graph);
var keyHandler = new mxKeyHandler(graph);
//left arrow
keyHandler.bindKey(37, function(evt)
{
if (graph.isEnabled())
{
var cells = graph.getSelectionCells();
for (var i = 0; i < cells.length; i++) {
if (cells[i].isVertex()) {
var geo = cells[i].getGeometry();
geo.translate(-1,0);
};
};
graph.refresh();
}
});
//top arrow
keyHandler.bindKey(38, function(evt)
{
if (graph.isEnabled())
{
var cells = graph.getSelectionCells();
for (var i = 0; i < cells.length; i++) {
if (cells[i].isVertex()) {
var geo = cells[i].getGeometry();
geo.translate(0,-1);
};
};
graph.refresh();
}
});
//right arrow
keyHandler.bindKey(39, function(evt)
{
if (graph.isEnabled())
{
var cells = graph.getSelectionCells();
for (var i = 0; i < cells.length; i++) {
if (cells[i].isVertex()) {
var geo = cells[i].getGeometry();
geo.translate(1,0);
};
};
graph.refresh();
}
});
//down arrow
keyHandler.bindKey(40, function(evt)
{
if (graph.isEnabled())
{
var cells = graph.getSelectionCells();
for (var i = 0; i < cells.length; i++) {
if (cells[i].isVertex()) {
var geo = cells[i].getGeometry();
geo.translate(0,1);
};
};
graph.refresh();
}
});
// Configures automatic expand on mouseover
graph.panningHandler.autoExpand = true;
graph.panningHandler.useLeftButtonForPanning = true;
graph.panningHandler.selectOnPopup = false;
graph.panningHandler.getCellForPopupEvent=function(me){
if (me.state && me.state.cell.isVertex()) {
alert("vertex");
};
}
graph.setTooltips(true);
graph.getTooltipForCell = function(cell)
{
var label = this.convertValueToString(cell);
return 'Tooltip for '+label;
}
// Installs context menu
graph.panningHandler.factoryMethod = function(menu, cell, evt)
{
menu.addItem('Item 1', cell, function()
{
alert('Item 1');
});
menu.addItem('Item 2', cell, function()
{
alert('Item 2');
});
menu.addSeparator();
var submenu1 = menu.addItem('Submenu 1', null, null);
menu.addItem('Subitem 1', null, function()
{
alert('Subitem 1');
}, submenu1);
menu.addItem('Subitem 1', null, function()
{
alert('Subitem 2');
}, submenu1);
}
var button = mxUtils.button('View XML', function()
{
var encoder = new mxCodec();
var node = encoder.encode(graph.getModel());
mxUtils.popup(mxUtils.getPrettyXml(node), true);
});
document.body.insertBefore(button, container.nextSibling);
}
};
</script>
</head>
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;width:800px;height:600px;cursor:default;">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = 'mxgraph/javascript/src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="mxgraph/javascript/src/js/mxClient.js"></script>
<script language="javascript" type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function getBackgroundPic(filename){
var req = mxUtils.load(filename);
var text = req.getText();
var lines = text.split('\n');
// Ignores comments (starting with #)
var colon = lines[2].indexOf(':');
if (lines[2].substring(0, 1) == "0") {
var value = lines[2].substring(colon+2, lines[2].length-1);
return value;
}
}
function configureStylesheet(graph)
{
var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_IMAGE] = 'image/port4.jpg';
graph.getStylesheet().putCellStyle('port', style);
var style1 = mxUtils.clone(style);
style1[mxConstants.STYLE_IMAGE] = 'image/port6.jpg';
graph.getStylesheet().putCellStyle('port2', style1);
var style2 = mxUtils.clone(style1);
style2[mxConstants.STYLE_IMAGE] = 'image/port5.jpg';
graph.getStylesheet().putCellStyle('port3', style2);
}
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
//var container = document.getElementById('graphContainer');
//var pic = getBackgroundPic('graphport.txt');
//container.style.background="url('image/" +pic + "')";
// Enables crisp rendering of rectangles in SVG
mxRectangleShape.prototype.crisp = true;
// Creates the graph inside the given container
var graph = new mxGraph(container);
// Uncomment the following if you want the container
// to fit the size of the graph
//graph.setResizeContainer(true);
var img = new mxImage('image/board.jpg',800 ,600); // w:1280 h:1024
graph.setBackgroundImage(img);
graph.view.validate();
// Enables rubberband selection
new mxRubberband(graph);
//graph.setEnabled(false);
configureStylesheet(graph);
// Disables built-in context menu
mxEvent.disableContextMenu(document.body);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, '', 20, 20, 32, 27,'port');
var v2 = graph.insertVertex(parent, null, '', 50, 20, 32, 27,'port');
var v3 = graph.insertVertex(parent, null, '', 80, 20, 32, 27,'port');
var v4 = graph.insertVertex(parent, null, '', 110, 20, 32, 27,'port');
var v5 = graph.insertVertex(parent, null, '', 140, 20, 32, 27,'port');
var v6 = graph.insertVertex(parent, null, '', 200, 20, 30, 27,'port');
var v7 = graph.insertVertex(parent, null, '', 230, 20, 30, 27,'port');
var v8 = graph.insertVertex(parent, null, '', 260, 20, 30, 27,'port');
var v9 = graph.insertVertex(parent, null, '', 290, 20, 30, 27,'port');
var v10 = graph.insertVertex(parent, null, '', 320, 20, 30, 27,'port');
graph.insertVertex(parent, null, '', 20, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 50, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 80, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 110, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 140, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 200, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 230, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 260, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 290, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 320, 50, 30, 27,'port2');
graph.insertVertex(parent, null, '', 20, 80, 40, 40,'port3');
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
var marker = new mxCellMarker(graph);
var keyHandler = new mxKeyHandler(graph);
//left arrow
keyHandler.bindKey(37, function(evt)
{
if (graph.isEnabled())
{
var cells = graph.getSelectionCells();
for (var i = 0; i < cells.length; i++) {
if (cells[i].isVertex()) {
var geo = cells[i].getGeometry();
geo.translate(-1,0);
};
};
graph.refresh();
}
});
//top arrow
keyHandler.bindKey(38, function(evt)
{
if (graph.isEnabled())
{
var cells = graph.getSelectionCells();
for (var i = 0; i < cells.length; i++) {
if (cells[i].isVertex()) {
var geo = cells[i].getGeometry();
geo.translate(0,-1);
};
};
graph.refresh();
}
});
//right arrow
keyHandler.bindKey(39, function(evt)
{
if (graph.isEnabled())
{
var cells = graph.getSelectionCells();
for (var i = 0; i < cells.length; i++) {
if (cells[i].isVertex()) {
var geo = cells[i].getGeometry();
geo.translate(1,0);
};
};
graph.refresh();
}
});
//down arrow
keyHandler.bindKey(40, function(evt)
{
if (graph.isEnabled())
{
var cells = graph.getSelectionCells();
for (var i = 0; i < cells.length; i++) {
if (cells[i].isVertex()) {
var geo = cells[i].getGeometry();
geo.translate(0,1);
};
};
graph.refresh();
}
});
// Configures automatic expand on mouseover
graph.panningHandler.autoExpand = true;
graph.panningHandler.useLeftButtonForPanning = true;
graph.panningHandler.selectOnPopup = false;
graph.panningHandler.getCellForPopupEvent=function(me){
if (me.state && me.state.cell.isVertex()) {
alert("vertex");
};
}
graph.setTooltips(true);
graph.getTooltipForCell = function(cell)
{
var label = this.convertValueToString(cell);
return 'Tooltip for '+label;
}
// Installs context menu
graph.panningHandler.factoryMethod = function(menu, cell, evt)
{
menu.addItem('Item 1', cell, function()
{
alert('Item 1');
});
menu.addItem('Item 2', cell, function()
{
alert('Item 2');
});
menu.addSeparator();
var submenu1 = menu.addItem('Submenu 1', null, null);
menu.addItem('Subitem 1', null, function()
{
alert('Subitem 1');
}, submenu1);
menu.addItem('Subitem 1', null, function()
{
alert('Subitem 2');
}, submenu1);
}
var button = mxUtils.button('View XML', function()
{
var encoder = new mxCodec();
var node = encoder.encode(graph.getModel());
mxUtils.popup(mxUtils.getPrettyXml(node), true);
});
document.body.insertBefore(button, container.nextSibling);
}
};
</script>
</head>
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;width:800px;height:600px;cursor:default;">
</div>
</body>
</html>
12 楼
xxg2810
2012-12-04
非常好的学习资料，
11 楼
longsan
2012-11-20
gg_mm_123 写道
mxgraph\javascript\examples\stylesheet.html
我用的是mxgraph\javascript\examples\stylesheet.html
方便的话发一下邮件给我，谢谢。
E-mail：3ddym.com@gmail.com
gg_mm_123 写道
gg_mm_123 写道
想请教一下，mxGraph中如和给mxCell上的文字添加超链接。
mxGraph.insertVertex(parent, id, value, x, y, width, height, style)；
想给value增加超链接，但不知道怎么设置，麻烦指点一下。
mxGraph.insertVertex(parent, id, value, x, y, width, height, style)；
想给value增加超链接，但不知道怎么设置，麻烦指点一下。
我用的是mxgraph\javascript\examples\stylesheet.html
方便的话发一下邮件给我，谢谢。
E-mail：3ddym.com@gmail.com
加个类似click的点击事件，就ok啦
10 楼
gg_mm_123
2012-11-01
mxgraph\javascript\examples\stylesheet.html
我用的是mxgraph\javascript\examples\stylesheet.html
方便的话发一下邮件给我，谢谢。
E-mail：3ddym.com@gmail.com
gg_mm_123 写道
gg_mm_123 写道
想请教一下，mxGraph中如和给mxCell上的文字添加超链接。
mxGraph.insertVertex(parent, id, value, x, y, width, height, style)；
想给value增加超链接，但不知道怎么设置，麻烦指点一下。
mxGraph.insertVertex(parent, id, value, x, y, width, height, style)；
想给value增加超链接，但不知道怎么设置，麻烦指点一下。
我用的是mxgraph\javascript\examples\stylesheet.html
方便的话发一下邮件给我，谢谢。
E-mail：3ddym.com@gmail.com
9 楼
gg_mm_123
2012-11-01
gg_mm_123 写道
想请教一下，mxGraph中如和给mxCell上的文字添加超链接。
mxGraph.insertVertex(parent, id, value, x, y, width, height, style)；
想给value增加超链接，但不知道怎么设置，麻烦指点一下。
mxGraph.insertVertex(parent, id, value, x, y, width, height, style)；
想给value增加超链接，但不知道怎么设置，麻烦指点一下。
我用的是mxgraph\javascript\examples\stylesheet.html
8 楼
gg_mm_123
2012-11-01
想请教一下，mxGraph中如和给mxCell上的文字添加超链接。
mxGraph.insertVertex(parent, id, value, x, y, width, height, style)；
想给value增加超链接，但不知道怎么设置，麻烦指点一下。
mxGraph.insertVertex(parent, id, value, x, y, width, height, style)；
想给value增加超链接，但不知道怎么设置，麻烦指点一下。
7 楼
longsan
2012-08-15
lolo9101001 写道
你好，我想问一个问题，怎么能把生成的图片文件输出出来？！
记得mxgraph的java包中有一个类 mxImageExportTest.java 好像是在test包下，具体你搜一下，说的就是将xml文档生成图片的。 你可以参考一下。
6 楼
lolo9101001
2012-08-06
你好，我想问一个问题，怎么能把生成的图片文件输出出来？！
5 楼
xuhuazhi
2012-07-30
longsan 写道
xuhuazhi 写道
你好，想请教一个关于mxgraph的问题。
var xmlform = new mxForm();
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(editor.graph.getModel());
var xml = mxUtils.getPrettyXml(node);
xmlform.addTextarea('xml',xml,8);
这段代码里直接将xml作为addTextarea的第二个参数，然后将xmlform作为mxWindow的参数，为什么会一直报错呢？
var xmlform = new mxForm();
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(editor.graph.getModel());
var xml = mxUtils.getPrettyXml(node);
xmlform.addTextarea('xml',xml,8);
这段代码里直接将xml作为addTextarea的第二个参数，然后将xmlform作为mxWindow的参数，为什么会一直报错呢？
报的什么错？ 试试 把获取xml的方式 换成mxUtils.getXml(node);呢？还会报错吗
已经解决了，不是addTextarea出错了，是后面mxWindow的时候参数错了~
谢谢回答，以后常交流~
4 楼
longsan
2012-07-28
xuhuazhi 写道
你好，想请教一个关于mxgraph的问题。
var xmlform = new mxForm();
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(editor.graph.getModel());
var xml = mxUtils.getPrettyXml(node);
xmlform.addTextarea('xml',xml,8);
这段代码里直接将xml作为addTextarea的第二个参数，然后将xmlform作为mxWindow的参数，为什么会一直报错呢？
var xmlform = new mxForm();
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(editor.graph.getModel());
var xml = mxUtils.getPrettyXml(node);
xmlform.addTextarea('xml',xml,8);
这段代码里直接将xml作为addTextarea的第二个参数，然后将xmlform作为mxWindow的参数，为什么会一直报错呢？
报的什么错？ 试试 把获取xml的方式 换成mxUtils.getXml(node);呢？还会报错吗
3 楼
xuhuazhi
2012-07-27
你好，想请教一个关于mxgraph的问题。
var xmlform = new mxForm();
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(editor.graph.getModel());
var xml = mxUtils.getPrettyXml(node);
xmlform.addTextarea('xml',xml,8);
这段代码里直接将xml作为addTextarea的第二个参数，然后将xmlform作为mxWindow的参数，为什么会一直报错呢？
var xmlform = new mxForm();
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(editor.graph.getModel());
var xml = mxUtils.getPrettyXml(node);
xmlform.addTextarea('xml',xml,8);
这段代码里直接将xml作为addTextarea的第二个参数，然后将xmlform作为mxWindow的参数，为什么会一直报错呢？
2 楼
longsan
2012-06-28
中文资料很少，我都是在这里看的http://www.jgraph.com/mxgraph.html
1 楼
jysemel
2012-06-26
你好,mxGraph 我最近刚刚接触，你这边可有什么参考的资料，谢了
发表评论
相关推荐
很抱歉，根据您提供的信息，"MXGRAPH"似乎与音乐文件"陈奕迅 - 不要说话.mp3"、"陈奕迅 - 不如这样.mp3"、"陈奕迅 - 不如不见.mp3"并不相关，这看起来更像一个音乐文件的列表而不是IT行业的专业知识点。MXGRAPH通常...
NULL 博文链接：https://lynnlysh.iteye.com/blog/1290007
在IT领域，自定义图形是实现用户界面个性化和专业化的关键元素之一。`mxgraph` 是一个强大的JavaScript库，用于创建交互式图形应用程序。本文将深入探讨如何在`mxgraph` 中实现自定义的双边框长方形，也就是所谓的`...
mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javescript写的前端程序,也包括多个和后端程序(java/C#等等)集成的例子。以下...
mxgraph 是一个强大的JavaScript图形库，它允许开发者创建交互式图表、流程图和其他图形界面。这个"mxgraph Demo汉化（简单实例）"是专为初学者设计的，旨在...通过这个实例，你可以轻松地开始自己的图形应用开发之旅。
**mxgraph API与Demo详解** mxGraph是一款强大的JavaScript图形库，用于绘制和编辑流程图、组织结构图等复杂图表。它提供了丰富的API，使得开发者能够轻松地在Web应用中实现图形化界面。本文将深入探讨mxGraph API...
**mxgraph Editor** 是一款基于JavaScript的开源图形编辑器，专为绘制流程图、工作流、拓扑图等图表设计。它使用了mxGraph库，一个功能强大的图形渲染和操作库，提供了丰富的图形编辑功能。 **mxGraph核心概念：** ...
**mxGraph 开发包详解** **一、mxGraph 概述** `mxGraph` 是一个强大的、可扩展的JavaScript图形库，主要用于创建交互式的图表和流程图。它由JGraph公司开发，支持Java和JavaScript环境，同时兼容HTML5。mxGraph的...
mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javascript写的前端程序,也包括多个和后端程序(java/C#等)集成的例子。以下是...
mxgraph.js中文文档是一个官方的api，翻译来源于sunflower(github: https://github.com/SunInfoFE)，提供给更多的开发者参考和共享源码资源！
mxGraph是一款强大的JavaScript图形库，主要用于创建交互式图表和图形应用程序。它提供了丰富的API和功能，使得开发者能够轻松地在Web浏览器中构建复杂的图形编辑器和流程图工具。这款库以其灵活性、性能和易用性...
mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM 流 程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括用 javescript 写的前端程序,也包括多个和后端程序(java/C#等等)...
mxgraph 是一个强大的JavaScript图形库，它允许开发者在Web应用中创建交互式、可定制的图形界面。这个库尤其适合构建流程图、网络拓扑图、UML模型和其他类型的图表。"mxgraph 3.1.2.1 eval"可能是该库的一个评估版本...
mxgraph是一个强大的JavaScript图形库，主要用于创建交互式图表和绘图工具。它的核心功能是提供一个灵活的、可自定义的平台，使得开发者能够轻松构建流程图、UML图、网络拓扑图等可视化应用程序。在"mxgraph_mxgraph...
**mxGraph 中文学习资料详解** mxGraph 是一个强大的图形绘制库，主要应用于Web应用程序，支持JavaScript、Java和.NET等多种编程语言。它提供了一套完整的API，使得开发者能够轻松地创建交互式图表、流程图、网络...
mxGraph是一款强大的JavaScript图形库，它允许用户在Web浏览器中创建和编辑图形图表。这款工具以其高度可定制性、灵活性和跨平台支持而受到开发者们的欢迎。然而，由于浏览器之间的兼容性问题，mxGraph在某些老旧...
mxGraph是一款强大的JavaScript图形库，用于在Web应用中创建交互式和可自定义的图表、流程图和其他图形。它提供了一种直观的方式来处理图形编辑，包括拖放功能、形状库和丰富的API。在这个场景中，我们需要利用...
mxGraph 是一款强大的JavaScript绘图组件，主要用于在Web应用程序中创建和编辑流程图、图表、网络图以及其他图形。它不仅提供了前端的JavaScript实现，还包含了与后端多种语言（如Java、C#）集成的示例，使得开发者...
"mxgraph学习笔记" MXGraph是一款基于开源技术的图形化库，提供了丰富的API和工具，帮助开发者快速构建复杂的图形应用。下面是MXGraph学习笔记的知识点总结： 坐标系 MXGraph中的坐标系分为两种：无关位置和相关...
mxgraph自定义图元很难调试，这个工具可以通过svg转为xml ,通过微调达到图元定义的目的