在线CAD的命令行驱动与参数化绘图使用教程（网页CAD API）

<!-- 绘图容器，占据大部分高度 -->
<div style="height: 80vh; overflow: hidden;">
  <canvas id="myCanvas"></canvas>
</div>
<!-- 命令行容器，底部固定区域 -->
<div style="width: 100%; height: 12vh;">
  <!-- 只读文本域，用于显示历史消息和提示（黑色背景，绿色文字风格） -->
  <textarea 
    id="myArea" 
    style="width: 100%; height: 8vh; background-color: #000; color: #fff; border-radius: 5px" 
    readonly="true">
  </textarea>
  <!-- 输入框，用户在此输入命令 -->
  <input 
    id="myInput" 
    style="width:100%; height: 2vh; background-color: #000; color: #fff;" 
  />
</div>

import { MxFun } from "mxdraw"
// 1. 获取DOM元素：获取我们在HTML中定义的输入框和消息显示区
const inputBox = document.getElementById("myInput")
const cmdWindow = document.getElementById("myArea")
// 2. 监听用户输入：准备一个变量存储当前输入的内容
let inputText = ""
inputBox.oninput = () => {
  inputText = inputBox.value
}
// 3. 监听键盘事件：当用户按下键盘（回车或普通按键）时
inputBox.onkeydown = (e) => {
  // 将用户的输入内容和按键码传给MxCAD内核进行处理
  MxFun.setCommandLineInputData(inputText, e.keyCode)​
  // 如果按下的是回车键 (keyCode 13)，代表命令发送
  if (e.keyCode === 13) {
    // 清空输入框，准备下一次输入
    inputText = inputBox.value = ""
  }
}​
// 4. 监听内核消息：监听MxCAD内核返回的消息变化
MxFun.listenForCommandLineInput(({
  msCmdTip,      // 提示信息（如：指定下一点）
  msCmdDisplay,  // 历史消息显示（之前的所有对话）
  msCmdText      // 当前命令文本
}) => {
  // 将内核返回的消息拼接并显示在我们的HTML元素中
  cmdWindow.value = msCmdDisplay + "\n" + msCmdTip
  // 自动滚动到底部，确保用户看到最新消息
  cmdWindow.scrollTop = cmdWindow.scrollHeight
})

import { MxFun } from "mxdraw"
// 注册命令：名称为 "Mx_test"
// 以后用户在底部输入框输入 Mx_test，就会执行后面的箭头函数
MxFun.addCommand("Mx_test", async () => {
  // 这里暂时留空，具体的绘图逻辑写在下一节
  alert("命令已触发！");
});

import { MxFun } from "mxdraw"
// 模拟用户输入执行：这行代码会触发上面注册的命令
// 相当于用户在命令行输入了 "Mx_test" 并按下了回车
MxFun.sendStringToExecute("Mx_test");

import { MxCpp } from "mxcad";
const mxcad = MxCpp.getCurrentMxCAD(); // 获取当前CAD编辑器实例
mxcad.newFile(); // 创建新画布
// 绘制直线：坐标和长度完全写死
// 这条线永远是从 (1000, 800) 画到 (-1000, -800)
mxcad.drawLine(1000, 800, -1000, -800) 

import { MxCADUiPrPoint, McDbLine } from "mxcad"
const getPoint = new MxCADUiPrPoint() // 创建获取点对象
getPoint.go().then((point)=> { // 第一次获取点（起点）
  // 设置动态绘制回调函数
  getPoint.setUserDraw((currentPoint, pWorldDraw)=> {
    // currentPoint: 实时变化的鼠标坐标
    // pWorldDraw: 绘图工具
    if(!point) return // 防止起点为空    
    // 1. 创建图形：创建一条从起点到当前鼠标点的线
    const line = new McDbLine(point, currentPoint)
    // 2. 绘制图形：将这条线画在屏幕上（临时）
    pWorldDraw.drawMcDbEntity(line)
  })  
  // 等待第二次点击（终点）
  // 在等待期间，上面的 setUserDraw 会高频触发，实现“拖拽预览”效果
  getPoint.go()
})

import { McDbText, MxCADUiPrDist, MxCADUiPrPoint, MxCADUiPrString, MxCADUiPrBase, MxCpp } from "mxcad";
​
async function Mx_drawText() {
    // 1. 初始化：创建一个空的文字对象，稍后我们将填充它的数据
    const text = new McDbText();
​
    // --- 第一步：获取文字内容 ---
    // 创建“获取字符串”的交互对象
    const getStr = new MxCADUiPrString();
    // 设置命令行提示语
    getStr.setMessage("请输入文字内容:");
    // 等待用户输入（await会暂停函数，直到用户按下回车或取消）
    const str = await getStr.go();
    // 如果用户按了Esc取消，则直接退出函数
    if (!str) return;
    // 将用户输入的内容赋值给文字对象
    text.textString = str;
​
    // --- 第二步：获取文字高度 ---
    // 创建“获取距离”的交互对象
    const getDist = new MxCADUiPrDist();
    getDist.setMessage("请输入文字高度:");
    // 等待用户输入距离（可以通过鼠标拉距或键盘输入数值）
    const height = await getDist.go();
    if (!height) return;
    // 将获取到的数值赋值给文字高度
    text.height = getDist.value();
​
    // --- 第三步：动态预览与定点 ---
    // 创建“获取点”的交互对象
    const getPoint = new MxCADUiPrPoint();
    getPoint.setMessage("请点击确定文字位置:");
​
    // 【核心】设置动态绘制回调
    // 当用户移动鼠标时，这个函数会被反复调用
    getPoint.setUserDraw((pt, pw) => {
        // 1. 实时更新文字的位置为当前鼠标坐标(pt)
        text.position = pt;
        text.alignmentPoint = pt;
        // 2. 在预览窗口(pw)中绘制这个临时的文字
        // 用户看到的“橡皮筋”效果就是在这里产生的
        pw.drawMcDbEntity(text);
    });
​
    // 等待用户点击鼠标确定最终位置
    const position = await getPoint.go();
    if (!position) return;
​
    // --- 第四步：正式绘制 ---
    // 获取当前的CAD编辑器实例
    const mxcad = MxCpp.getCurrentMxCAD();
    // 将最终确定的文字对象添加到图纸数据库中（这一步才是保存）
    mxcad.drawEntity(text);
}
// --- 注册命令 ---
// 将上面写好的函数注册为一个命令
// 用户在命令行输入 "Mx_drawText" 即可触发
MxFun.addCommand("Mx_drawText", Mx_drawText);