在线CAD中实现点击事件的教程

MxDraw

[color=var(--text-color)]

下面演示使用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，如下图：