English | 中文

目录

• 快速上手
  • 简介
  • 安装
  • 用法
• Mx模块集
  • loadCoreCode 动态加载核心(初始化)
  • MxFun 方法集合
  • MxDrawObject 控件对象
  • McEdGetPointWorldDrawObject / MrxDbgUiPrPoint / MrxDbgUiPrBaseReturn 动态绘制
  • MxDbEntity / McGiWorldDraw / McGiWorldDrawType 自定义对象
• 按需引入配置
• License

快速上手

简介

mxdraw 是什么？

mxdraw 是个在线CAD的JS库，实现在线CAD，DWG图纸浏览和编辑等功能的一套解决方案， 支持大部分现代主流浏览器比如Chrome、Edge等, 不支持IE浏览器。 DWG文件通过后端程序格式转换后后端程序详见，就可使用mxdraw在线打开。

使用人群

面向前端开发者 熟悉了解JavaScript 并且会使用 three.js框架。 如从未接触过three.js建议先阅读three.js中文文档 后再进行开发使用。

安装

npm

yarn add mxdraw 或 npm install mxdraw

用法

引入

import Mx from "mxdraw"

加载

html

<canvas id="mxcad">
</canvas>

js

import Mx from "mxdraw"
// 动态加载 js库核心代码
Mx.loadCoreCode().then(()=> {
  // 创建控件对象
  Mx.MxFun.createMxObject({
      canvasId:"mxcad",                                           // canvas元素的id
      cadFile:"http://localhost:8088/demo/buf/hhhh.dwg.mxb1.wgh", // 后端程序转换dwg文件后的文件位置。
      callback: (mxDrawObject, {
          canvas,
          canvasParent
      }) => {
          // 可以拿到canvas元素和它的父级元素
          //console.log(canvas, canvasParent)
          //console.log(mxDrawObject)
          // 图纸加载完成
          mxDrawObject.addEvent("loadComplete", () => {
            console.log("mx loadComplete");
          });
      }
  })
})

如何实现一个画线的功能命令?

1.实现画线功能

参考内容:

• MrxDbgUiPrPointClass | getPoint 构建取点对象
• status MrxDbgUiPrBaseReturn 表示对应状态
• McEdGetPointWorldDrawObjectClass | pWorldDraw 用于构建一个动态绘制回调对象

import Mx from "mxdraw"
// 画线的函数
export async function BR_Line() {

  // 让用在图上点取直线的开始点.
  const getPoint = new MrxDbgUiPrPoint();
  getPoint.setMessage("\n指定第一点:");
	let pt1:THREE.Vector3|null = await getPoint.go();
	if(pt1 == null){
		return;

	}
  getPoint.setBasePt(pt1.clone());
  getPoint.setUseBasePt(true);
  getPoint.setMessage("\n指定第二点:");

  // 让用在图上点取直线的结束点.
  let pt2:THREE.Vector3|null = await getPoint.go();
	if(pt2 == null){
		return;
	}
   
  // 创建一个直线对象，添加到图上。 
  let line  = new MxDbLine() 
  line.pt1 = pt1;
  line.pt2 = pt2;
	
	line.setDashLineDisplay(true);
	line.setLineWidth(10);
	line.setLineWidthByPixels(true);
	
  MxFun.addToCurrentSpace(line);
  }

2.注册使用命名

参考内容:

• MxFun.addCommand 注册命名方法
• MxFun.sendStringToExecute 执行命名方法
• MxFun.isRunningCommand 检查是否有命令在运行

import Mx from "mxdraw"
// 注册命名
Mx.MxFun.addCommand("BR_Line", ()=> {
  if(Mx.MxFun.isRunningCommand()) {
      return
  }
  BR_Line()
})
// 执行命令
Mx.MxFun.sendStringToExecute("BR_Line")

更多Api使用说明请参考Mx模块集对应模块中的Api接口说明

Mx模块集

暴露出来的函数/类/对象 包括接口/枚举等Ts的类型

loadCoreCode 动态加载核心(初始化)

CoreCode 这里加载了核心程序(包括three.js)以及jquery.js库 请在需要时自行调用(所有模块都需要等待CoreCode加载完成才能使用) 列如:

import { loadCoreCode } from "mxdraw"
loadCoreCode().then(()=> {
  console.log('CoreCode加载完成')
})

MxFun 方法集合

MxFun提供了核心方法， 其中最重要的两个方法就是setMxServer设置服务器地址 以及 createMxObject 创建控制对象

• 服务器地址就是MxDraw云图开发包 所启动的后台服务地址...详情

MxDrawObject 控件对象

MxFun.createMxObject 创建的控件对象可以对canvas画布上展示的图纸进行控制修改以及添加three.js中各种组合图形等功能详情

McEdGetPointWorldDrawObject / MrxDbgUiPrPoint / MrxDbgUiPrBaseReturn 动态绘制

• McEdGetPointWorldDrawObject是动态绘制对象的类， 一个McEdGetPointWorldDrawObject实例可以使用setDraw方法设置动态的回调函数，一般情况下回调函数中会通过drawCustomEntity或者提供的其他方法绘制出需要动态绘制的部分(鼠标移动将会触发动态回调函数)
• MrxDbgUiPrPoint是一个配合动态绘制的鼠标去点的类，实例化后通过go或者goWhile 方式设置鼠标点击回调事件， 通过setUserDraw方法设置动态绘制对象， 此时动态绘制对象生效，在鼠标移动时会触发其动态回调函数
• MrxDbgUiPrBaseReturn是MrxDbgUiPrPoint的go或者goWhile的回调参数判断点击类型的一个枚举类型。
• McEdGetPointWorldDrawObject / MrxDbgUiPrPoint 配合使用 就能够完成大部分图形动态绘制的需求，例：如何实现一个画线的功能命令?

MxDbEntity / McGiWorldDraw / McGiWorldDrawType 自定义对象

自定义对象是为了更加方便的控制一个图形物体对象创建的一个控制器， 在需要对已经绘制在画布上的图形物体进行动态改动操作时，有一系列繁琐的过程，选取对象/选取状态/生成可改动的顶点/拖动改变顶点位置/动态绘制...

如果遵循自定义对象的规范(实现MxDbEntity抽象类)，就可以忽略这些步骤，在实现了预设行为(抽象方法)后，鼠标操作就可以完成对物体对象的顶点操作，从而改变图形物体。

• MxDbEntity抽象类 通过继承的方式实现一个自定义对象
• McGiWorldDraw 是 MxDbEntity.worldDraw抽象方法的回调对象 可以实现再鼠标拖动过程中的一些动态绘制任务
• McGiWorldDrawType 是McGiWorldDraw.getType方法返回的枚举类型表示MxDbEntity.worldDraw的绘制类型

按需引入配置

自"0.1.164"起不再需要配置按需引入， "0.1.164"以下可以选择以下配置:

使用babel 插件babel-plugin-import 实现按需引入 需要安装 npm i babel-plugin-import -D 然后找到或创建项目根目录的.babelrc文件新增如下内容

{
  "plugins": [
    [
      "import", {
        "libraryName": "mxdraw",
        "libraryDirectory": "dist/lib/MxModule",
        "camel2UnderlineComponentName": false,
        "camel2DashComponentName": false
      }
    ]
  ]
}

基于babel-plugin-import按需引入

import { MxFun } from "mxdraw"

或者直接通过import MxFun from "mxdraw/dist/lib/MxModule/MxFun" 这样的方式直接引入对应模块

License

版权所有 (c) 2021 成都梦想凯德科技有限公司