找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 243|回复: 6

[分享] 在线CAD二次开发(WEB CAD SDK)实现单行和多行文字的绘制

[复制链接]
发表于 2023-12-1 11:07:25 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
前言
今天讲一下如何利用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");
          }
    }
}

梳理一下绘制编辑文字思路
我们必须要创建一个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得到具体的图形对象实例。
我们可以通区分不同的构造类 来区分不同的图形对象实例,比如McDbTextMcDbMText类就是单行文字和多行文字的构造类。
最后我们还是用prompt得到一个新的输入, 将新输入的文字内容赋值给文字对象就完成了文字的编辑。
效果图:
1.png
2.png
3.png
最后复制源文本然后补充了\P666
4.png



论坛插件加载方法
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;
如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子标题加上【已解决】;
如何回报帮助你解决问题的坛友,一个好办法就是给对方加【D豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!

已领礼包: 225个

财富等级: 日进斗金

发表于 2023-12-2 16:14:51 | 显示全部楼层
谢谢分享!!!!!!!
论坛插件加载方法
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;
如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子标题加上【已解决】;
如何回报帮助你解决问题的坛友,一个好办法就是给对方加【D豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!
回复

使用道具 举报

已领礼包: 225个

财富等级: 日进斗金

发表于 2023-12-3 08:18:38 | 显示全部楼层
谢谢分享!!!!!
论坛插件加载方法
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;
如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子标题加上【已解决】;
如何回报帮助你解决问题的坛友,一个好办法就是给对方加【D豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!
回复

使用道具 举报

已领礼包: 225个

财富等级: 日进斗金

发表于 2023-12-4 08:00:55 | 显示全部楼层
谢谢分享!!!!!
论坛插件加载方法
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;
如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子标题加上【已解决】;
如何回报帮助你解决问题的坛友,一个好办法就是给对方加【D豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!
回复

使用道具 举报

已领礼包: 225个

财富等级: 日进斗金

发表于 2023-12-5 17:36:48 | 显示全部楼层
谢谢分享!!!!
论坛插件加载方法
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;
如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子标题加上【已解决】;
如何回报帮助你解决问题的坛友,一个好办法就是给对方加【D豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!
回复

使用道具 举报

已领礼包: 225个

财富等级: 日进斗金

发表于 2023-12-6 08:35:57 | 显示全部楼层
谢谢分享!!!!!!
论坛插件加载方法
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;
如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子标题加上【已解决】;
如何回报帮助你解决问题的坛友,一个好办法就是给对方加【D豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!
回复

使用道具 举报

已领礼包: 225个

财富等级: 日进斗金

发表于 2023-12-15 08:15:00 | 显示全部楼层
感谢分享!!!
论坛插件加载方法
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;
如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子标题加上【已解决】;
如何回报帮助你解决问题的坛友,一个好办法就是给对方加【D豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|申请友链|Archiver|手机版|小黑屋|辽公网安备|晓东CAD家园 ( 辽ICP备15016793号 )

GMT+8, 2024-2-28 11:48 , Processed in 0.448521 second(s), 42 queries , Gzip On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表