一、 前言

Mxcad SDK 能够在线预览编辑 CAD 图纸，用户可根据项目需求选择不同的实现方式，如通过 Vite 、 CDN 、 webpack 分别使用 mxcad 。如果不清楚 mxcad 实现在线预览编辑 CAD 图纸的方法 。

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

二、 配置属性

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

1. createMxCad()

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

import { onMounted } from "vue";import { createMxCad } from "mxcad";
onMounted(() => {
  const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st";
  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("../assets/fonts", import.meta.url).href
  });
});

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 ：设置打开文件的参数，可以设置打开文件是否使用缓存，或者是否使用工作线程打开文件等。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   // 启用多选
   multipleSelectL:true

2.MxFun.setIniset()

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

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

常用 iniConfig 参数

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

  // 启用智能选择
   EnableIntelliSelect:true

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

   // 启用夹点编辑
   EnableGripEdit:true

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

   // 启动多选-框选
   multipleSelect:true

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

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

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

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

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

   //禁用动态输入框
   ForbiddenDynInput:true

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

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

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

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

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

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

3.McObject对象方法 API

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

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

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

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

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

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

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

三、 在线演示

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

实时运行效果演示：

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

如下图：