网页CAD二次开发（WEB CAD SDK）实现单行和多行文字的绘制.docx
网页CAD二次开发(WEBCADSDK)实现单行和多行文字的绘制刖昌今天讲一下如何利用WEBCADSDK来绘制单行文字和多行文字，在使用mxcad绘制文字之前请先按照mxcad文档(httpsmxcadx.gitee.iomxcad-docszh1.%E6%8C%87%E5%8D%971.%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.htm1)WCad图名氏在网页上渲染出来，如果没有阅读mxcad文档可能无法理解后续代码。在线CAD功能测试：:3000/mxcad/绘制文字和多行文字单行文字代码如下：importMcDbMText,McDbText,MxCADResbufzMxCADSeIectionSetzMxCADUiPrPoint,CreateMxCadfrom"mxcad"window.on1oad=async()=>constmode="SharedArrayBuffer"inwindow?"2d":',2d-st"canvas:,myCanvas,zIocateFiIe:(fi1eName)=>returnnewUR1(7node_modu1es/mxcad/dist/wasm/$mode/$fi1eNameimport.meta.ur1).href,fi1eUr1:newUR1(".pub1ictest2.mxweb",import.meta.uri).hreffontspath:newUR1(,.node-modu1esmxcaddistfonts,zimport.meta.ur1).href;)constgetPoint=newMxCADUiPrPointOconstpoint=awaitgetPoint.go()if(point)consttext=PrOmPt("输入文字”)if(text)constisNew1ine=.test(text)if(isNew1ine)mxcad.drawMText(point.x,point.y,text.rep1ace(g,P"),10000z0zO11)e1semxcad.drawText(point.x,point.yztext,10000,0z0z1)a1ert("开始编辑文字”)getPoint.c1ear1astInputPoint()constpoint1=awaitgetPoint.go()if(point1)constfi1ter=newMxCADResbufQfi1ter.AddMcDbEntityTypes(',TEXTzMTEXT")constse1ect=newMxCADSe1ectionSet()constobj1d=se1ect.item(se1ect.pointSe1ect(point1.xzpoint1.y,fi1ter)constent=objId.getMcDbEntity()1ettxtstringundefined;if(entinstanceofMcDbText)txt=(entasMcDbText).textString;)e1seif(entinstanceofMcDbMText)txt=(entasMcDbMText).contents;)if(!txt)return;consttext=PrOmPt("编辑文字原文本,+txt)if(!text)returnif(entinstanceofMcDbText)(entasMcDbText).textString=text;)e1seif(entinstanceofMcDbMText)(entasMcDbMText).contents=text.rep1ace(g,"P")；)梳理一下绘制编辑文字思路我们必须要创建一个mxcad的控制来显示图纸,其中变量mxcad(https:/mxcadx.gitee.io/mxcad_docs/api/c1asses/McObject.htm1)是通过CreateMxCad(https:/mxcadx.gitee.io/mxcad_docs/api/README.htm1#createmxcad)得到的实例控件,具体的参数配置和详细的注意事项请参考mxcad入门文档(httpsmxcadx.gitee.iomxcad-docszh1.%E6%8C%87%E5%8D%971.%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.htm1)要绘制文字首先需要获取鼠标的点击，得到一个CAD坐标，有了坐标就知道这个文字绘制在什么位置了，这里使用mxcad提供的MxCADUiPrPoint(https:/mxcadx.gitee.io/mxcad_docs/api/c1asses/MxCADUiPrPoint.htm1#c1ass-mxcaduiprpoint)类用于获取鼠标点击，得到对应的CAD坐标。然后用浏览器提供的默认输入弹框prompt弹出了一个输入框,可以通过它来得到文字。你也可以通过其他方式实现这样的一个功能。注意：mxcad.drawText(https:/mxcadx.gitee.io/mxcad_docs/api/c1asses/McObject.htm1#drawtext)是绘制单行文字的方法mxcad.drawMText(https:/mxcadx.gitee.io/mxcad_docs/api/c1asses/McObject.htm1#drawmtext)是绘制多行文的方法。多行文字换行的话，需要将n换成P,所以多行文字中出现P就会自动换行。注释：按照AutoCAD多行文字换行的规则，如果要输入P字符串,就换成''P输入而如果是单行文字存在换行n会被显示成63,你可能需要将换行符n替换成“空字符串来解决这个问题。以上是绘制文字的实现说明，发现不会的API函数可以前往mxcad文档(https:/mxcadx.gitee.io/mxcad_docs/api/README.htm1)搜索对应的关键词。关于编辑文字的实现说明首先要在一张CAD图纸中编辑文字，我们和绘制文字一样，需要鼠标点击这个文字得到它的坐标位置。其中getPoint.c1ear1ast1nputPoint表示的是清空上一个输入点，因为那是绘制文字的输入点，我们现在并不需要。然后我们需要筛选，看看点击的是不是文字，我们可以通过mxcad提供的MxCADResbuf(https:/mxcadx.gitee.io/mxcad_docs/api/c1asses/MxCADResbuf.htm1#c1ass-mxcadresbuf)类的实例方法AddMcDbEntityTypes(https:/mxcadx.gitee.io/mxcad_docs/api/c1asses/MxCADResbuf.htm1addmcdbentitytypes)来添力口CAD中的类型标识。文字的类型标识就是TEXT和多行文字MTEXT按照规则用，隔开。然后我们就可以在CAD图纸中选择需要的文字了。在mxcad中提供了MxCADSeIectionSet(https:/mxcadx.gitee.io/mxcad_docs/api/c1asses/MxCADSe1ectionSethtm1#c1ass-mxcadse1ectionset)类来实现选择图形对象相关的功能。我们这里选择用MxCADSe1ectionSet.pointSe1ect(https:/mxcadx.gitee.io/mxcad_docs/api/c1asses/MxCADSe1ectionSethtm1#pointse1ect)CAD坐标点的方式选择我们的文字，加上我们的筛选条件MXCADReSbUf的实例，就可以得到一个索引。我们通过MxCADSeIectionSetitem(https:/mxcadx.gitee.io/mxcad_docs/api/c1asses/MxCADSe1ectionSet.htm1#item)得到具体的图形对象实例。我们可以通区分不同的构造类来区分不同的图形对象实例，比如McDbText(https:/mxcadx.gitee.io/mxcad_docs/api/c1asses/McDbText.htm1#c1ass-mcdbtext)和McDbMText(https:/mxcadx.gitee.io/mxcad_docs/api/c1asses/McDbMText.htm1#c1ass-mcdbmtext)类就是单行文字和多行文字的构造类。最后我们还是用prompt得到一个新的输入,将新输入的文字内容赋值给文字对象就完成了文字的编辑。效果图:127.0.0.1:5173但元素控制台源代码+输入文字30top*e筛选器仅限选定的上下文在控制台中组合相似）闻S1的Cc)RS螭MxDrawVersionz1.0(223-9-2612:09)MxCADTryVersion:7.(223-9-2611:30)MxTip:usewebg12正在用txt.shx替换comp1ex.shx正在用txtshx替换Itypeshp.shx正在用txt.shx替换romans.shx正在用txt.shx替换romant.shx正在用txt.shx替换simp1.shx正在用txt.shx替换simp1ex.shx正在用hztxt.5hx替换正在用hztxt.5hx替换hztxt.shx正在用hztxt吗hx替换>MxCADTES7hztxt1.shx多行文本控制台输入然后复制时HS秆枇#臼最后复制源文本然后补充了P666最后附上该文章的演示demo源码:/demo.zip
