MxDraw雲圖點選事件教程

ywl0224發表於2021-06-07
點選事件教程

下面演示使用MxDraw雲圖編輯模式,在圖上點選一個文字物件,然後得到文字內容,彈出檔案內容提示視窗。

1、修改後臺程式,增加一個函式,得到一個點的文字物件

(1)使用VSCODE開啟安裝目錄Bin\MxDrawNode\MxDrawNode工程

(2)修改src\mxcaduser\MxCADUser.ts檔案,增加一個MxCAD_FindEntAtPoint函式,該用來前臺呼叫得到滑鼠點選處的文字物件

(3)程式碼如下:

namespace MxCADUserFun {
    export function MxCAD_FindEntAtPoint(param: object): object {
        //let pt: Mx.McGePoint3d = new Mx.McGePoint3dClass();
        // 得到前臺傳過來的點座標
        let pt: Mx.McGePoint3d =  Mx.Mx2DDraw.worldCoord2Doc(param["x"],param["y"]);
        // 得到搜尋範圍.
        let tol = Mx.Mx2DDraw.worldLong2Doc(param["tol"]);
        // 建立一個選擇過濾條件.
        let filter: Mx.MrxDbgRbList = new Mx.MrxDbgRbListClass();
        // 只選擇文字物件.
        filter.addString("TEXT",5020)
        let ss: Mx.MrxDbgSelSet = new Mx.MrxDbgSelSetClass();
        // 把pt點位的物件選擇到選擇集中.
        ss.selectAtPoint(pt, filter, tol);
        let txtString = "";
        if(ss.count > 0){
            // 選擇集不為空.
            let txt:Mx.McDbText  = Mx.MxType.MxCastFromId<Mx.McDbText>(ss.item(0), Mx.MxType.TypeString.kMcDbText);   
            // 得到文字物件,文字內容.
            if(txt){
                txtString = txt.textString;
            }   
        }
        // 返回文字內容.
        let ret = {text:txtString};
        return ret;
    }
}
export function initMxCADUser() {
    // 在後臺註冊一個函式,用來前臺JS呼叫。
    MxFun.registFun("MxCAD_FindEntAtPoint", MxCADUserFun.MxCAD_FindEntAtPoint); 
}

(4)編譯程式碼,把Bin\MxDrawNode\MxDrawNode\dist下面的所有檔案,拷到Bin\Release目錄覆蓋原來檔案,後臺程式重啟後,就會使用最新編譯的程式。

2、修改前臺程式,響應滑鼠的點選事件

(1)使用VSCODE開啟安裝目錄SRC\sample\Edit\DevMxCAD工程,修改src\MxCADUser\MxUser.ts,增加滑鼠事件的響應,在滑鼠左鍵按下事件中,呼叫後臺MxCAD_FindEntAtPoint得到點選的文字內容

(2)程式碼如下:

enum MouseButton {
  kInvalid = -1,
  kLeft = 0,
  kMid = 1,
  kRight = 2
};
class MxUserMouseEventTest
{
  
  public regist(mxFun:any) {
    mxFun.addWindowsEvent((type:string,event:any)=>{
      if(type == "mousedown"){
        // 如果當前有命令在執行,就不處理滑鼠事件。
        if(mxFun.isRunningCommand() ){
          return 0;
        }
        // 只處理滑鼠左鍵按下事件.
        if(event.button != MouseButton.kLeft)
        {
          return 0;
        }
        var srcElement = event.srcElement;
        if (srcElement && srcElement.tagName == "CANVAS") {
            // 得到滑鼠點選的控制元件物件.
            let mxObj: MxDrawObject = mxFun.getMxObjectFormElement(srcElement);
            if (mxObj == null) {
                0;
            }
            // 把滑鼠的螢幕座標,轉成圖紙的顯示座標。
            //@ts-ignore
            const pt:THREE.Vector3 = mxObj.screenCoord2World(event.offsetX, event.offsetY, 0);
            //@ts-ignore
            const tol:number = mxObj.screenCoordLong2World(30);
            
            // 呼叫後臺函式,得到滑鼠點的物件.
            mxFun.call("MxCAD_FindEntAtPoint",{x:pt.x,y:pt.y,tol:tol},(ret:any)=>{
              // 得到文字.
              let str:string = ret["text"];
              if(str && str.length > 0){
                alert("點選文字:" + str);
              }
              else{
                console.log("點選文字為空");
              }
            });
            return 1;
          }
      }
      return 0;
    });
  };
}
export namespace MxUser {
  let mouseEventTest:MxUserMouseEventTest = null;
  export function Init(mxFun:MxFun):void{
    
    if(mxFun.getQueryString("mousetest") == "y"){
        // 註冊滑鼠事件.
        mouseEventTest = new MxUserMouseEventTest();
        mouseEventTest.regist(mxFun);
        // 禁用MxCAD本身的選擇功能,這樣不會與我們的滑鼠點選發生衝突.
        mxFun.setIniset({ "EnableIntelliSelect": false });
    }
  }
};

(3)編譯程式碼,把SRC\sample\Edit\DevMxCAD\dist的所有檔案拷到SRC\TsWeb\public\mxcad目錄覆蓋原來的檔案,在重新訪問mxcad頁面時,就會使用最新程式了。

(4)使用VSCODE開啟安裝目錄SRC\sample\Edit\VueMxCAD目錄,修改SRC\sample\Edit\VueMxCAD\src\components\Home.vue檔案,在啟動訪問mxcad頁面加上訪問引數,這些引數會在src\MxCADUser\MxUser.ts程式碼使用,用來啟用滑鼠測試功能。

(5)程式碼如下:

const src = "../../mxcad/?usemode=y&mousetest=y&file=test10.dwg";

(6)如下圖:

圖片1.png

(7)編譯程式碼,把SRC\sample\Edit\VueMxCAD\distr的所有檔案拷到SRC\TsWeb\public\sample\vuemxcad目錄下,覆蓋原來的檔案,在重新訪問vuemxcad頁面時,就會使用最新程式了。

3、把測試圖紙test10.dwg拷到SRC\TsWeb\public\demo目錄下, 啟動程式

圖片2.png

啟動第一步,第二步,啟動VueMxCAD,如下圖:

圖片3.png


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/29511035/viewspace-2775761/,如需轉載,請註明出處,否則將追究法律責任。

相關文章