mxGraph定位盲區圖形到繪圖區域中心位置

來源:互聯網
上載者:User

往往在一個繪圖區域會有很多個圖形,如果通過右鍵拖動畫布或者通過捲軸來尋找,是一件很煩人的事情。下面我就給出解決這個問題的方案。

前提是有一個整個繪圖區域的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匹配上。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.