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 键开始执行绘制多段线命令
根据命令行提示按步骤绘制

UI交互 ​

取点对象 MxCADUiPrPoint() ​

基础取点 ​

消息提示、关键字列表 ​

获取用户输入 ​

获取距离、角度 ​

选择实体对象 ​

演示 ​