Quick Start Guide

Prerequisites

If you encounter methods or properties in the documentation that you do not understand, you can search for the corresponding method in the API documentation on gitee (opens new window) or API documentation on github (opens new window) for detailed explanations.

Here's an example:

Basic Usage

html:

<!-- Make sure that the parent element of the canvas has a fixed width and height because the size of the canvas will automatically adjust to ensure that the drawing is not distorted. 
    Set overflow: hidden in the div because the canvas determines its size based on the size of the parent element, and on this basis, it will increase the width and height to adapt to the drawing, which may require hiding the excess part to get the width you need
-->
<div style="height: 80vh; overflow: hidden;">
  <canvas id="mxcad"><canvas>
<div>

// If you are using <script src="https://unpkg.com/mxdraw/dist/mxdraw.umd.js"></script>, you don't need to import Mx from "mxdraw" to run it normally
import Mx from "mxdraw"
// Dynamically load the core code of the js library
Mx.loadCoreCode().then(()=> {
  // Create control object
  Mx.MxFun.createMxObject({
      canvasId: "mxcad", // the id of the canvas element
      // If there is a cross-domain problem accessing resources, please refer to https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS#http_%E5%93%8D%E5%BA%94%E6%A0%87%E5%A4%B4%E5%AD%97%E6%AE%B5 to solve
      // The converted file consists of multiple .wgh files, but we only need to get the prefix to access it. For example: ../../demo/buf/$hhhh.dwg can be written directly as cadFile: "../../demo/buf/hhhh.dwg"
      cadFile: "../../demo/buf/hhhh.dwg",
  })
})

Note:

• In the code example, ../../demo/buf/$hhhh.dwg is not the original drawing file hhhh.dwg, but a multiple files obtained by converting it through the Mxdraw cloud drawing program (How to convert files？)

• The converted file consists of multiple .wgh files, but we only need to get the prefix to access it. We will automatically request all the files ending in .wgh in sequence according to the request address. So cadFile can be directly written as ../../demo/buf/hhhh.dwg to match all the files ../../demo/buf/$hhhh.dwg.mxb[index].wgh

• View the complete source code of this example: github (opens new window) | gitee (opens new window) (../../demo/buf/hhhh.dwg and other converted files are in the demo/buf folder)

Demo:

Various Development Modes (Important)

mxdraw provides different development modes to meet different needs of previewing and editing CAD drawings.

You can use different development modes to achieve online preview and editing of CAD drawings according to your specific needs.

I. Static Preview + Annotation Mode

Can only preview and annotate drawings, supports annotation to json serialization. View Details

II. WebAssembly mode

Supports preview and editing of CAD drawings View Details (opens new window)

III. GIS mode

The combination of CAD drawings and GIS supports preview View Details

The Structure of the mxdraw Package

Module	Explanation	Type
loadCoreCode (opens new window)	Load the core code	Method
MxFun (opens new window)	core API method	core API collection
MxDrawObject (opens new window)	A control object that draws a drawing	Control object
MxDbEntity (opens new window)	Custom entity class (abstract graphics), as long as it has MxDb in its name, it is an extended graphics object	Abstract class
MxDbLine (opens new window)	Represents basic straight line graphics objects (derived from custom entity classes)	Graphics class
MrxDbgUiPrPoint (opens new window)	Used to get the point where the mouse is currently located (and related functional classes that surround it)	Functional class
MrxDbgUiPrBaseReturn (opens new window)	TS enumeration type, which may be used in some situations	TS type
...	...	...

MxFun and MxDrawObject are the most important components of the entire core API, and most of the operation controls of CAD drawings can be completed through these APIs.

And MxDbEntity can be understood as the basis of all graphics. Refer to: How to use MxDbEntity to implement your own graphics object?