一、前言

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()方法内设置配置属性。

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  

更多createMxCad方法内部的属性设置可参考:
https://www.mxdraw3d.com/mxcad_docs/zh/api/interfaces/2d.MxCa... 

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表示选中对象后只显示夹点,但不响应响应夹点编辑。  
 ```ts   
// 启用夹点编辑   
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   

更多MxFun.setIniset()方法内部的属性设置可参考:
https://mxcad.github.io/mxdraw_api_docs/interfaces/iniConfig....

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
    });

更多McObject方法设置可参考:https://www.mxdraw3d.com/mxcad_docs/zh/api/classes/2d.McObjec... 

三、在线演示

用户可在我们提供的在线demo的编辑器中直接运行设置,查看实时效果。在线demo地址:https://demo2.mxdraw3d.com:3000/mxcad/ .
实时运行效果演示:

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

如下图:


梦想云图网页CAD
5 声望3 粉丝