马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有账号?立即注册
×
前言
今天讲一下如何利用WEB CAD SDK来绘制单行文字和多行文字,在使用mxcad绘制文字之前请先按照mxcad文档将cad图纸在网页上渲染出来, 如果没有阅读mxcad文档可能无法理解后续代码。
绘制文字和多行文字单行文字代码如下: import { McDbMText, McDbText, MxCADResbuf, MxCADSelectionSet, MxCADUiPrPoint, createMxCad } from "mxcad" window.onload = async () => { const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st" const mxcad = await createMxCad({ canvas: "#myCanvas", locateFile: (fileName) => { return new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href }, fileUrl: new URL("../public/test2.mxweb", import.meta.url).href, fontspath: new URL("../node_modules/mxcad/dist/fonts", import.meta.url).href, }) const getPoint = new MxCADUiPrPoint() const point = await getPoint.go() if(point) { const text = prompt("输入文字") if (text) { const isNewLine = /\n/.test(text) if (isNewLine) { mxcad.drawMText(point.x, point.y, text.replace(/\n/g, "\\P"), 10000, 0, 0, 1) } else { mxcad.drawText(point.x, point.y, text, 10000, 0, 0, 1) } } } alert("开始编辑文字") getPoint.clearLastInputPoint() const point1 = await getPoint.go() if(point1) { const filter = new MxCADResbuf() filter.AddMcDbEntityTypes("TEXT,MTEXT") const select = new MxCADSelectionSet() const objId = select.item(select.pointSelect(point1.x, point1.y, filter)) const ent = objId.getMcDbEntity() let txt:string | undefined; if(ent instanceof McDbText){ txt = (ent as McDbText).textString; } else if(ent instanceof McDbMText){ txt = (ent as McDbMText).contents; } if(!txt) return; const text = prompt("编辑文字 原文本: " + txt) if(!text) return if(ent instanceof McDbText){ (ent as McDbText).textString = text; } else if(ent instanceof McDbMText){ (ent as McDbMText).contents = text.replace(/\n/g, "\\P"); } } }
梳理一下绘制编辑文字思路要绘制文字首先需要获取鼠标的点击, 得到一个CAD坐标, 有了坐标就知道这个文字绘制在什么位置了,这里使用mxcad提供的 MxCADUiPrPoint类用于获取鼠标点击, 得到对应的CAD坐标。 然后用浏览器提供的默认输入弹框prompt弹出了一个输入框,可以通过它来得到文字。你也可以通过其他方式实现这样的一个功能。 注意: 多行文字换行的话,需要将\n 换成\P,所以多行文字中出现\P 就会自动换行。 注释:按照AutoCAD多行文字换行的规则,如果要输入“\P”字符串,就换成“\\P”输入
而如果是单行文字存在换行\n会被显示成63, 你可能需要将换行符\n替换成""空字符串来解决这个问题。
以上是绘制文字的实现说明,发现不会的API函数可以前往mxcad文档搜索对应的关键词。
关于编辑文字的实现说明首先要在一张CAD图纸中编辑文字, 我们和绘制文字一样,需要鼠标点击这个文字得到它的坐标位置。其中getPoint.clearLastInputPoint表示的是清空上一个输入点,因为那是绘制文字的输入点,我们现在并不需要。 最后我们还是用prompt得到一个新的输入, 将新输入的文字内容赋值给文字对象就完成了文字的编辑。 效果图:
最后复制源文本然后补充了\P666
|