在mxcad中绘制矩形，本质上还是绘制多段线，那如何用mxcad中的多段线去绘制一个支持倒角和圆角的矩形呢，在autocad中绘制一个矩形会通过一些命令或者输入关键字来确定是否需要倒角圆角或者通过面积,宽高去绘制。下面我们将模仿autocad的绘制矩形的交互绘制,完整的实现一个动态交互式的绘制一个矩形出来。
命令交互初始化工作
对于命令交互,我们用尽量简洁的方式实现,代码如下:
import{MxFun}from"mxdraw"constinput=document.createElement("input")consttip=document.createElement("div")constdis=document.createElement("div")document.body.appendChild(tip)document.body.appendChild(input)document.body.appendChild(dis)//命令交互input.addEventListener("keydown",(e:KeyboardEvent)=>{//讲输入框的值和按键信息传递给mxdraw中进行处理MxFun.setCommandLineInputData((e.targetasHTMLInputElement).value,e.keyCode);//回车清空输入if(e.keyCode===13)(e.targetasHTMLInputElement).value=""//接收提示信息和命令信息MxFun.listenForCommandLineInput(({msCmdTip,msCmdDisplay,msCmdText})=>{tip.innerText=msCmdTip+msCmdTextdis.innerText=msCmdDisplay绘制矩形
首先矩形一般由两个对角点来绘制出完整的矩形,所以，我们第一步自然是获取对角点。
我们可以用MxCADUiPrPoint获取到用户点击的对角点,以及其他的几个类获取到用户的不同输入,比如距离、数字、关键词等等。
根据这些用户输入,我们来一个动态可交互的确认一个矩形如何绘制
绘制矩形主要分为以下几个步骤:
1.先获取第一个对角点
2.然后看看用户是否输入了关键词，根据关键词获取对应的参数，比如获取倒角距离，圆角半径等等然后重新回到第一步重新获取角点
3.在有了第一个角度后，进行动态绘制矩形
4.获取第二个对角点,生成矩形并绘制
其中一些关键词可能导致不同的绘制方式,每个关键词对应不同处理。
首先获取对角点的代码比较简单，代码如下:
import{MxCADUiPrPoint}from"mxcad"constgetPoint=newMxCADUiPrPoint();constpt1=awaitgetPoint.go()console.log("对角点",pt1)
然后关键词就算有一些简单必要的格式:首先如果不需要给用户任何提示可以直接写关键词例如:AB用空格分隔每个关键词如果需要对应的说明提示则需要加[]然后里面的内容格式则是提示(关键词),最后用/分割每个关键词例如:[倒角(C)/圆角(F)/宽度(W)]
getPoint.setKeyWords("[倒角(C)/圆角(F)/宽度(W)]")//这里是点击，但是它也可能没有点击，而是输入了关键词，这时返回的是nullawaitgetPoint.go()//这里可以直接判断是否输入了某个关键词if(getPoint.isKeyWordPicked("C"))
然后我们对角点,倒角距离，圆半径这些参数来确定矩形的坐标点了。首先最普通的矩形坐标点，我们通过两个对角点生成:
import{McGePoint3d}from"mxcad"constgetRectPoints=(pt1:McGePoint3d,pt3:McGePoint3d):McGePoint3d[]=>{constpt2=newMcGePoint3d(pt1.x,pt3.y,pt1.z);constpt4=newMcGePoint3d(pt3.x,pt1.y,pt3.z);return[pt1,pt2,pt3,pt4];
有了四个点，这个时候我们要考虑如果要对矩形进行倒角，我们就需要8个坐标点构成也就是根据xy轴倒角的距离去做偏移，把一个坐标生成两个偏移后坐标,代码如下:
然后我们就要考虑圆角了，在上面我们已知矩形倒角后的坐标集合,那么我们把相当于要把矩形倒角点的四个角从原来的直线变成圆弧。在cad中多段线去绘制圆弧我们只需要计算它的凸度就可以形成圆弧了，现在已经知道矩形的倒角连成的直线，那么也就知道了圆弧的开始点和结束点。我们根据mxcad中提供的一些运算方法计算出对应的凸度:
那么有了凸度,我们就可以为多义线新增具有凸度的点,两点相连就形成了一个圆弧,具体代码如下:
import{McDbPolyline}from"mxcad"constpl=newMcDbPolyline()//bulge就算凸度值通过给多段线添加两个点就形成了一个圆弧pl.addVertexAt(startPoint,bulge)pl.addVertexAt(endPoint)
通过上述关键代码的讲解,结合如下完整绘制矩形的交互式代码阅读可以更好的理解mxcad中绘制矩形的具体实现方式下面结合上述步骤描述实现了一个包含倒角/圆角/面积/尺寸四种不同的绘制方式,形成了根据用户的输入以不同方式绘制矩形的功能,代码如下: