Question

动态绘制

CAD绘制图形的过程中我们需要能够动态观察到绘制过程，在该过程中的动态绘制不会改变图形类，但能动态设置图形的大小、方向等，可以帮助用户更快捷地绘制目标图形。

动态绘制函数

在上一节我们介绍到在绘制图形的过程中我们会使用 MxCADUiPrBase类 来实现UI交互，该类中提供了一个方法 setUserDraw()，该方法就是为了解决上述需求实现动态绘制的函数。

我们通过在 MxCADUiPrBase类 中调用 setUserDraw() 方法设置交互过程的动态绘制调用对象。其中，setUserDraw() 有两个回调参数：

1. currentPoint：currentPoint为一个 McGePoint3d 三维点对象，返回值是当前鼠标所在点坐标。

2. pWorldDraw：pWorldDraw为一个 McEdGetPointWorldDrawObject 动态绘制调用对象，可根据用户设置动态绘制目标图形，但使用该对象动态绘制的图像对象在结束调用时会全部清除。

import { MxCADUiPrPoint, McDbLine } from "mxcad"

const getPoint = new MxCADUiPrPoint()
getPoint.go().then((point)=> {
  getPoint.setUserDraw((pt, pw)=> {
    // pt:currentPoint 就是鼠标所在图纸位置的坐标
    // pw:pWorldDraw 是提供了一些动态绘制方法的对象
    if(!point) return
    const line =new McDbLine(point ,pt)
    // 动态绘制了一条线
    pw.drawMcDbEntity(line)
  })
  // 等待鼠标点击期间会执行上面的动态绘制函数中的回调函数
  getPoint.go()
})

功能函数

我们可以直接从mxcad中导出以draw开头的函数, 每一个函数对应着一个动态绘制图形的功能。这些功能存在一些命令行交互(输入参数、关键词)，类似大部分CAD中绘制图形的功能，我们可以通过默认的命令去调用这些函数，也可以选择导出调用，具体操作可参考命令行教程。

mxcad 提供的交互绘制对应图形的函数以及命令列表： | 函数 | 命令 | 说明 | |------|------|------| | drawLine | Mx_Line | 绘制直线 | | drawArc | Mx_Arc | 绘制圆弧 | | drawCircle | Mx_Circle | 绘制圆 | | drawEllipse | Mx_Ellipse | 绘制椭圆 | | drawEllipticalArc | Mx_EllipseArc | 绘制椭圆弧 | | drawMText | | 绘制多行文本 | | drawText | | 绘制多行文本 | | drawPolygon | Mx_Polygon | 绘制正多边形 | | drawPolyLine | Mx_Pline | 绘制多义线 | | drawRectang | Mx_Rectang | 绘制矩形 |

:::tip 提示 在ESM模块化的情况下，你需要引入对应的函数才能调用对应的命令。 :::

演示

效果：

• 在命令行输入“Mx_Arc”命令，点击enter键执行命令

• 再根据命令行输出的提示步骤绘制圆弧

:::demo

import {  McObject, drawArc } from "mxcad"
import { MxFun } from "mxdraw"

export default () => {
    const mxcad = new McObject()
    mxcad.create({
      canvas: "#myCanvas",
      locateFile: (fileName: string)=> {
            // CDN 加载必须使用wasm/2d-st中的资源、因为github的限制无法使用wasm/2d 资源
            // 需要使用wasm/2d需要遵循浏览器同源策略或使用其他手段规避浏览器同源策略
            return "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName
      },
      // 加载字体的目录位置
      fontspath: self.location.origin + "/mxcad_docs/fonts",
      // 加载转换后的图纸文件
      fileUrl: self.location.origin + "/mxcad_docs/test2.mxweb",
      onOpenFileComplete:()=>{
            const inputBox: any = document.getElementById("myInput")
            const cmdWindow: any = document.getElementById("myArea")

            // 监听命令行输入
            let inputText = ""
            inputBox.oninput = () => {
                inputText = inputBox.value
            }
            inputBox.onkeydown = (e) => {
                MxFun.setCommandLineInputData(inputText, e.keyCode)
                if (e.keyCode === 13) inputText = inputBox.value = ""
            }
            // 显示命令行消息变化
            MxFun.listenForCommandLineInput(({
                msCmdTip,
                msCmdDisplay,
                msCmdText
            }) => {
                inputText = msCmdText
                cmdWindow.value = msCmdDisplay + "\n" + msCmdTip
                cmdWindow.scrollTop = cmdWindow.scrollHeight
            })
            // 注册命令
            MxFun.addCommand("Mx_Arc", async () => drawArc());
            }
    })
    return (<div style="height: 650px; overflow: hidden;">
        <div style="height: 500px; overflow: hidden;"><canvas id="myCanvas"></canvas></div>
        <div style="width: 100%;height: 150px;margin:10px 0px">
        <textarea style="width: 100%;height: 100px;background-color: #000;color: #fff;border-radius: 5px" id="myArea" readonly="true"></textarea>
        <input style="width:100%;height:30px;background-color: #000;color: #fff;" id="myInput"/>
        </div>
    </div>)
}

:::