QQ登录

只需一步,快速开始

快捷登录

登录 或者 注册 请先

UG爱好者

查看: 688|回复: 1
打印 上一主题 下一主题

[经典资料] Web cad(私有云CAD SDK)中实现插入图块的方法

[复制链接]

中尉

Rank: 5Rank: 5

299

主题

319

帖子

3984

积分

活跃会员

跳转到指定楼层
楼主
发表于 2023-10-7 10:29:50 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
前言
CAD制图的过程中会有很多重复的图元需要绘制,为了节约绘制时间,我们会把部分图元保存成图块,下次就可以快速和多次的插入到相应的图纸位置中,提高绘图效率。
网页版CAD页面中实现插入图块功能,首先需要将这个图块dwg文件转换成mxweb文件我们需要下载MxDraw云图开发包,根据入门文档的操作, 实现dwg文件到mxweb文件的转换, 让它支持在页面中显示。
载试用包之后,我们按下图所示将dwg文件转成mxweb文件:

更多关于图纸转换程序的使用说明可以参考入门文档或者mxcad文档-图纸转换
有了mxweb文件,就可以通过mxcad npm包实现插入图块功能。
注意:无论是图纸还是图块 最终转换后都是mxweb文件。
在阅读了mxcad文档-快速入门后, 你可以自己按照步骤去实现页面加载mxweb文件显示图纸也可以直接下载或者参考我们提供的示例源码
实现插入图块功能
我们就基于示例源码中vite目录这个由vite打包工具使用mxcad的初始化示例项目为例 来开始实现一个插入图纸的功能代码如下:
  1. <font face="微软雅黑" size="3">import { createMxCad } from "mxcad"
  2. (async ()=> {
  3.     const mxcad = await createMxCad({
  4.         canvas: "#myCanvas",
  5.         locateFile: (fileName) => {
  6.             return new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href
  7.         },
  8.         fileUrl: new URL("../public/test2.mxweb", import.meta.url).href,
  9.         fontspath: new URL("../node_modules/mxcad/dist/fonts", import.meta.url).href,
  10.     })

  11.     // 这里用定时器是保证稳定的测试, 正常来说是在需要的时候调用就好
  12.     setTimeout(async () => {
  13.         // 加载图块转换的mxweb文件
  14.         let blkrecId = await mxcad.insertBlock(new URL("../public/tree.mxweb", import.meta.url).href, "tree");

  15.         // id是否有效
  16.         if (!blkrecId.isValid()) {
  17.             return;
  18.         }
  19.         // 实例化一个块
  20.         let blkRef = new McDbBlockReference();
  21.         // 将加载的图块ID赋值给它
  22.         blkRef.blockTableRecordId = blkrecId;
  23.         // 然后计算一下这个块的包围盒
  24.         let box = blkRef.getBoundingBox();
  25.         if (box.ret) {
  26.             let dLen = box.maxPt.distanceTo(box.minPt);
  27.             // 如果图块包围盒特别小
  28.             if (dLen > 0.00001) {
  29.                 // 则需要放大
  30.                 blkRef.setScale(mxcad.getMxDrawObject().screenCoordLong2Doc(100) / dLen);
  31.             }
  32.         }

  33.         // 这里开始做用户交互
  34.         let getPoint = new MxCADUiPrPoint();
  35.         getPoint.setMessage("\指定插入基点");

  36.         // 动态绘制这个图块
  37.         getPoint.setUserDraw((v, worldDraw) => {
  38.             blkRef.position = v;
  39.             worldDraw.drawMcDbEntity(blkRef);
  40.         });

  41.         // 用户鼠标点击时得到位置
  42.         let pt = await getPoint.go();
  43.         if (!pt) return;
  44.         blkRef.position = pt;
  45.         // 绘制这个图块
  46.         mxcad.drawEntity(blkRef);
  47.     }, 1000)
  48. })()</font>
复制代码

效果如下图:

这样我们就完成了图块的插入。
DEMO源码:
https://gitee.com/mxcadx/mxdraw-article/blob/master/%E6%8F%92%E5%85%A5%E5%9B%BE%E5%9D%97%E5%8A%9F%E8%83%BD/demo.zip



有奖推广贴子: 

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

 
 
QQ:1359218528
工作时间:
9:00-17:00
 
微信公众号
手机APP
机械社区
微信小程序

手机版|UG爱好者论坛 ( 京ICP备10217105号-2 )    论坛管理员QQ:1359218528

本站信息均由会员发表,不代表本网站立场,如侵犯了您的权利请联系管理员,邮箱:1359218528@qq.com  

Powered by UG爱好者 X3.2  © 2001-2014 Comsenz Inc. GMT+8, 2024-11-22 11:37

返回顶部