在线CAD中实现点击事件的教程
下面演示使用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）如下图:https://admin.mxdraw3d.com/images/ueditor/1391995406572982272.png（7）编译代码，把SRC\sample\Edit\VueMxCAD\distr的所有文件拷到SRC\TsWeb\public\sample\vuemxcad目录下，覆盖原来的文件，在重新访问vuemxcad页面时，就会使用最新程序了。3、把测试图纸test10.dwg拷到SRC\TsWeb\public\demo目录下， 启动程序https://admin.mxdraw3d.com/images/ueditor/1391995526764957696.png启动第一步，第二步,启动VueMxCAD，如下图：https://admin.mxdraw3d.com/images/ueditor/1391995563137961984.png
页:
[1]