QQ登录

只需一步,快速开始

快捷登录

登录 或者 注册 请先

UG爱好者

查看: 712|回复: 1

[图文教程] 在线CAD的SDK如何集成到网页系统-关于MxCad项目二次开发插件集成

[复制链接]

中尉

Rank: 5Rank: 5

299

主题

318

帖子

3974

积分

活跃会员

发表于 2023-9-6 09:10:27 | 显示全部楼层 |阅读模式
前言
1.很多单位拥有着数量庞大的DWG图纸,部门之间传统的图纸管理和沟通,效率较为低下,而将CAD图纸的浏览,编辑,审图,签章等工作集成到自己的网页系统,将会显著提高工作效率和企业的竞争力。
集成到网页系统需要我们在后台服务器部署web cad sdk,部署后的操作界面效果如下:
1.png
2.在线CAD功能测试demo:https://demo.mxdraw3d.com:3000/mxcad/

前端项目二次开发插件集成:
第一步: 下载MxDraw云图开发包https://www.mxdraw.com/download.html
2.png
第二步: 解压打开目录找到MxDrawCloudServer\SRC\TsWeb\public\mxcad 目录所在位置这里就是该项目的打包后的项目位置
第三步: 修改配置mxUiConfig.json文件和mxServerConfig.json如下图:
3.png
文件可根据自己的需求去修改一些固定配置。
第四步: 再到plugins目录下创建一个testPlugin.js文件,然后我们可用在对应的config.json文件中配置plugins属性, 新增一个testPlugin字符串。
第五步: 在testPlugin.js 写任意的js代码, 项目都会运行,这个时候你可以访问window属性中的Mx、mxcad、Vue 它们分别是mxdraw、mxcad、vue的默认导出。
具体如何使用mxdraw和mxcad库参考文档:
https://mxcadx.gitee.io/mxdraw_docs/start/abstract.html
https://mxcadx.gitee.io/mxcad_docs/zh/


如果开发的插件比较复杂,需要用到ts
我们专门提供了一个可用调试和打包的完整集成了项目插件的demo。你可用下载它来二次集成开发。
下载地址:https://gitee.com/mxcadx/mxdraw-article/blob/master/MxCad项目二次开发插件集成/MxCADAppVuetify3.zip
下载好后先解压, 有一个dist目录和createPlugin目录, dist表示项目打包后的资源, createPlugin表示二次开发集成的插件项目。
我们命令行先执行cd createPlugin 进入该目录然后运行npm i或者yarn 安装依赖然后我们就可以直接运行npm run dev 进行调试,如下图:
4.png
npm run build 进行打包, 打包后的文件在最开始解压的dist目录下的plugins目录下。
我们可以进入src目录下查看源码, 这个示例是用Vue组件写的一个弹框然后通过命令调用, 可以在页面中显示的命令输入框中输入MyTestDraw就会弹出对应的弹框vue组件是基于dist打包后资源中的vue3, 我们可以通过示例代码了解如何在插件中定义和使用vue组件如下图:
5.png


该项目electron桌面版本
对应electron版本,前端二次开发的插件项目不变,唯一的区别就算electron版本在window上新增了MxElectronAPI对象, 提供了和主线程通信的能力。
electron 打包后的项目下载:
https://gitee.com/mxcadx/mxdraw-article/blob/master/MxCad项目二次开发插件集成/MxCADAppElectron.zip
同样的下载解压安装依赖electron项目的插件基于vite 打包 对应的vite 配置: vite.plugins.config.ts步骤如下:
1.创建src/plugins 目录, 如果存在则无需创建
2.创建一个插件目录 如testPlugin, 然后在该目录下创建一个index.ts作为该插件入口文件
3.vite.plugins.config.ts 新增插件入口配置pluginEntryFileName: ["plugins/testPlugin/index.ts"]
4.运行命令调试: dev:plugins
5.运行命令打包: build:plugins
6.如果在testPlugin创建preload.ts 并默认导出一个对象,这个对象存放是用来与页面通信的API这里如果比较难理解可以参考预加载脚本:https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-preload
默认导出的对象就是在通过contextBridge.exposeInMainWorld定义的前端 window.MxElectronAPi.插件目录名称(命名空间)对象同理preload2d.ts导出的对象会覆盖preload.ts导出对象中属性相同的值,但是preload2d.ts只在显示2d图纸的页面中有效preload3d.ts与preload2d.ts不同的是它只作用于3d显示页面preload.ts则是公共的
7.plugins可以存在很多插件, 它下面的每一个目录都是一个插件,这个插件的目录名就是命名空间名称。 前端页面访问的对象也是window.MxElectronAPI.命名空间名称以下electron项目中对应目录的描述:
表格截图.png
DEMO源码:
https://gitee.com/mxcadx/mxdraw-article/tree/master/MxCad%E9%A1%B9%E7%9B%AE%E4%BA%8C%E6%AC%A1%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6%E9%9B%86%E6%88%90



有奖推广贴子: 

回复

使用道具 举报

上尉

Rank: 6Rank: 6

1

主题

2248

帖子

6056

积分
发表于 2024-4-19 08:42:34 | 显示全部楼层

非常感谢分享
回复 支持 反对

使用道具 举报

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

本版积分规则

 
 
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-7-24 22:21

返回顶部