UI交互
在CAD应用的开发过程中,我们需要通过界面交互完成对图纸的操作,mxcad 为此提供了MxCADUiPrBase类来获取UI交互的相关数据与设置。该类包含了 取点MxCADUiPrPoint() 、获取距离MxCADUiPrDist()、获取角度MxCADUiPrAngle()、获取用户输入整型数字MxCADUiPrInt()、获取用户输入关键词MxCADUiPrKeyWord()、获取用户输入字符串MxCADUiPrString()、选择实体对象MxCADUiPrEntity(),根据需求调用这些类中的对应方法可在CAD应用中实现一套完整的交互系统。
点击 MxCADUiPrBase() 查看详细属性和方法说明。
取点对象 MxCADUiPrPoint()
我们可以通过 MxCADUiPrPoint() 实例化一个点对象。该点对象的值为鼠标点击画布时的坐标位置,使用该点对象与命令行结合,设置关键字列表实现完整的命令功能。下面为取点对象的基础使用,若你还有其他需求可参考该取点对象的API文档自行实现。
点击 MxCADUiPrPoint() 查看详细属性和方法说明。
基础取点
用户可调用 go() 方法将返回用户交互的 Promise 任务,当鼠标点击画布后 Promise 完成,得到其点击的坐标点,其他交互操作方式将返回null。
import { MxCADUiPrPoint } from "mxcad"
const getPoint = new MxCADUiPrPoint()
const point = await getPoint.go()
console.log(point)
消息提示、关键字列表
用户可调用 setMessage() 方法设置提示字符串,通过命令行为用户设置提示消息,如操作提示、错误提示、命令执行状态提示等。还可调用 setKeyWords() 方法设置关键字列表,调用 keyWords() 方法查看关键字列表,后续还可通过调用 getStatus() 方法得到用户输入状态,调用 isKeyWordPicked()、keyWordPicked() 方法可检测用户的输入是否在列表中。下面以绘制基础多段线函数为例:
import { MxCADUiPrPoint, McDbPolyline, MxCpp } from "mxcad"
import { MrxDbgUiPrBaseReturn } from "mxdraw"
async function Mx_Test_DrawPolyline(){
let objLines = new McDbPolyline()
const getPoint = new MxCADUiPrPoint()
getPoint.setMessage('\n指定第一点:')
const pt1 = await getPoint.go()
if (!pt1) return
objLines.addVertexAt(pt1)
while (true) {
const numV = objLines.numVerts()
const getNextPoint = new MxCADUiPrPoint()
getNextPoint.setMessage('\n指定下一点:')
numV > 2 ? getNextPoint.setKeyWords('[闭合(C)/放弃(U)]') : getNextPoint.setKeyWords('[放弃(U)]')
const keyList = getNextPoint.keyWords()
console.log(keyList)
getNextPoint.setUserDraw((pt, pw) => {
let pl_clone = objLines.clone() as McDbPolyline
pl_clone.addVertexAt(pt)
pw.drawMcDbEntity(pl_clone)
})
let nextPt = await getNextPoint.go()
const status = getNextPoint.getStatus()
if (nextPt !== null) {
objLines.addVertexAt(nextPt)
} else if (status === MrxDbgUiPrBaseReturn.kKeyWord) {
// 输入关键字.
if (getNextPoint.isKeyWordPicked('C')) {
// 闭合
objLines.isClosed = true
break;
} else if (getNextPoint.keyWordPicked('U')) {
// 回退
objLines.removeVertexAt(numV-1)
}
}else{
break;
}
}
let mxcad = MxCpp.getCurrentMxCAD();
mxcad.drawEntity(objLines)
}
获取用户输入
你可以根据获取用户输入整型数字MxCADUiPrInt()、获取用户输入关键词MxCADUiPrKeyWord()、获取用户输入字符串MxCADUiPrString()来实现CAD应用基础的用户交互功能。
点击 MxCADUiPrInt()、MxCADUiPrKeyWord()、MxCADUiPrString() 查看详细属性和方法说明。
const getInt = new MxCADUiPrInt()
getInt.setMessage("提示用户输入数字:")
const intVal = await getInt.go()
console.log(intVal)
const getKey = new MxCADUiPrKeyWord
getKey.setMessage("提示用户关键词 A、 B、 C:")
getKey.setKeyWords("A B C")
const keyVal = await getKey.go()
console.log(keyVal)
const getStr = new MxCADUiPrString()
getStr.setMessage("提示用户输入字符串:")
const strVal = await getStr.go()
console.log(strVal)
获取距离、角度
我们可以通过 MxCADUiPrDist() 实例化一个获取距离对象,该对象可根据用户在画布中绘制的线段长度自动计算出线段长度,从而获取到目标距离值。通过 MxCADUiPrAngle() 实例化一个获取角度对象,该对象可根据用户在画布中绘制的线段角度获取到目标角度。
点击 MxCADUiPrDist()、MxCADUiPrAngle() 查看详细属性和方法说明。
const getDist = new MxCADUiPrDist()
getDist.setMessage("提示用户设置距离:")
const distVal = await getDist.go()
console.log(distVal)
const getAngle = new MxCADUiPrAngle()
getAngle.setMessage("提示用户设置角度:")
const angleVal = await getAngle.go()
console.log(angleVal)
选择实体对象
我们可以通过 MxCADUiPrEntity() 实例化一个选择实体对象,该对象能根据用户鼠标点击的坐标得到对应的实体。
点击 MxCADUiPrEntity() 查看详细属性和方法说明。
import { MxCADUiPrEntity, MxCpp } from "mxcad"
const mxcad = MxCpp.getCurrentMxCAD();
// 实例化一个mxcad提供的通过鼠标点击获得图形对象ID的类
let getEnt = new MxCADUiPrEntity();
let id = await getEnt.go();
// 通过ID对象得到图形数据对象
let ent = id.getMcDbEntity();
if(ent) {
const color = ent.trueColor.clone()
color.setRGB(255, 0, 0)
ent.trueColor = color
mxcad.updateDisplay()
}
演示
效果:
在命令行输入“Mx_Test_DrawPolyline”,点击 enter 键开始执行绘制多段线命令
根据命令行提示按步骤绘制