（ERP网页系统集成CAD）网页CAD中配置属性的使用教程

MxDraw

一、前言

Mxcad SDK 能够在线预览编辑CAD图纸，用户可根据项目需求选择不同的实现方式，如通过Vite、CDN、webpack分别使用mxcad。如果不清楚mxcad实现在线预览编辑CAD图纸的方法，可参考mxcad开发文档：https://www.mxdraw3d.com/mxcad_docs/zh/。

成功创建mxcad对象后，在后续的开发过程中可能会遇到设置图纸操作习惯、监听图纸完全打开、设置图纸多选等一系列配置，mxcad内部为了方便用户的操作实现了上述一些类配置相关的方法或属性API，用户可自定义设置相关配置来满足自己项目的需求。本章就为大家介绍mxcad中与图纸操作相关的配置属性。

二、配置属性

Mxcad在创建初始就可以直接设置配置属性，在创建mxcad对象的时候配置的属性将作为CAD项目加载的默认设置。下面以在vue3+ts构建的项目中创建mxcad对象并设置初始属性为例。

1. createMxCad()

在创建mxcad对象的时候，可以在createMxCad()方法内设置配置属性。

1. import { onMounted } from "vue";
   
2. import { createMxCad } from "mxcad";
   
3. onMounted(() => {
   
4.   const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st";
   
5.   createMxCad({
   
6.     canvas: "#myCanvas",
   
7.     locateFile: (fileName) => {
   
8.       return new URL(
   
9.         `../../node_modules/mxcad/dist/wasm/${mode}/${fileName}`,
   
10.         import.meta.url
    
11.       ).href;
    
12.     },
    
13.     fileUrl: new URL("../../public/test2.mxweb", import.meta.url).href,
    
14.     fontspath: new URL("../assets/fonts", import.meta.url).href
    
15.   });
    
16. });
    

复制代码

createMxCad方法中的初始必要属性

A. canvas：canvas画布实例的id名

B. locateFile：mxcad的核心依赖mxcad库中`/mxcad/dist/wasm`目录下对应分类(`2d`|`2d-st`)中的 wasm 文件(该文件是c++编译生成的)，其中 2d 目录下为多线程程序、2d-st 目录下为单线程程序，该参数用来指定 wasm 程序的网络路径。

C. fontspath：指定cad图纸中的字体文件加载路径。默认路径为`dist/fonts`，你可以在该目录中添加打开图纸需要的各种字体文件。

D. fileUrl：指定打开mxweb图纸的网络路径。

初始运行效果演示：

其他属性

1.1、openParameter：设置打开文件的参数，可以设置打开文件是否使用缓存，或者是否使用工作线程打开文件等。

1.    // 设置打开文件不使用缓存
   
2.    openParameter:{fetchAttributes:FetchAttributes.EMSCRIPTEN_FETCH_LOAD_TO_MEMORY}

复制代码

1.2、onOpenFileComplete：监听打开文件成功的回调事件，在图纸打开完成后进行的操作可在该方法内执行。

1.    // 在图纸完全打开后控制台输出信息
   
2.    onOpenFileComplete:()=>{
   
3.        console.log('图纸完全打开！')
   
4.    }

复制代码

1.3、viewBackgroundColor：设置视区背景颜色，值为rgb。

1.    // 初始打开图纸的背景颜色设置为白色
   
2.    viewBackgroundColor:{red:255,green:255,blue:255}

复制代码

1.4、browse：是否设置为浏览模式，值为true或1时启用浏览模式，且CAD对象不能选中；值为2时启用浏览模式，CAD对象能选中,但不能夹点编辑；值为false时启用编辑模式。

1.   // 启动用浏览模式,图纸中的CAD对象均不能被选中和编辑
   
2.    browse:true
   
3.    /**
   
4.     或
   
5.     browse:1
   
6.     */

复制代码

1.   // 启动用浏览模式,CAD对象能被选中显示夹点但并不能进行夹点编辑
   
2.    browse:2

复制代码

1.    // 编辑模式，图纸中的所有CAD对象均能被选中编辑
   
2.    browse:flase

复制代码

1.5、middlePan：设置移动视区的操作方式。设置为0,点击鼠标左键移动视区；设置为1,点击鼠标中键移动视区；设置为2,点击鼠标中键和鼠标左键均可移动视区。

1.    // 点击鼠标中键移动视区
   
2.    middlePan:1
   
3.    // middlePan:2
   
4.    // middlePan:0

复制代码

1.6、enableUndo：是否启用回退功能。设置为true则可以调用Mx_Undo命令回退操作；设置为false则禁用回退命令。默认设置为false。

1.    //设置启用回退功能
   
2.    enableUndo：true

复制代码

