### mxdraw: Introduction and Quick Start
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/timeline/index.html
Provides an overview of the mxdraw library and guides new users through the initial setup and basic usage to quickly start drawing.
```JavaScript
2-21 Introduction
2-21 Quick Start
2-21 简介
2-21 快速入门
```
--------------------------------
### Install mxdraw using npm
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/en/start/quickStart.html
This command installs the latest version of the mxdraw library using npm. It's recommended to use the latest version to avoid compatibility issues.
```bash
npm install mxdraw@latest
```
--------------------------------
### Start Node Service on Linux
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/en/previewAnnotation/bases.html
This section provides instructions for starting the Node.js service on a Linux environment. It involves navigating to the MxDrawServer directory, setting execution permissions, copying files, and then running the application script.
```bash
su root
chmod -R 777 *
cp -r ./mx /mx
chmod -R 777 /mx/*
cd Bin/Linux/MxDrawServer
su root
chmod -R 777 *
./node app.js
```
--------------------------------
### mxdraw: Basic Development Example
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/timeline/index.html
Provides a foundational example for developers to get started with mxdraw, illustrating basic usage and integration patterns for building CAD applications.
```JavaScript
5-9 Basic Development Example
5-9 基础开发示例
```
--------------------------------
### MxDraw Basic Setup and Line Drawing Example
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/interactiveDrawing/basedOnnUsing.html
This comprehensive HTML and JavaScript example sets up the MxDraw canvas, handles command input, and implements a basic line drawing function. It demonstrates registering a command ('BR_Line'), capturing user input for points, and drawing a line on the canvas.
```HTML
MxDbLine 示例
```
--------------------------------
### Initialize MxCAD and Add Image
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/graph/MxDbImage.html
Initializes the MxCAD core code and sets up drawing parameters like object selection. It then creates an MxDbImage object, sets its points and image path, and adds it to the current drawing. This example demonstrates the basic setup and entity addition process.
```JavaScript
import Mx from "../mxdraw.esm.js"
import GUI from "../lil-gui.module.js"
Mx.loadCoreCode().then(() => {
Mx.MxFun.setIniset({
// 启用对象选择功能.
EnableIntelliSelect: true,
// 选择类型
IntelliSelectType: 1,
// 是否开启多个选择
multipleSelect: false,
});
// 创建控件对象
Mx.MxFun.createMxObject({
canvasId: "mxcad", // canvas元素的id
useWebsocket: false,
callback: (mxDrawObject, { canvas, canvasParent }) => {
},
});
const pt1 = new THREE.Vector3(-10,0,0)
const image = new Mx.MxDbImage();
const w = Mx.MxFun.screenCoordLong2Doc(60);
const h = Mx.MxFun.screenCoordLong2Doc(40);
image.setPoint1(pt1);
const pt2 = new THREE.Vector3(pt1.x + w, pt1.y + h, pt1.z);
image.setPoint2(pt2);
image.setImagePath("../../img/dlyx_icon.png");
Mx.MxFun.getCurrentDraw().addMxEntity(image);
})
```
--------------------------------
### Basic mxdraw Usage Example
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/en/start/quickStart.html
This HTML and JavaScript code demonstrates the basic usage of mxdraw. It sets up a canvas, loads the core code, creates an mxdraw object, and then draws a line, a circle, and text onto the canvas upon successful file opening.
```html
mxdraw Basic Usage example
```
--------------------------------
### Initialize and Add MxDbRect
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/graph/MxDbRect.html
Demonstrates how to initialize MxDraw, configure settings like IntelliSelect, create an MxDbRect object, set its start and end points, set its color, and add it to the current drawing.
```JavaScript
import Mx from "../mxdraw.esm.js"
import GUI from "../lil-gui.module.js"
Mx.loadCoreCode().then(() => {
Mx.MxFun.setIniset({
// 启用对象选择功能.
EnableIntelliSelect: true,
// 选择类型
IntelliSelectType: 1,
// 是否开启多个选择
multipleSelect: false,
});
// 创建控件对象
Mx.MxFun.createMxObject({
canvasId: "mxdraw", // canvas元素的id
useWebsocket: false,
callback: (mxDrawObject, { canvas, canvasParent }) => {
},
});
let rect = new Mx.MxDbRect();
rect.pt1 = new THREE.Vector3(-10, 10, 0)
rect.pt2 = new THREE.Vector3(10, -10, 0)
rect.setColor(0xFF22)
Mx.MxFun.getCurrentDraw().addMxEntity(rect);
})
const gui = new GUI();
const myObject = {
executeTheCommand: () => draw_rect()
}
gui.add(myObject, 'executeTheCommand').name('绘制矩形')
```
--------------------------------
### HTML Structure for MxDbRect Drawing Example
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/en/graph/MxDbRect.html
This HTML snippet provides the necessary structure for the mxdraw rectangle drawing example. It includes the basic HTML document setup, meta tags, a title, and crucially, the inclusion of the mxdraw library via a CDN. It also defines a button to trigger the drawing and a canvas element where the rectangle will be rendered.
```HTML
MxDbRect Give an example
```
--------------------------------
### Create and Draw Arbitrary Line - JavaScript
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/graph/MxDbAnyLine.html
This snippet shows how to create an arbitrary line (MxDbAnyLine) by defining its start and end points and adding it to the current drawing. It also includes the setup for loading the MXDraw core code.
```javascript
import Mx from "../mxdraw.esm.js"
import GUI from "../lil-gui.module.js"
Mx.loadCoreCode().then(() => {
// 创建控件对象
Mx.MxFun.createMxObject({
canvasId: "mxdraw", // canvas元素的id
useWebsocket: false,
callback: (mxDrawObject, { canvas, canvasParent }) => {
},
});
let line = new Mx.MxDbAnyLine();
line.points.push(new THREE.Vector3(-10, -10, 0));
line.points.push(new THREE.Vector3(10, 10, 0));
Mx.MxFun.getCurrentDraw().addMxEntity(line);
});
```
--------------------------------
### Start Node Service on Windows
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/previewAnnotation/bases.html
To start the Node.js service on Windows, navigate to the directory containing `start.bat` and double-click the file to execute it.
```batch
start.bat
```
--------------------------------
### Dynamically Draw Line with User Input and GUI
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/graph/MxDbLine.html
This example shows how to dynamically draw a line using user input for defining the start and end points. It utilizes MrxDbgUiPrPoint for capturing points and provides visual feedback during drawing. A GUI element is added to trigger this drawing function.
```JavaScript
async function draw_line() {
const getPoint = new Mx.MrxDbgUiPrPoint();
// 实例化线段对象line
let line = new Mx.MxDbLine();
// 当前鼠标位置
const pt1 = await getPoint.go();
if (!pt1)
return
// 设置第一个点位置
line.setPoint1(pt1);
// 设置颜色
line.setColor(0xFF22);
// 动态绘制函数
getPoint.setUserDraw((currentPoint, worldDrawComment) => {
// 设置线段第二个点位置
line.setPoint2(currentPoint);
// 绘制线段对象
worldDrawComment.drawCustomEntity(line);
})
// 将第二次鼠标点击的位置设置为线段的结束点
const pt2 = await getPoint.go()
if (!pt2)
return
line.setPoint2(pt2);
// 获取控件对象并将线段对象line添加到画布中
Mx.MxFun.getCurrentDraw().addMxEntity(line);
}
// GUI
const gui = new GUI();
const myObject = {
executeTheCommand: () => draw_line()
}
gui.add(myObject, 'executeTheCommand').name('绘制线段')
```
--------------------------------
### Initialize and Draw Line with MxDbLine
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/graph/MxDbLine.html
This snippet demonstrates how to initialize MXDraw, configure settings like object selection, create a line entity with specific start and end points, set its color and line width, and add it to the current drawing.
```JavaScript
import GUI from "../lil-gui.module.js"
import Mx from "../mxdraw.esm.js"
Mx.loadCoreCode().then(() => {
Mx.MxFun.setIniset({
// 启用对象选择功能.
EnableIntelliSelect: true,
// 选择类型
IntelliSelectType: 1,
// 是否开启多个选择
multipleSelect: false,
});
// 创建控件对象
Mx.MxFun.createMxObject({
canvasId: "mxdraw", // canvas元素的id
useWebsocket: false,
callback: (mxDrawObject, { canvas, canvasParent }) => {
},
});
let line = new Mx.MxDbLine();
line.pt1 = new THREE.Vector3(-15, -10, 0);
line.pt2 = new THREE.Vector3(10, 10, 0);
line.setColor(0xFF22);
line.dLineWidth = 5;
Mx.MxFun.getCurrentDraw().addMxEntity(line);
})
```
--------------------------------
### Create and Add MxDbLeadComment
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/graph/MxDbLeadComment.html
This snippet demonstrates how to create an MxDbLeadComment object, set its properties such as the start and end points, text height, and text content, and then add it to the current drawing. It also shows how to configure initial settings like IntelliSelect.
```JavaScript
import Mx from "../mxdraw.esm.js"
import GUI from "../lil-gui.module.js"
Mx.loadCoreCode().then(() => {
Mx.MxFun.setIniset({
// 启用对象选择功能.
EnableIntelliSelect: true,
// 选择类型
IntelliSelectType: 1,
// 是否开启多个选择
multipleSelect: false,
});
// 创建控件对象
Mx.MxFun.createMxObject({
canvasId: "mxcad", // canvas元素的id
useWebsocket: false,
callback: (mxDrawObject, { canvas, canvasParent }) => {
},
});
let leadComment = new Mx.MxDbLeadComment();
// 设置标志点
leadComment.point1 = new THREE.Vector3(-10,-5,0)
leadComment.point2 = new THREE.Vector3(10,5,0)
leadComment.textHeight = Mx.MxFun.screenCoordLong2Doc(20)
leadComment.text = "文字标注"
Mx.MxFun.getCurrentDraw().addMxEntity(leadComment);
})
```
--------------------------------
### Initialize and Draw MxDbCoord
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/graph/MxDbCoord.html
This snippet demonstrates how to initialize MxDbCoord, set its start and end points using THREE.Vector3, and add it to the current drawing in MXCAD. It also includes configuration for selection behavior.
```JavaScript
import Mx from "../mxdraw.esm.js"
import GUI from "../lil-gui.module.js"
Mx.loadCoreCode().then(() => {
Mx.MxFun.setIniset({
// 启用对象选择功能.
EnableIntelliSelect: true,
// 选择类型
IntelliSelectType: 1,
// 是否开启多个选择
multipleSelect: false,
});
// 创建控件对象
Mx.MxFun.createMxObject({
canvasId: "mxcad", // canvas元素的id
useWebsocket: false,
callback: (mxDrawObject, { canvas, canvasParent }) => {
// Callback function
},
});
let coord = new Mx.MxDbCoord();
coord.point1 = new THREE.Vector3(-10, -5, 0);
coord.point2 = new THREE.Vector3(10, 10, 0);
Mx.MxFun.getCurrentDraw().addMxEntity(coord);
});
```
--------------------------------
### Mapbox GL JS Initialization and MXDraw Integration
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/GIS/mapboxOrMxdraw.html
Initializes a Mapbox map with a specified center and style, then sets up MXDraw to load and render a CAD file. It includes coordinate projection and custom layer setup for displaying the CAD data on the map.
```javascript
mapboxgl.accessToken = "pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA"
const center = [116.391305, 39.90553]
const map = new mapboxgl.Map({
container: 'map',
center,
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 16
})
const modelAltitude = 100;
const point = mapboxgl.MercatorCoordinate.fromLngLat( center, modelAltitude );
const lDistForM = point.meterInMercatorCoordinateUnits();
const lCADArea = 1000 * lDistForM * 1
let mxMap = {
canvas: null,
gl: void 0,
cadLocation1: new THREE.Vector3(),
cadLocation2: new THREE.Vector3(),
elevation: 0,
customLayer: {},
mxObj: null,
matCadToMap: new THREE.Matrix4(),
matMapToCad: new THREE.Matrix4(),
matrix: undefined,
render(gl, matrix){
},
cadToMercatorCoord(pt) {
pt.applyMatrix4(this.matCadToMap);
return new mapboxgl.MercatorCoordinate(pt.x,pt.y,pt.z);
},
mercatorCoordToCad(pt){
let ptRet = new THREE.Vector3(pt.x,pt.y,pt.z);
ptRet.applyMatrix4(this.matMapToCad);
return ptRet;
},
cadLongToMercatorCoord(len){
let pt1 = new THREE.Vector3(0,0,0);
let pt2 = new THREE.Vector3(len,0,0);
pt1.applyMatrix4(this.matCadToMap);
pt2.applyMatrix4(this.matCadToMap);
return pt1.distanceTo(pt2);
}
}
mxMap.cadLocation1 = new THREE.Vector3(point.x - lCADArea / 2, point.y - lCADArea, point.z);
mxMap.cadLocation2 = new THREE.Vector3(point.x + lCADArea, point.y + lCADArea / 2, point.z);
const customLayer = {
id: "3d-model",
type: "custom",
renderingMode: "3d",
async onAdd(map, gl) {
await Mx.loadCoreCode()
mxMap.canvas = map.getCanvas();
mxMap.gl = gl
Mx.MxFun.createMxObject({
mapbox: mxMap,
cadFile: "../../demo/buf/$hhhh.dwg",
callback: (mxObj) => {
mxMap.mxObj = mxObj;
mxObj.addEvent("loadComplete", () => {
map.triggerRepaint()
});
}
});
},
render(gl, matrix) {
mxMap.matrix = matrix
mxMap.render(gl, matrix);
map.triggerRepaint()
}
};
mxMap.customLayer = customLayer
map.on('style.load', ()=> {
map.addLayer(customLayer)
})
```
--------------------------------
### Initialize MxDraw and Add Line
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/commandMode/basedOnnUsing.html
This code snippet initializes the MxDraw core functionality and configures settings such as object selection. It then creates an instance of MxDraw, adds a line entity with specified start and end points to the canvas, and demonstrates basic setup.
```JavaScript
Mx.loadCoreCode().then(() => {
Mx.MxFun.setIniset({
// 启用对象选择功能.
EnableIntelliSelect: true,
IntelliSelectType: 1,
multipleSelect: false,
});
// 创建控件对象
Mx.MxFun.createMxObject({
canvasId: "mxcad", // canvas元素的id
useWebsocket: false,
callback: (mxDrawObject, { canvas, canvasParent }) => {
},
});
let line = new Mx.MxDbLine();
line.pt1 = new THREE.Vector3(-40, 0, 0);
line.pt2 = new THREE.Vector3(10, 10, 0);
Mx.MxFun.getCurrentDraw().addMxEntity(line);
});
```
--------------------------------
### Install mxdraw and mapbox Dependencies
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/en/extend/MapBoxCombinedWithGISSystem.html
Installs the necessary mapbox-gl and mxdraw packages using npm. These are the core libraries required for integrating mapbox maps and mxdraw CAD functionalities.
```bash
# Install the corresponding dependency package first
npm install mapbox-gl mxdraw
```
--------------------------------
### Draw Aligned Dimension with User Input - JavaScript
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/graph/MxDbAlignedDimension.html
Defines a function to draw an aligned dimension by interactively getting two points from the user. It uses a point input utility to capture the start and end points and dynamically draws the dimension during user interaction.
```JavaScript
function draw_alignedDimension() {
const getPoint = new Mx.MrxDbgUiPrPoint();
getPoint.go(async (status) => {
if (status !== Mx.MrxDbgUiPrBaseReturn.kOk) {
return
}
// 当前鼠标位置
const pt1 = getPoint.value()
// 实例化对齐标注
let alignedDimension = new Mx.MxDbAlignedDimension();
// 设置第一个点位置
alignedDimension.setPoint1(pt1);
// 设置动态绘制回调函数
getPoint.setUserDraw((currentPoint, worldDrawComment) => {
// 设置第二个点位置
alignedDimension.setPoint2(currentPoint);
// 绘制
worldDrawComment.drawCustomEntity(alignedDimension);
})
// 鼠标第二次点击
alignedDimension.setPoint2(await getPoint.go())
Mx.MxFun.getCurrentDraw().addMxEntity(alignedDimension);
})
}
```
--------------------------------
### Draw Arc Shape with MxDbArcShapeDraw
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/graph/MxDbArcShapeDraw.html
This snippet demonstrates how to draw an arc shape using the MxDbArcShapeDraw class. It involves getting user input for the arc's center, start point, and outer radius, and then adding the created arc entity to the MXDraw object.
```JavaScript
import Mx from "../mxdraw.es5.js"
import { addEllipseShapeGui } from "../addShapeGui.js"
/**
* Draws an arc shape
*/
export function BR_MxDbArcShape() {
const getPoint = new Mx.MrxDbgUiPrPoint()
const mxobj = Mx.MxFun.getCurrentDraw();
const worldDraw = new Mx.McEdGetPointWorldDrawObject()
let arc = new Mx.MxDbArcShapeDraw()
getPoint.setMessage("\n确定圆弧中点:");
getPoint.setUserDraw(worldDraw)
getPoint.go(async () => {
getPoint.setMessage("\n确定圆弧开始点:");
arc.center = getPoint.value()
worldDraw.setDraw((v)=> {
arc.interRadiusPoint = v
worldDraw.drawCircle(arc.center, v.distanceTo(arc.center))
})
arc.interRadiusPoint = await getPoint.go() || new THREE.Vector3()
worldDraw.setDraw((v)=> {
arc.outerRadiusPoint = v
worldDraw.drawCustomEntity(arc)
})
arc.outerRadiusPoint = await getPoint.go() || new THREE.Vector3()
mxobj.addMxEntity(arc)
addEllipseShapeGui(arc)
})
}
```
--------------------------------
### Draw Circle Arc Shape - JavaScript
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/graph/MxDbCircleArc.html
This function demonstrates how to draw a circle arc shape using the MxDbCircleArc class. It involves getting user input for the center, start point, and end point of the arc, setting properties like stroke color, and adding the entity to the current drawing.
```javascript
import Mx from "../mxdraw.esm.js"
import { addEllipseShapeGui } from "../addShapeGui.js"
import GUI from "../lil-gui.module.js"
/**
* 绘制圆弧形状
*/
export function BR_MxDbCircleArc() {
const getPoint = new Mx.MrxDbgUiPrPoint()
const mxObj = Mx.MxFun.getCurrentDraw();
const draw = new Mx.McEdGetPointWorldDrawObject()
let obj = new Mx.MxDbCircleArc()
obj.stroke = "#ff0000"
getPoint.setUserDraw(draw)
getPoint.setMessage("\n确定圆弧中点:");
getPoint.go(async () => {
// 第一个点确定圆心
obj.center = getPoint.value()
// 第二个点确定半径和开始角
draw.setDraw((v) => {
draw.drawLine(obj.center, v)
})
getPoint.setMessage("\n确定圆弧开始点:");
obj.startPoint = await getPoint.go() || new THREE.Vector3()
draw.setDraw((v) => {
obj.endPoint = v
draw.drawCustomEntity(obj)
})
getPoint.setMessage("\n确定圆弧结束点:");
// 第三个点确定结束角
obj.endPoint = await getPoint.go() || new THREE.Vector3()
draw.setDraw(()=> {});
obj.closed = false;
mxObj.addMxEntity(obj);
addEllipseShapeGui(obj);
})
}
```
--------------------------------
### Include mxdraw via script tag
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/en/start/quickStart.html
This HTML script tag includes the mxdraw library from a CDN, making it available for use in your web page.
```html
```
--------------------------------
### Start Node Service on Linux
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/previewAnnotation/bases.html
Starting the Node.js service on Linux involves several steps: granting execute permissions to files, copying the mx directory, and then running the Node.js application. This ensures the service operates correctly in the Linux environment.
```shell
su root
chmod -R 777 *
cp -r ./mx /mx
chmod -R 777 /mx/*
```
```shell
su root
chmod -R 777 *
./node app.js
```
--------------------------------
### 安装 mxdraw
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/start/quickStart.html
提供了使用 npm 包管理器安装最新版 mxdraw 库的命令，以及通过
```
--------------------------------
### Initialize mxcad and Create Custom Annotation
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/en/previewAnnotation/bases.html
This snippet demonstrates how to initialize the mxcad environment, configure settings like IntelliSelect, and create a custom annotation object. It also shows how to access the Three.js module for custom graphics.
```JavaScript
import Mx from "mxdraw"
Mx.loadCoreCode().then(()=> {
Mx.MxFun.setIniset({
// Enables object selection functionality.
EnableIntelliSelect: true,
});
// Create a control object
Mx.MxFun.createMxObject({
canvasId: "mxcad",
cadFile: "../../demo/buf/$hhhh.dwg",
callback: (mxDrawObject, { canvas, canvasParent }) => {
},
});
// We need to use Three.js first because mxdraw has already loaded three.js
// So we can call `Mx.MxFun.loadCoreCode` to load the core code and then
// get the THREE module through `Mx.MxFun.getMxFunTHREE()` (THREE module
// is mounted on the window object by default after loading)
const THREE = Mx.MxFun.getMxFunTHREE()
// Custom annotation class
class CustomAnnotations extends Mx.MxDbEntity {
// Command triggered by use
static cmd = "Mx_CustomAnnotations"
// The drawing process called when use is used.
static draw = drawCustomAnnotations
pt1 = new THREE.Vector3()
pt2 = new THREE.Vector3()
// Type name (used for restoring annotations. Must be the same as the defined class name)
getTypeName() {
return 'CustomAnnotations'
}
// Draw
worldDraw(pWorldDraw) {
pWorldDraw.drawLine(this.pt1, this.pt2)
// A circle is drawn at the starting point, midpoint, and endpoint respectively.
pWorldDraw.drawCircle(this.pt1, 1000)
pWorldDraw.drawCircle(this.pt2, 1000)
const midPoint = new THREE.Vector3(
this.pt1.x + (this.pt2.x - this.pt1.x) * 0.5,
this.pt1.y + (this.pt2.y - this.pt1.y) * 0.5,
0
)
pWorldDraw.drawCircle(midPoint, 1000)
}
// The points that can be manipulated when the annotation is clicked are displayed
getGripPoints() {
let ret = []
ret.push(this.pt1)
ret.push(this.pt2)
let midPoint = new THREE.Vector3(
this.pt1.x + (this.pt2.x - this.pt1.x) * 0.5,
this.pt1.y + (this.pt2.y - this.pt1.y) * 0.5,
0
)
ret.push(midPoint)
return ret
}
// Move the operation point (add method is vector3 in Three.js
moveGripPointsAt(index, offset) {
if (index == 0) {
this.pt1.add(offset)
} else if (index == 1) {
this.pt2.add(offset)
} else if (index == 2) {
this.pt1.add(offset)
this.pt2.add(offset)
}
return true
}
// Data input and output. This processing is required for drawing functions or variable parameters to ensure that the annotations can be saved and restored correctly.
dwgIn(obj) {
this.onDwgIn(obj)
this.pt1.copy(obj['pt1'])
this.pt2.copy(obj['pt2'])
return true
}
// Data output
dwgOut(obj) {
this.onDwgOut(obj)
obj['pt1'] = this.pt1
obj['pt2'] = this.pt2
return obj
}
create() {
return new CustomAnnotations()
}
}
// Register immediately to ensure that the graphics exist when saving or restoring the annotation.
CustomAnnotations.register()
// Custom annotation drawing process function
async function drawCustomAnnotations() {
```
--------------------------------
### Draw Arrow using MXCAD
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/extend/extendThreeJs.html
Draws an arrow by interactively selecting start and end points. It uses `THREE.ArrowHelper` to visualize the arrow and calculates its rotation based on the vector between the two points.
```JavaScript
async function draw_arrow() {
// 设置箭头的起点
const getPt1 = new Mx.MrxDbgUiPrPoint();
getPt1.setMessage("\n 设置箭头的起点:");
let pt1 = await getPt1.go();
if (pt1 == null) {
return;
}
// 设置箭头的终点
const getPt2 = new Mx.MrxDbgUiPrPoint();
getPt2.setMessage("\n 设置箭头的终点:");
getPt2.setUserDraw((pt, pw) => {
if (pt1 !== null) {
pw.drawLine(pt1, pt)
}
})
let pt2 = await getPt2.go();
if (pt2 == null) {
return;
}
// 创建平面箭头的起点和终点坐标
const origin = pt1;
const XWeeks = new THREE.Vector3(1, 0, 0);
// 创建箭头的起点和终点
const arrow = new THREE.ArrowHelper(
XWeeks, // 箭头方向
origin.clone(), // 起点
pt1.distanceTo(pt2), // 箭头长度
0xff0000 // 箭头颜色
);
// 计算箭头旋转角度
const vec = pt2.clone().sub(pt1);
let angle = vec.angleTo(XWeeks);
if (pt2.y < pt1.y) {
angle = -angle;
};
arrow.rotateOnAxis(new THREE.Vector3(0, 0, 1), angle)
Mx.MxFun.getCurrentDraw().addObject(arrow)
}
```
--------------------------------
### Start MxDrawServer Node Service on Linux
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/en/start/data.html
This shell script provides commands to set up and start the MxDrawServer node service on a Linux system. It includes steps for granting execute permissions, copying files, and running the application.
```Shell
su root
chmod -R 777 *
cp -r ./mx /mx
chmod -R 777 /mx/*
```
```Shell
su root
chmod -R 777 *
./node app.js
```
--------------------------------
### MxDraw HTML Example with Command Execution and Input
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/en/interactiveDrawing/basedOnnUsing.html
This is a full HTML example demonstrating the integration of MxDraw with command execution and input handling. It includes setting up the canvas, handling user input from a text field, registering a 'BR_Line' command, and listening for command line input to update a textarea.
```html
MxDbLine Give an example
```
--------------------------------
### HTML Structure for Star Drawing Example
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/graph/MxDbStarShape.html
This HTML snippet provides the basic structure for the MxDraw star drawing example. It includes a canvas element for drawing and a button to initiate the star drawing process. It also loads the mxdraw library via a CDN.
```HTML
MxDbStarShape 示例
```
--------------------------------
### Initialize and Add Aligned Dimension - JavaScript
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/graph/MxDbAlignedDimension.html
Initializes MXCAD core code, configures selection settings, and creates an aligned dimension by setting its start and end points. The dimension is then added to the current drawing.
```JavaScript
import Mx from "../mxdraw.esm.js"
import GUI from "../lil-gui.module.js"
Mx.loadCoreCode().then(() => {
Mx.MxFun.setIniset({
// 启用对象选择功能.
EnableIntelliSelect: true,
// 选择类型
IntelliSelectType: 1,
// 是否开启多个选择
multipleSelect: false,
});
// 创建控件对象
Mx.MxFun.createMxObject({
canvasId: "mxcad", // canvas元素的id
useWebsocket: false,
callback: (mxDrawObject, { canvas, canvasParent }) => {
},
});
// 实例化对齐标注
let alignedDimension = new Mx.MxDbAlignedDimension();
alignedDimension.setPoint1(new THREE.Vector3(-20, 0, 0));
alignedDimension.setPoint2(new THREE.Vector3(20, 0, 0));
Mx.MxFun.getCurrentDraw().addMxEntity(alignedDimension);
})
```
--------------------------------
### Initialize MXCAD and Set Configuration
Source: https://github.com/mxcad/mxdraw_docs/blob/gh-pages/samples/extend/extendThreeJs.html
Initializes the MXCAD environment with specified settings, including enabling intelligent object selection and configuring selection types. It then sets up the drawing canvas and prepares for object manipulation.
```JavaScript
import Mx from "../mxdraw.esm.js"
import { addEllipseShapeGui } from "../addShapeGui.js"
import GUI from "../lil-gui.module.js"
Mx.loadCoreCode().then(() => {
Mx.MxFun.setIniset({
// 启用对象选择功能.
EnableIntelliSelect: true,
// 选择类型
IntelliSelectType: 1,
// 是否开启多个选择
multipleSelect: false,
});
// 创建控件对象
Mx.MxFun.createMxObject({
canvasId: "mxcad", // canvas元素的id
useWebsocket: false,
callback: (mxDrawObject, { canvas, canvasParent }) => {
},
});
const vertices = new Float32Array([
0, 10, 0, // 顶点1（上）
-10, -10, 0, // 顶点2（左下）
10, -10, 0 // 顶点3（右下）
]);
// 创建BufferGeometry对象
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 创建网格
const mesh = new THREE.Mesh(geometry, material);
Mx.MxFun.getCurrentDraw().addObject(mesh);
draw_twinkle(new THREE.Vector3(-24, 17, 0))
});
```