网页CAD二次开发（WEB CAD SDK）实现单行和多行文字的绘制

CAD画图

前言
今天讲一下如何利用WEB CAD SDK来绘制单行文字和多行文字，在使用mxcad绘制文字之前请先按照mxcad文档将cad图纸在网页上渲染出来, 如果没有阅读mxcad文档可能无法理解后续代码。
在线CAD功能测试：https://demo.mxdraw3d.com:3000/mxcad/
绘制文字和多行文字
单行文字代码如下:

1. import { McDbMText, McDbText, MxCADResbuf, MxCADSelectionSet, MxCADUiPrPoint, createMxCad } from "mxcad"
   
2. window.onload = async () => {
   
3.     const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st"
   
4.     const mxcad = await createMxCad({
   
5.         canvas: "#myCanvas",
   
6.         locateFile: (fileName) => {
   
7.             return new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href
   
8.         },
   
9.         fileUrl: new URL("../public/test2.mxweb", import.meta.url).href,
   
10.         fontspath: new URL("../node_modules/mxcad/dist/fonts", import.meta.url).href,
    
11.     })
    
12. 
    
13.     const getPoint = new MxCADUiPrPoint()
    
14.     const point = await getPoint.go()
    
15.     if(point) {
    
16.         const text = prompt("输入文字")
    
17.         if (text) {
    
18.             const isNewLine = /\n/.test(text)
    
19.             if (isNewLine) {
    
20.                 mxcad.drawMText(point.x, point.y, text.replace(/\n/g, "\\P"), 10000, 0, 0, 1)
    
21.             } else {
    
22.                 mxcad.drawText(point.x, point.y, text, 10000, 0, 0, 1)
    
23.             }
    
24.         }
    
25.     }
    
26.   
    
27.     alert("开始编辑文字")
    
28.     getPoint.clearLastInputPoint()
    
29.     const point1 = await getPoint.go()
    
30.     if(point1) {
    
31.         const filter = new MxCADResbuf()
    
32.         filter.AddMcDbEntityTypes("TEXT,MTEXT")
    
33.         const select = new MxCADSelectionSet()
    
34.         const objId = select.item(select.pointSelect(point1.x, point1.y, filter))
    
35.         const ent = objId.getMcDbEntity()
    
36.         let txt:string | undefined;
    
37.         if(ent instanceof McDbText){
    
38.             txt = (ent as McDbText).textString;
    
39.         }
    
40.         else if(ent instanceof McDbMText){
    
41.             txt = (ent as McDbMText).contents;
    
42.         }
    
43. 
    
44.         if(!txt) return;
    
45.         const text = prompt("编辑文字 原文本: " + txt)
    
46.         if(!text) return
    
47.         if(ent instanceof McDbText){
    
48.             (ent as McDbText).textString = text;
    
49.           }
    
50.           else if(ent instanceof McDbMText){
    
51.             (ent as McDbMText).contents = text.replace(/\n/g, "\\P");
    
52.           }
    
53.     }
    
54. }

复制代码

梳理一下绘制编辑文字思路
我们必须要创建一个mxcad的控制来显示图纸，其中变量mxcad是通过createMxCad得到的实例控件,具体的参数配置和详细的注意事项请参考mxcad入门文档
要绘制文字首先需要获取鼠标的点击, 得到一个CAD坐标, 有了坐标就知道这个文字绘制在什么位置了，这里使用mxcad提供的 MxCADUiPrPoint类用于获取鼠标点击, 得到对应的CAD坐标。
然后用浏览器提供的默认输入弹框prompt弹出了一个输入框，可以通过它来得到文字。你也可以通过其他方式实现这样的一个功能。

注意：
mxcad.drawText是绘制单行文字的方法
mxcad.drawMText是绘制多行文的方法。

多行文字换行的话，需要将\n 换成\P，所以多行文字中出现\P 就会自动换行。
注释：按照AutoCAD多行文字换行的规则，如果要输入“\P”字符串，就换成“\\P”输入
而如果是单行文字存在换行\n会被显示成63, 你可能需要将换行符\n替换成""空字符串来解决这个问题。
以上是绘制文字的实现说明，发现不会的API函数可以前往mxcad文档搜索对应的关键词。
关于编辑文字的实现说明
首先要在一张CAD图纸中编辑文字， 我们和绘制文字一样，需要鼠标点击这个文字得到它的坐标位置。其中getPoint.clearLastInputPoint表示的是清空上一个输入点，因为那是绘制文字的输入点，我们现在并不需要。
然后我们需要筛选，看看点击的是不是文字，我们可以通过mxcad提供的MxCADResbuf类的实例方法AddMcDbEntityTypes来添加CAD中的类型标识。文字的类型标识就是TEXT和多行文字MTEXT 按照规则用 ，隔开。
然后我们就可以在CAD图纸中选择需要的文字了。
在mxcad中提供了MxCADSelectionSet类来实现选择图形对象相关的功能。我们这里选择用MxCADSelectionSet.pointSelectCAD坐标点的方式选择我们的文字，加上我们的筛选条件MxCADResbuf的实例, 就可以得到一个索引。
我们通过MxCADSelectionSet.item得到具体的图形对象实例。
我们可以通区分不同的构造类 来区分不同的图形对象实例，比如McDbText和McDbMText类就是单行文字和多行文字的构造类。
最后我们还是用prompt得到一个新的输入， 将新输入的文字内容赋值给文字对象就完成了文字的编辑。
效果图:







最后复制源文本然后补充了\P666

最后附上该文章的演示demo源码:
https://gitee.com/mxcadx/mxdraw-article/blob/master/实现绘制文字/demo.zip