1.7、enableIntelliSelect：是否启用对象选择功能。设置为true则启用；设置为false则不启用。

1.    // 启用对象选择功能
   
2.    enableIntelliSelect：true

复制代码

1.8、multipleSelect：是否启用多选。设置为true则启用；设置为false则不启用。

1. // 启用多选
   
2.    multipleSelectL:true

复制代码

2.MxFun.setIniset()

由于mxcad是依赖于mxdraw去显示的图纸，因此mxdraw中也提供了实现各种初始配置的方法：MxFun.setIniset()，我们可以在该方法中配置更多CAD项目的初始配置，其调用方法如下：

1. import { MxFun } from "mxdraw"
   
2. MxFun.setIniset({
   
3.     // 启动夹点编辑功能, 开启单选图形(mxcad默认开启)
   
4.     "EnableGripEidt": true,
   
5.     // 开启多选
   
6.     "multipleSelect": true
   
7.     /**
   
8.      * ......可配置更多iniConfig参数
   
9.      */
   
10. })

复制代码

常用iniConfig参数

2.1、 EnableIntelliSelect：是否启用智能选择。设置为true则启用；设置为false则不启用。

1. // 启用智能选择
   
2.    EnableIntelliSelect:true

复制代码

2.2、EnableGripEdit：是否启动夹点编辑。设置为true或1表示启用，设置为0或fase表示禁用，设置为2表示选中对象后只显示夹点，但不响应响应夹点编辑。

1. // 启用夹点编辑
   
2.    EnableGripEdit:true

复制代码

2.3、multipleSelect： 是否启动多选，启动多选设置后用户一次选择多个实体。设置为true则启用；设置为false则不启用，其默认值是false。

1.    // 启动多选-框选
   
2.    multipleSelect:true

复制代码

2.4、IntelliSelectType：多选方式控制。设置为1：多选，但不支持连续多选，设置为2：多选，并支持连续多选，默认值为1。该设置生效的前提是要先启动多选。

1. // 多选方式可以连续点选
   
2.    IntelliSelectType:2

复制代码

2.5、autoResetRenderer：是否启用自动重置渲染器。设置为true则启用；设置为false则不启用

1.    // 启用自动重置渲染器
   
2.    autoResetRenderer:true

复制代码

2.6、ForbiddenDynInput：是否禁用动态输入框。设置为true为禁用；设置为false则启用。

1.    //禁用动态输入框
   
2.    ForbiddenDynInput:true

复制代码

2.7、inputRectWidth：设置夹点和拾取框的宽度，其单位是屏幕上的像素。

1.    //将夹点宽度设置为5px
   
2.    inputRectWidth:5
   

复制代码

2.8、gripPointColor： 设置夹点颜色，其值为十六机制颜色值，如：0xFFFFFFFF,0xNRGB等。

1.    // 将夹点颜色设置为白色
   
2.    gripPointColor:0xFFFFFFFF

复制代码

2.9、EnableDrawingViewAngle：是否使用图纸中的视区角度设置，默认为true 。

1.    // 不使用图纸中的视区角度
   
2.    EnableDrawingViewAngle:flase

复制代码

3.McObject对象方法API

处理了上面介绍的两种方式外，mxcad中的McObject对象里也提供了设置CAD项目配置参数的方法。下面以常用的几种设置方法为例：

3.1、McObject.setBrower()：是否设置为浏览模式。

1.   import { MxCpp } from 'mxcad';
   
2.    // 设置为浏览模式
   
3.     MxCpp.getCurrentMxCAD().setBrowse(true);
   
4.    // 设置为编辑模式
   
5.     MxCpp.getCurrentMxCAD().setBrowse(false);
   

复制代码

3.2、McObject.setViewBackgroundColor()：设置视区的背景色。

1.    import { MxCpp } from 'mxcad';
   
2.    // 将视区背景色设置为白色，值为rgb
   
3.     MxCpp.getCurrentMxCAD().setViewBackgroundColor(255,255,255);
   

复制代码

3.3、McObject.setAttribute()：设置mxcad对象的一些属性设置。

1.    import { MxCpp } from 'mxcad';
   
2.     MxCpp.getCurrentMxCAD().setAttribute({
   
3.         //启用回退功能
   
4.         EnableUndo:true,
   
5.         //显示精度设置，默认为0,可以取0 \~1000,1000为最高精度
   
6.         DisplayPrecision:1000
   
7.     });

复制代码

三、在线演示

用户可在我们提供的在线demo的编辑器中直接运行设置，查看实时效果。

实时运行效果演示：

1. import { MxCpp } from 'mxcad';
   
2. // 将视区背景色设置为白色，值为rgb
   
3. MxCpp.getCurrentMxCAD().setViewBackgroundColor(255,255,255);
   

复制代码

如下图：