码迷,mamicode.com
首页 > 其他好文 > 详细

mxGraph定位盲区图形到绘图区域中心位置

时间:2014-07-02 15:26:39      阅读:547      评论:0      收藏:0      [点我收藏+]

标签:javascript   mxgraph   图形   定位   选中   

往往在一个绘图区域会有很多个图形,如果通过右键拖动画布或者通过滚动条来查找,是一件很烦人的事情。下面我就给出解决这个问题的方案。

前提是有一个整个绘图区域的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匹配上。

mxGraph定位盲区图形到绘图区域中心位置,布布扣,bubuko.com

mxGraph定位盲区图形到绘图区域中心位置

标签:javascript   mxgraph   图形   定位   选中   

原文地址:http://blog.csdn.net/gua_381091614/article/details/36409435

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!