往往在一個繪圖區域會有很多個圖形,如果通過右鍵拖動畫布或者通過滾動條來查找,是一件很煩人的事情。下面我就給出解決這個問題的方案。
前提是有一個整個繪圖區域的tree或者datagrid,我們需要選擇直接要定位的圖形cell。
首先我們需要一個mxGraph的全局對象,暫且就定義爲ylEditor.ylCanvas吧。
接下來我們要定義一個查找圖形cell的方法,只有通過這個方法,才能找到畫布中我們想要的那個cell。
ylCommon.findCellById=function(id){
ylEditor.ylCanvas.selectAll();
var cells=ylEditor.ylCanvas.getSelectionCells();
ylEditor.ylCanvas.clearSelection();
for(var i=0;i<cells.length;i++){
if(cells[i].id==id){
return cells[i];
}
if(cells[i].children.length>0){
for(var j=0;j<cells[i].children.length;j++){
var child=cells[i].children[j];
if(child.id==id){
return child;
}
}
}
}
return null;
}
然後定位圖形cell的方法,直接給圖形cell的id就可以了,先找到圖形,然後選中這個圖形,再計算一下座標,最後定位。
ylCommon.selectCell=function(id){
var cell=ylCommon.findCellById('cell-'+id);
if(cell){
ylEditor.ylCanvas.setSelectionCell(cell);
var x=-cell.geometry.x+($('#canvas').width()-cell.geometry.width)/2;
var y=-cell.geometry.y+($('#canvas').height()-cell.geometry.height)/2;
ylEditor.ylCanvas.getView().setTranslate(x,y);
}else{
alert('您選擇的圖形不在畫布中!');
}
}
在tree或者datagrid當中,選擇要定位的對象,然後將對象的id傳給selectCell方法就可以了,前提是這個id要能與畫布中的圖形的id匹配上。