MxDraw雲圖點選事件教程
下面演示使用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)如下圖:
(7)編譯程式碼,把SRC\sample\Edit\VueMxCAD\distr的所有檔案拷到SRC\TsWeb\public\sample\vuemxcad目錄下,覆蓋原來的檔案,在重新訪問vuemxcad頁面時,就會使用最新程式了。
3、把測試圖紙test10.dwg拷到SRC\TsWeb\public\demo目錄下, 啟動程式
啟動第一步,第二步,啟動VueMxCAD,如下圖:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/29511035/viewspace-2775761/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- MxDraw雲圖平臺 2021.09.05更新
- MxDraw雲圖快速入門手冊
- 中國地圖繪製-點選事件地圖事件
- Flutter自定義折線圖並新增點選事件Flutter事件
- databinding的點選事件事件
- 點選事件的委派事件
- 繪製不規則圖形並響應點選事件事件
- 3D地圖的定時高亮和點選事件3D地圖事件
- tabbar凸起點選事件處理tabBar事件
- echarts 工具條點選事件控制Echarts事件
- 【FAQ】關於JavaScript版本的華為地圖服務Map的點選事件與Marker的點選事件存在衝突的解決方案JavaScript地圖事件
- RecyclerView-->點選和長按事件View事件
- javascript對點選事件和拖動事件的區分JavaScript事件
- IOS setOnclick - 點選事件完美擴充套件iOS事件套件
- 手繪圖解:一次點選事件的面試題(基於RunLoop)繪圖圖解事件面試題OOP
- iOS全埋點解決方案-UITableView和UICollectionView點選事件iOSUIView事件
- iOS全埋點解決方案-控制元件點選事件iOS控制元件事件
- 點選驗證圖片
- 用Kotlin實現Android點選事件的方法KotlinAndroid事件
- win10點選揚聲器圖示點選沒有反應怎麼回事_win10工作列揚聲器聲音圖示點選無效解決教程Win10
- lvgl table的使用(重繪,事件,行選中,點選,蒙版)事件
- jQuery點選小圖彈出大圖jQuery
- React table 表單裡的內容點選事件React事件
- 使用介面實現RecyclerView中的item點選事件View事件
- 簡單實現UILabel之協議類點選事件UI協議事件
- RecyclerView使用指南(三)—— 新增分割線和點選事件View事件
- 小程式如何避免多次點選,重複觸發事件事件
- ASPxGridView中Command列自定義按鈕點選事件概要View事件
- 如何使用 JavaScript 程式碼建立虛擬滑鼠點選事件JavaScript事件
- Android中點選事件的四種寫法詳解Android事件
- 怎樣用純CSS實現禁止滑鼠點選事件?CSS事件
- 【MAUI】為 Label、Image 等控制元件新增點選事件UI控制元件事件
- js禁用頁面所有輸入框以及點選事件JS事件
- select下拉選項,點選時,change事件事觸發多次,請求多次。事件
- 後臺展示圖片點選放大
- 圖片區域點選處理
- 視訊直播app原始碼,點選圖片放大再點選縮小APP原始碼
- 為 FragmentTabhost 新增 tab 點選事件,在頁面跳轉之前Fragment事件