205 lines
9.3 KiB
Markdown
205 lines
9.3 KiB
Markdown
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
||
目录
|
||
|
||
- [快速上手](#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)
|
||
- [简介](#%E7%AE%80%E4%BB%8B)
|
||
- [安装](#%E5%AE%89%E8%A3%85)
|
||
- [用法](#%E7%94%A8%E6%B3%95)
|
||
- [Mx模块集](#mx%E6%A8%A1%E5%9D%97%E9%9B%86)
|
||
- [loadCoreCode 动态加载核心(初始化)](#loadcorecode-%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E6%A0%B8%E5%BF%83%E5%88%9D%E5%A7%8B%E5%8C%96)
|
||
- [MxDrawObject 控件对象](#mxdrawobject-%E6%8E%A7%E4%BB%B6%E5%AF%B9%E8%B1%A1)
|
||
- [McEdGetPointWorldDrawObject / MrxDbgUiPrPoint / MrxDbgUiPrBaseReturn 动态绘制](#mcedgetpointworlddrawobject--mrxdbguiprpoint--mrxdbguiprbasereturn-%E5%8A%A8%E6%80%81%E7%BB%98%E5%88%B6)
|
||
- [MxDbEntity / McGiWorldDraw / McGiWorldDrawType 自定义对象](#mxdbentity--mcgiworlddraw--mcgiworlddrawtype-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AF%B9%E8%B1%A1)
|
||
- [按需引入配置](#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5%E9%85%8D%E7%BD%AE)
|
||
- [License](#license)
|
||
|
||
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
||
|
||
## 快速上手
|
||
### 简介
|
||
#### mxdraw 是什么？
|
||
> mxdraw 是个在线CAD的JS库，实现在线CAD，DWG图纸浏览和编辑等功能的一套解决方案， 支持大部分现代主流浏览器比如Chrome、Edge等, 不支持IE浏览器。
|
||
> DWG文件通过后端程序格式转换后[后端程序详见](https://help.mxdraw.com/?pid=111)，就可使用mxdraw在线打开。
|
||
#### 使用人群
|
||
> 面向前端开发者 熟悉了解`JavaScript` 并且会使用 `three.js`框架。
|
||
> 如从未接触过three.js建议先阅读[three.js中文文档](http://www.yanhuangxueyuan.com/threejs/docs/index.html#manual/zh/) 后再进行开发使用。
|
||
|
||
### 安装
|
||
#### npm
|
||
``` sh
|
||
yarn add mxdraw 或 npm install mxdraw
|
||
```
|
||
|
||
### 用法
|
||
|
||
#### 引入
|
||
|
||
``` javascript
|
||
import Mx from "mxdraw"
|
||
```
|
||
|
||
#### 加载
|
||
> html
|
||
``` html
|
||
<canvas id="mxcad">
|
||
</canvas>
|
||
```
|
||
-------------
|
||
> js
|
||
``` javascript
|
||
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](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/MrxDbgUiPrPointClass.html) 构建取点对象
|
||
* [status](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/enums/MrxDbgUiPrBaseReturn.html) MrxDbgUiPrBaseReturn 表示对应状态
|
||
* [McEdGetPointWorldDrawObjectClass | pWorldDraw](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/McEdGetPointWorldDrawObjectClass.html) 用于构建一个动态绘制回调对象
|
||
|
||
``` javascript
|
||
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](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/MxFun.html#addCommand) 注册命名方法
|
||
* [MxFun.sendStringToExecute](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/MxFun.html#sendStringToExecute) 执行命名方法
|
||
* [MxFun.isRunningCommand](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/MxFun.html#isRunningCommand) 检查是否有命令在运行
|
||
|
||
``` javascript
|
||
import Mx from "mxdraw"
|
||
// 注册命名
|
||
Mx.MxFun.addCommand("BR_Line", ()=> {
|
||
if(Mx.MxFun.isRunningCommand()) {
|
||
return
|
||
}
|
||
BR_Line()
|
||
})
|
||
// 执行命令
|
||
Mx.MxFun.sendStringToExecute("BR_Line")
|
||
|
||
```
|
||
|
||
|
||
> 更多Api使用说明请参考[Mx模块集](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/modules.html)对应模块中的Api接口说明
|
||
|
||
## Mx模块集
|
||
> 暴露出来的函数/类/对象 包括接口/枚举等Ts的类型
|
||
|
||
### loadCoreCode 动态加载核心(初始化)
|
||
> CoreCode 这里加载了核心程序(包括three.js)以及jquery.js库 请在需要时自行调用(所有模块都需要等待CoreCode加载完成才能使用) 列如:
|
||
``` javascript
|
||
import { loadCoreCode } from "mxdraw"
|
||
loadCoreCode().then(()=> {
|
||
console.log('CoreCode加载完成')
|
||
})
|
||
```
|
||
### MxFun 方法集合
|
||
> MxFun提供了核心方法， 其中最重要的两个方法就是[setMxServer](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/MxFun.html#setMxServer)设置服务器地址
|
||
以及 [createMxObject](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/MxFun.html#createMxObject) 创建控制对象
|
||
* 服务器地址就是[MxDraw云图开发包](https://www.mxdraw.com/download.html) 所启动的后台服务地址...[详情](https://help.mxdraw.com/?pid=32&keywords=)
|
||
|
||
### MxDrawObject 控件对象
|
||
> [MxFun.createMxObject](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/MxFun.html#createMxObject) 创建的控件对象可以对canvas画布上展示的图纸进行控制修改以及添加three.js中各种组合图形等功能[详情](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/MxDrawObject.html)
|
||
|
||
|
||
### McEdGetPointWorldDrawObject / MrxDbgUiPrPoint / MrxDbgUiPrBaseReturn 动态绘制
|
||
* [McEdGetPointWorldDrawObject](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/McEdGetPointWorldDrawObject.html)是动态绘制对象的类， 一个McEdGetPointWorldDrawObject实例可以使用setDraw方法设置动态的回调函数，一般情况下回调函数中会通过drawCustomEntity或者提供的其他方法绘制出需要动态绘制的部分(鼠标移动将会触发动态回调函数)
|
||
* [MrxDbgUiPrPoint](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/MrxDbgUiPrPoint.html)是一个配合动态绘制的鼠标去点的类，实例化后通过go或者goWhile 方式设置鼠标点击回调事件， 通过setUserDraw方法设置动态绘制对象， 此时动态绘制对象生效，在鼠标移动时会触发其动态回调函数
|
||
* [MrxDbgUiPrBaseReturn](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/MrxDbgUiPrBaseReturn.html)是MrxDbgUiPrPoint的go或者goWhile的回调参数判断点击类型的一个枚举类型。
|
||
* McEdGetPointWorldDrawObject / MrxDbgUiPrPoint 配合使用 就能够完成大部分图形动态绘制的需求，例：[如何实现一个画线的功能命令?](#%E7%94%A8%E6%B3%95)
|
||
|
||
### MxDbEntity / McGiWorldDraw / McGiWorldDrawType 自定义对象
|
||
> 自定义对象是为了更加方便的控制一个图形物体对象创建的一个控制器， 在需要对已经绘制在画布上的图形物体进行动态改动操作时，有一系列繁琐的过程，选取对象/选取状态/生成可改动的顶点/拖动改变顶点位置/动态绘制...
|
||
|
||
> 如果遵循自定义对象的规范(实现MxDbEntity抽象类)，就可以忽略这些步骤，在实现了预设行为(抽象方法)后，鼠标操作就可以完成对物体对象的顶点操作，从而改变图形物体。
|
||
|
||
|
||
* [MxDbEntity](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/MxDbEntity.html)抽象类 通过继承的方式实现一个自定义对象
|
||
* [McGiWorldDraw](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/McGiWorldDraw.html) 是 [MxDbEntity.worldDraw](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/MxDbEntity.html#worldDraw)抽象方法的回调对象 可以实现再鼠标拖动过程中的一些动态绘制任务
|
||
* [McGiWorldDrawType](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/McGiWorldDrawType.html) 是[McGiWorldDraw.getType](https://mxtmpweb.mxdraw.f3322.net:3562/mxdrawcloud/classes/McGiWorldDraw.html#getType)方法返回的枚举类型表示MxDbEntity.worldDraw的绘制类型
|
||
|
||
|
||
## 按需引入配置
|
||
> 使用`babel` 插件`babel-plugin-import` 实现按需引入
|
||
> 需要安装 `npm i babel-plugin-import -D` 然后找到或创建项目根目录的`.babelrc`文件新增如下内容
|
||
```json
|
||
{
|
||
"plugins": [
|
||
[
|
||
"import", {
|
||
"libraryName": "mxdraw",
|
||
"libraryDirectory": "dist/lib/MxModule",
|
||
"camel2UnderlineComponentName": false,
|
||
"camel2DashComponentName": false
|
||
}
|
||
]
|
||
]
|
||
}
|
||
```
|
||
|
||
> 基于`babel-plugin-import`按需引入
|
||
``` javascript
|
||
import { MxFun } from "mxdraw"
|
||
```
|
||
> 或者直接通过`import MxFun from "mxdraw/dist/lib/MxModule/MxFun"` 这样的方式直接引入对应模块
|
||
|
||
## License
|
||
版权所有 (c) 2021 成都梦想凯德科技有限公司 |