DEV Community: MxCAD

How online CAD works with three.js to draw line segments with line widths

MxCAD — Mon, 11 Mar 2024 08:59:36 +0000

preamble

Online CAD products are often integrated into many users of the web system , front-end developers as long as the Java Script, you can integrate and secondary development of online CAD, today's article we talk about the dream of CAD controls cloud map (H5 way) how to work with three.js draw line segments with line width .
Until then, if you haven't installed Dream CAD Controls yet, you can check out the Quick Start at the following link: http://help.mxdraw.com/?pid=32

function configuration

First of all mxdraw's graphic has a line width attribute, but there may be some problems in continuous line segments, or you wish to implement some customized graphic with three.js, then we can use the MxDbEntity provided by mxdraw to implement such a line segment with line width, let's write out the most basic functions that need to be rewritten first:.

import { McGiWorldDraw, MxDbEntity } from "mxdraw"
class MxDbLine extends MxDbEntity {
    getTypeName(): string {
        return "MxDbLine"
    }
    worldDraw(pWorldDraw: McGiWorldDraw): void {

    }
    getGripPoints(): THREE.Vector3[] {
        return []
    }
    moveGripPointsAt(index: number, offset: THREE.Vector3): boolean {
       return true
    }
    dwgIn(obj: any): boolean {
       this.onDwgIn(obj)
       return true
    }
    dwgOut(obj: any): object {
        this.onDwgOut(obj)
        return obj
    }
}

Defining line segment data

Now we have a MxDbLine class, used to indicate that it is a line, but it does not have any data related to the line, we have to define some line data, the code is as follows:

class MxDbLine extends MxDbEntity {
    // ...
    points: THREE.Vector3[] = []
    dwgIn(obj: any): boolean {
       this.onDwgIn(obj)
       this.dwgInHelp(obj, ["points"])
       return true
    }
    dwgOut(obj: any): object {
        this.onDwgOut(obj)
        this.dwgOutHelp(obj, ["points"])
        return obj
    }
}

Now we have points data These points can form a segment of the line segment, but it is not yet in the canvas rendering, this time also need to use three.js to achieve a line with the line width of the combination of this how to achieve it?
First of all, you can find a related class like Line2 in the three.js example, which enables line segments with line widths, let's install.

npm i three@0.113.2

Now only need Line2, LineGeometry, LineMaterial these three classes, 你可以不用安装three@113.2的依赖, just need to find it corresponding to the example of the file, introduced to the project can be, the following is the specific implementation of the code:

import { Line2 } from 'three/examples/jsm/lines/Line2'
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
export class MxDbLine extends MxDbEntity { 
      // ...
     // Temporary storage of material
     material: LineMaterial
     worldDraw(pWorldDraw: McGiWorldDraw): void {
        const material = new LineMaterial()
        this.material = material
        const geometry = new LineGeometry()
        // Get the three.js used in mxdraw.
        const THREE = MxFun.getMxFunTHREE()
        // Setting the color
        material.color = new THREE.Color(this.color)

        // line2 must be set to the resolution
        const canvas = MxFun.getCurrentDraw().getCanvas()
        material.resolution.set( canvas.width, canvas.height)
        // Set the transparency, because that's how you cover the underlying cad drawing.
        material.transparent = true

        // Set the point vector position, line2 needs to be set like this
        const positions: number[] = []
        for(let i = 0; i < this.points.length; i++) {
            positions.push(this.points[i].x, this.points[i].y, (this.points[i] as any)? .z || 0)
        }
        geometry.setPositions(positions)

        const line2 = new Line2(geometry, material)
        // Finally draw the line segment generated by this three.js
        pWorldDraw.drawEntity(line2)
    }
}

Configuration of width

Now that we're basically drawing lines with the Line2 class provided in the three.js example, MxDbLine can also display a line segment in its entirety, but it doesn't have a width yet.
In MxDbEntity provides dLinewidth attribute for line width, with lineWidthByPixels attribute to indicate whether the line width always follows the screen width, that is, canvas scaling, the width of the line is always the same, when the lineWidthByPixels is false it is another kind of coordinate system in three.js When lineWidthByPixels is false, it's another coordinate system in three.js. This width is fixed, and won't change as the canvas scales.
To realize these two widths also need to understand the MxDbEntity override method onViewChange when the canvas is scaled onViewChange will be executed, also need to understand is to convert the current screen coordinate length to three.js coordinate system length, in mxdraw provides a MxFun. screenCoordLong2World to convert.
Default dLinewidth are following the width of the screen, we need to record the current drawing of this line segment, 1 screen pixels into the three.js coordinate system length of the value of how much, and then need to later according to lineWidthByPixels attribute to determine whether to follow the screen pixels of the width or the same three.js coordinate system as a fixed width.
If lineWidthByPixels = false, then we can use the value of the length of the three.js coordinate system recorded at the time of drawing to compare to the length of the three.js coordinate system at this point in time at 1 screen pixel, which gives us a linewidth ratio, which we can then multiply by the dLinewidth width we've set to achieve the desired width. This will give you a linewidth ratio.
If lineWidthByPixels = true you don't need to bother, dLinewidth is the width we need, the specific code is as follows:

export class MxDbLine extends MxDbEntity {
    // Record the length of three.js in 1 screen pixel Scale
     _lineWidthRatio: number
    // Update the actual line width
    updateLineWidth() {
        if(!this._lineWidthRatio) {
            this._lineWidthRatio = MxFun.screenCoordLong2World(1)
        }
        this.material.linewidth = this.lineWidthByPixels ? this.dLineWidth : this.dLineWidth * this._lineWidthRatio / MxFun.screenCoordLong2World(1)
    }
     worldDraw(pWorldDraw: McGiWorldDraw): void {
        // ...
        this.updateLineWidth()
        // ...
     }
    // Trigger update rewrite rendering as soon as canvas view zoom changes
     onViewChange() {
        // Only update to adjust the width immediately if it's in units of three.js length at the time
        if(!this.lineWidthByPixels) {
            this.setNeedUpdateDisplay()
            MxFun.updateDisplay()
        }
        return true
    }
    // By the way, we've written in a pinch move so that we can move each vector point to change the line segment.
    getGripPoints(): THREE.Vector3[] {
        return this.points
    }
    moveGripPointsAt(index: number, offset: THREE.Vector3): boolean {
        this.points[index] = this.points[index].clone().add(offset)
       return true
    }
    // The _lineWidthRatio property must always be present for the line width to be correct.
    dwgIn(obj: any): boolean {
       this.onDwgIn(obj)
       this.dwgInHelp(obj, ["points", "_lineWidthRatio"])
       return true
    }
    dwgOut(obj: any): object {
        this.onDwgOut(obj)
        this.dwgOutHelp(obj, ["points", "_lineWidthRatio"])
        return obj
    }
}

The last thing is to use the MxDbLine class we wrote with the following code:

import { MxFun, MrxDbgUiPrPoint } from "mxdraw"
const drawLine = ()=> {
    const line = new MxDbLine()
    line.dLineWidth = 10
    const getPoint = new MrxDbgUiPrPoint()
    // This is the dynamic draw function set during the drawing process.
    getPoint.setUserDraw((currentPoint, pWorldDraw) => {
        if(line.points.length === 0) return
        if(line.points.length >= 2) {
            pWorldDraw.drawCustomEntity(line)
        }
        pWorldDraw.drawLine(currentPoint, line.points[line.points.length - 1])
    })
    getPoint.goWhile(()=> {
        // Left mouse click
        line.points.push(getPoint.value())
    }, ()=> {
        // End drawing with the right mouse button
        MxFun.getCurrentDraw().addMxEntity(line)
    })
}

The process of drawing a line segment with width is shown below:

This is what it looks like when the drawing is complete:

Set line.lineWidthByPixels to false When scaling the canvas, the line segments won't always be the width of the screen, but the actual width of three.js at the time of drawing.
Line segments with widths do not grow larger with the screen when the canvas is scaled, as shown below:

Here is the complete code for MxDbLine:.

import { McGiWorldDraw, McGiWorldDrawType, MxDbEntity, MxFun } from "mxdraw"
import { Line2 } from 'three/examples/jsm/lines/Line2'
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
export class MxDbLine extends MxDbEntity {
    points: THREE.Vector3[] = []
    getTypeName(): string {
        return "MxDbLine"
    }
    material: LineMaterial
    _lineWidthRatio: number
    worldDraw(pWorldDraw: McGiWorldDraw): void {
        const material = new LineMaterial()
        this.material = material
        const geometry = new LineGeometry()
        // Get the three.js used in mxdraw.
        const THREE = MxFun.getMxFunTHREE()
        // Setting the color
        material.color = new THREE.Color(this.color)
        // line2 must be set to the resolution
        const canvas = MxFun.getCurrentDraw().getCanvas()
        material.resolution.set( canvas.width, canvas.height)
        // Set the transparency, because that's how you cover the underlying cad drawing.
        material.transparent = true
        // Update the line width
        this.updateLineWidth()
        // Set the point vector position, line2 needs to be set like this
        const positions: number[] = []
        for(let i = 0; i < this.points.length; i++) {
            positions.push(this.points[i].x, this.points[i].y, (this.points[i] as any)? .z || 0)
        }
        geometry.setPositions(positions)
       const line2 = new Line2(geometry, material)
        pWorldDraw.drawEntity(line2)
    }
    updateLineWidth() {
        if(!this._lineWidthRatio) {
            this._lineWidthRatio = MxFun.screenCoordLong2World(1)
        }
        this.material.linewidth = this.lineWidthByPixels ? this.dLineWidth : this.dLineWidth * this._lineWidthRatio / MxFun.screenCoordLong2World(1)
    }
    onViewChange() {
        this.setNeedUpdateDisplay()
        MxFun.updateDisplay()
      
        return true
    }
    getGripPoints(): THREE.Vector3[] {
        return this.points
    }
    moveGripPointsAt(index: number, offset: THREE.Vector3): boolean {
        this.points[index] = this.points[index].clone().add(offset)
       return true
    }
    dwgIn(obj: any): boolean {
       this.onDwgIn(obj)
       this.dwgInHelp(obj, ["points", "_lineWidthRatio"])
       return true
    }
    dwgOut(obj: any): object {
        this.onDwgOut(obj)
        this.dwgOutHelp(obj, ["points", "_lineWidthRatio"])
        return obj
    }
}

Demo source code link:

https://github.com/mxcad/mxdraw-article/tree/master/mxdraw%E5%A6%82%E4%BD%95%E9%85%8D%E5%90%88three.js%E5%AE%9E%E7%8E%B0%E5%B8%A6% E7%BA%BF%E5%AE%BD%E7%9A%84%E7%BA%BF%E6%AE%B5/demo
Above, online CAD how to cooperate with three.js draw line segment with line width function is completed, there are unclear please move to the official website of the dream CAD control.

How to customize an isosceles triangle in online CAD (mxdraw library)

MxCAD — Fri, 08 Mar 2024 08:37:56 +0000

preamble

Web CAD refers to computer-aided design software that can be run in a Web browser, also known as WebCAD, which can be interacted and operated through a Web browser so that users do not need to download and install CAD applications, but rather browse, modify, interact with and save CAD drawings directly on the Web interface. Nowadays, web-based CAD has become a popular design tool and many designers and engineers are using it for their design work. However, due to the functionality and performance limitations of the web version of CAD , it still has certain limitations relative to the desktop version of CAD, the following we use the industry's representative product dream CAD cloud diagram (H5 online CAD), to complete a custom isosceles triangle graphics.

Write an isosceles triangle shape class

We know that to form a triangle we must need three points, so we can extend a triangle with the custom shape class MxDbShape provided by the mxdraw library. 1) First of all, we are in the src/App.vue file to find hit in the contents of continue to write down, the code is as follows:

import { MxDbShape } from "mxdraw"
// ... Other content
export class MxDbTriangle extends MxDbShape { 
     // This is necessary to add a transport value to the points attribute, which represents the coordinates of the three points.
     points: THREE.Vector3[] = []
     protected _propertyDbKeys = [. .this._propertyDbKeys, "points"]
    // We'll just override the getShapePoints method so that we can render the three points directly.
    getShapePoints(): THREE.Vector3[] {
        return this.points
    }
}

Above is the implementation of a common triangle class, just add three points to the points, will form a triangle, you can also use other properties to represent the three points of the triangle, such as point1, point2, point3;
2）But the triangle is just a static triangle, you can't move the three points of the triangle, nor can you move the whole triangle;
3）So we can also rewrite a couple of methods to support moving triangles or points that make up triangles on the canvas, as follows:

import { MxDbShape } from "mxdraw"
export class MxDbTriangle extends MxDbShape { 
  // ...
  // Calculate the center of the triangle so that we can control the entire triangle from the midpoint.
  getCenter() {
        const _points = this.getShapePoints()
        // Calculate the number of points
        const numPoints = _points.length;
        // Calculate the sum of the vectors with points
        let sum = new THREE.Vector3();
        for (let i = 0; i < numPoints; i++) {
            sum.add(_points[i]);
        }
        const center = sum.divideScalar(numPoints);
        return center
  }
  // Returns the coordinates of multiple points that can be manipulated and moved, only if you know where the point you want to manipulate is located above it.
   getGripPoints() {
        return [... .this.points, this.getCenter()]
    }
    // Here's where we start moving the position of the point. offset is the offset of the mouse click on the action point, so we can change the position of the point by adding it.
    // So if it's the midpoint, we'll offset all three points of the triangle, and that'll move the whole triangle.
    moveGripPointsAt(index: number, offset: THREE.Vector3): boolean {
        if (index === 3) {
            this.points = [this.points[0].clone().add(offset), this.points[1].clone().add(offset), this.points[2].clone().add(offset)]
        } else {
            this.points[index] = this.points[index].clone().add(offset)
        }
        return true
    } 
}

With triangles, so let's think about what an isosceles triangle looks like. The following is just one way of realizing this, and you can do it in other ways as well. 1) First of all, isosceles triangles are also triangles, so we represent the three points of an isosceles triangle by three points: the bottom start and end points, and the vertex. 2) We need to know the midpoint to calculate the height of the triangle, and then confirm the direction of the triangle through the relationship between the position of the three points, it is best to get the actual location of the vertices of the triangle, the code is as follows:

// Isosceles Triangle
export class MxDbIsoscelesTriangle extends MxDbTriangle {
    protected _propertyDbKeys = [... .this._propertyDbKeys]
    getShapePoints() {
        const [baseStart, baseEnd, topPoint] = this.points
        // Calculate the midpoint of the base of an isosceles triangle.
        const midpoint = baseStart.clone().add(baseEnd).multiplyScalar(0.5);
        // Calculate height and vertex position
        const height = topPoint.distanceTo(midpoint);
        // Calculate the position of topPoint with respect to baseStart and baseEnd.
        const baseVector = new THREE.Vector3().subVectors(baseEnd, baseStart).normalize();
        const perpendicularVector = new THREE.Vector3().crossVectors(baseVector, new THREE.Vector3(0, 0, 1)).normalize();
        const direction = new THREE.Vector3().subVectors(topPoint, midpoint).dot(perpendicularVector);
        const vertex = midpoint.clone().addScaledVector(perpendicularVector, direction >= 0 ? height : -height);
        // Arrange the three dots counterclockwise.
        const _points = [baseStart, baseEnd, vertex];
        return _points.
    }
    getGripPoints() {
        return [... .this.getShapePoints(), this.getCenter()]
    }
}

This is all there is to realizing an isosceles triangle.

So we want to draw this isosceles triangle on the canvas should be realized how? 1) First we need to click on a button that indicates to start drawing an isosceles triangle; 2) Then we need to listen to the click event on the canvas and record the click position to convert it to three.js coordinates; 3) Finally, add the coordinate values to the MxDbIsoscelesTriangle instance. We need the position coordinates of three points, so we need to listen to three clicks. The above steps are a bit tedious, so the mxdraw library provides MrxDbgUiPrPoint to help us simplify the above steps, the code is as follows:

import { MrxDbgUiPrPoint } from "mxdraw"
const getPoint = new MrxDbgUiPrPoint()
async function drawTriangle() {
    // represents an isosceles triangle
    const triangle = new MxDbIsoscelesTriangle()
    // This is where you get the first mouse click and automatically convert it to three.js coordinates for you.
    const pt1 = await getPoint.go()
    triangle.points.push(pt1)
    // We may need a drawing process, which can be accomplished in this way
    getPoint.setUserDraw((currentPoint, draw) => {
        // Since this dynamic drawing now has only two known points, it can't form a triangle, so we'll draw a straight line to indicate that we're drawing the base of the triangle
        draw.drawLine(currentPoint, pt1)
    })
    // At this point, the pt2 coordinate is obtained by tapping on the screen as follows
    const pt2 = await getPoint.go()
    triangle.points.push(pt2)
   // Now that the triangle example has two more points, we can draw the triangle directly with the dynamic drawing process, and see in real time what the triangle looks like now.
     getPoint.setUserDraw((currentPoint, draw) => {
        // To set the best point of the triangle
        triangle.points[2] = currentPoint
        // and draw it.
        draw.drawCustomEntity(triangle)
    })
    // Finally, we'll tap the screen again to finalize the shape of the triangle.
    const pt3 = await getPoint.go()
    triangle.points[2] = pt3
  // Finally, add it to the control to render it, and the entire triangle is drawn.
    MxFun.getCurrentDraw().addMxEntity(triangle)
}
// Finally, you can start drawing isosceles triangles by triggering the drawTriangle function when you click the button.

4) Let's put this function in a button click event and go ahead and add new code in the of App.vue:.

<button @click="drawTriangle">Draw Isosceles Triangle</button>

Now you can see whether the function of drawing isosceles triangles is realized, the effect is as follows:

Try moving the isosceles triangle by clicking on the center pinch point, the effect is shown below:

We finally concluded that first you need to first build an online CAD web page, where you can draw custom isosceles triangles, followed by the need for the Node environment, the Vite front-end engineering project, the use of mxdraw, the conversion of CAD drawings, the implementation of custom shapes, and custom shapes, we first defined the triangle, and according to the triangle definition of isosceles triangle class. In the rendering, we can see that the isosceles triangle has a stroke effect and a fill effect, these are the functions provided by the base class of the custom shape, and you only need to set the corresponding attributes to achieve the corresponding effect, the attributes and methods of the custom shape class are described in the following. https://mxcad.github.io/mxdraw_api_docs/classes/MxDbShape.html Finally there are no problems, and we can get to the root of the project by running the command.

npm run build

Packaged files with packaged online version of the front-end resources, in the dist directory is the specific packaged code.
DEMO source link: https://github.com/mxcad/mxdraw-article/tree/master/mxdraw%E5%A6%82%E4%BD%95%E9%85%8D%E5%90%88three.js%E5%AE%9E%E7%8E%B0% E5%B8%A6%E7%BA%BF%E5%AE%BD%E7%9A%84%E7%BA%BF%E6%AE%B5/demo

WEB CAD Edit DWG (MxCAD Development SDK)

MxCAD — Thu, 14 Dec 2023 02:18:59 +0000

preamble

Many enterprises have online browsing and editing of DWG files within the demand, today to give you a talk about online CAD SDK how to integrate and secondary development to complete the editing function, the following project is mainly used for the integration of MxCad online editing page, through a number of configurations and plug-ins to achieve their own drawings editing page, MxCad online editing front-end project is based on Vue3 and vuetify3 MxCad online editing front-end project is based on Vue3 and vuetify3 UI framework.

H5 version

Demo address. https://demo.mxdraw3d.com:3000/mxcad/
Packaging source code download location. https://demo.mxdraw3d.com:3562/MxCADCode.7z
After decompressing the directory, there are the following directories.
dist: MxCad online editing project packaged front-end resources MxCAD: Plug-in for secondary extensions to MxCad for online editing project projects MxCADiframe: Sample Demo for Embedding MxCad Online Editing Project via iframe

First, go to the MxCAD and MxCADiframe directories, open the command line and run the command npm install. Run the command to debug the MxCAD project: npm run dev
The result after running.

Run debugging MxCADiframe project command: npm run serve , at this time directly open may not be able to get the drawing or iframe prompts localhost has refused to connect the situation, this is because it must be the same source to work, here on the visit : http://localhost:8081/?debug=true That is to say, you have to load the front-end resources in the dist directory on the same port under the server of your own project.
Then the front-end through the iframe introduced to their own projects. The result after running.

The entire secondary development process of the MxCad online editing front-end project is as follows.
(1)Download the source code and unzip it, then go to the MxCAD directory and run npm install to install the dependencies;
(2)Run npm run dev to debug and develop your own requirements;
(3)Run npm run build to package the plugin, and a js file will be generated in the dist directory;
(4)Copy the entire dist directory of front-end resources to your own project's (debugging) server;
(5)Go to the MxCADiframe project and run npm install to install the dependencies;
(6)Set the src attribute of the iframe in its src/components/Home.vue to the address of the front-end resource you just copied to your project server;
(7)Finally, you can see the effect without problems, in accordance with the MxCADiframe catalog this Demo way, in their own front-end project with iframe embedded MxCad online editing project.
The above only describes the front-end part of what needs to be done, but in fact we need the back-end cooperation, and the implementation of some of the necessary back-end interfaces, the entire project complete functionality such as uploading drawings, save the dwg and so on need to be realized, so we also need to download the MxDraw cloud map development kit ( https://www.mxdraw.com/download.html So, we also need to download the MxDraw package (), unzip it after downloading, and then learn how to use the MxDraw package Getting Started document: ( https://help.mxdraw.com/?pid=32 )

We can directly copy all the files of the whole dist to MxDrawCloudServer\SRC\TsWeb\public\mxcad to directly overwrite all the files , as shown:

Then double click to run Mx3dServer.exe , as follows:

Click "Start Web Services" and then click "Start MxCAD" as shown in the figure:

At this point you can see the full page of your modifications. One of the MxCADiframe buttons that opens the page in the MxCADiframe directory extracted from MxCADCode.7z is its source code.
As mentioned above, you can know the whole front-end need to do some of the secondary development process, and for the need to realize their own upload drawings to save drawings of the service interface, you need to read the MxDraw cloud map development kit related documents: https://help.mxdraw.com/?pid=32 For those who need to realize the service interface of uploading and saving drawings by themselves, they need to read the related documents of MxDraw Development Kit: . Then refer to the corresponding interface source code in the MxDraw package, and realize it according to your own needs or directly reuse the interface provided by the MxDraw package. Below we have a detailed look at the dist directory, through the configuration and plug-ins to achieve the needs of secondary development.

Understanding the dist catalog

The dist directory is the packaged front-end resources, which we can directly deploy on our own server. the Node service started by the MxCAD project for debugging is accessing the index.html file in the dist directory. The MxCAD project package npm run build is just responsible for generating a test.js file (the default sample test plugin) for the plugins directory in the dist directory.
A few important configuration files.
(1)mxUiConfig.json: mxUiConfig.json file configuration under dist, mainly for some simple configuration of UI;
(2)title: Browser title, as shown:

(3)headerTitle: Add to automatically replace it with the version number, as shown:

(4)mTitleButtonBarData: array element where prompt represents a prompt and cmd represents a command, clicking the button executes a command, as shown:

(5)The mRightButtonBarData and mLeftButtonBarData: isShow indicate whether or not to show, as shown:

(6)mMenuBarData: list menu list can always be nested in the list to form a multi-level menu, as shown in the figure:

(7)footerRightBtnSwitchData: ["Raster", "Orthogonal", "PolarAxis", "ObjectSnap", "ObjectTrack", "DYN"] Show buttons with the corresponding names, empty arrays are not shown , as shown:

More configuration file details

mxServerConfig.json.
uploadFileConfig: is based on the WebUploader is based on the WebUploader implementation of the file upload, part of the configuration parameters it, the back-end upload interface description is as follows.
(1)baseUrl: the same backend server address, the following relative interfaces are all based on the same server address Default backend service source code location in the CloudMap development package location:.
Windows:

linux:

(2)fileisExist: This interface returns data.ret === "fileAlreadyExist" which means that the file is already existed by md5 checking, if not, it needs to be uploaded. The POST request will carry two parameters { fileHash: "file md5", filename: "file name" } can be based on their own request to achieve the corresponding back-end logic Default upload service related interface implementation in the cloud map development kit location, windows the same, as shown:

(3)chunkisExist: This POST interface request carries the parameters { chunk: "chunk", chunks: "total chunks", fileName: "file name", fileHash: "file md5", size: "size of the chunk file", } backend returns data.ret === " data.ret === " chunkAlreadyExist" means the chunk already exists otherwise it does not exist.
(4)mxfilepath: Indicates which directory in the server static resource directory the uploaded drawing file and converted to mxweb file format is stored in, and the back-end file saved to that location must be this path must be this: fileHash + "." + type + ".mxweb" fileHash represents the md5 value of the cad drawing source file type represents the original file extension of the cad drawing.
(5)saveDwgUrl: save DWG file service address, the interface how to implement the follow-up can provide the development kit Default save file Node service location.

(6)wasmConfig: the configuration here to distinguish which wasm related files to use, specifically look at the configuration file in the dist has a detailed description.

Plugin configuration file plugins/config.json.

plugins: is to store the plugin name of the file, it will load the corresponding current directory in order of the name of the corresponding js script, such as a plugins/test.js fill in a test, and the MxCAD directory is designed to create dist/plugins in the corresponding js file as follows.

MxCAD Catalog Description.

a.Based on vite, you can run npm run dev directly to start the server to browse the pages in the dist directory, and modify the .ts and .vue files in MxCAD will be compiled automatically, and the page will be refreshed automatically.
b.Based on vite, you need to run npm run build manually to package the dist directory, and after packaging, the dist directory will be placed directly in dist/plugins.
c.import introduces mxcad, mxdraw, vue actually used in the dist packaged front-end resources, not a brand new mxcad, mxdraw, vue
d.The configurations of vite.config.ts in the MxCAD directory and the plugins in dist/plugins/config.json should correspond to each other
Tip: For secondary development you can read the mxcad front-end library documentation and the mxdraw front-end library documentation to refer to the API and the Getting Started documentation to realize some of your needs.
In the src of the MxCAD directory we provide a large number of test cases for various functions implemented in the mxcad library, which can be run during debugging, either through the test buttons on the page or by typing commands from the command line, as shown in the figure:

The code corresponding to a function on a button can also be found by searching the source code for the corresponding implementation, as shown in the following figure:

development is completed after the plugin, run npm run build can be packaged into the dist/plugins directory, now we just need to put the dist directory on the server, through the iframe embedding, and the MxCADiframe project is such a simple demo, you can refer to it to complete a simple dist front-end resources integrated into your You can refer to it to complete the simple integration of dist front-end resources into your project. In the src directory of MxCAD directory, there is an iframe.ts file, which corresponds to the postMessage in MxCADiframe project. As shown in the picture:

We recommend this approach for custom requirements and integrated deployments.

electron version

We offer an electron version for desktop applications, download it here:
https://gitee.com/mxcadx/mxdraw-article/blob/master/MxCad项目二次开发插件集成/MxCADAppElectron.zip
Once downloaded and extracted, install the dependency npm install and then run npm run dev to start the electron project.
For electron version, the front-end secondary development plugin (that is, the js file generated by the MxCAD directory mentioned above) does not have any change, we just need to copy the corresponding js script packaged under dist/plugins to the electron project project now downloaded and unpacked under the dist/2d/dist/plugins directory to overwrite it. That's it.
The only difference is that the electron version has a new MxElectronAPI object on the window, which provides the ability to communicate with the main thread. We can write front-end secondary development plug-ins through the MxElectronAPI to determine whether the electron environment. The electron project , there are also their own plug-ins for electron main thread for some secondary development needs . The plugin is written in ts file and packaged based on vite The corresponding vite configuration: vite.plugins.config.ts
Steps to create a new electron project plugin.
(1)Create the src/plugins directory if it exists;
(2)Create a plugin directory such as testPlugin, and then create an index.ts as the plugin entry file in that directory;
(3)vite.plugins.config.ts New plugin entry configuration pluginEntryFileName: "plugins/testPlugin/index.ts"Run command to debug: dev:plugins
(5)Run the command package: build:plugins
(6)If you create preload.ts in the testPlugin and export an object by default, this object holds the API used to communicate with the page, you can refer to the preload script if it is difficult to understand: https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-preload
The preload.ts here is the preload script. The default exported object is the front-end window.MxElectronAPi.plugin directory name (namespace) object defined by contextBridge.exposeInMainWorld, such as the testPlugin directory created now, then the front-end access is window. MxElectronAPi.testPlugin is the default exported object. Similarly the preload2d.ts exported object will override the same values of the properties in the preload.ts exported object, but preload2d.ts is only valid for pages displaying 2D drawings. preload3d.ts is different from preload2d.ts in that it only works on pages displaying in 3D. preload.ts is a public
(7)plugins can exist many plug-ins, each directory below it is a plug-in, the plug-in directory name is the namespace name, the front-end page access to the object is also window.MxElectronAPI.namespace name.
In the electron project plugin's ts file, we keep the mxAppContext up and down You can access it via global.mxAppContext, which currently mounts several properties and methods: getMainWindow, showMessage, showMessageBoxSync, MainTabs. MainTabs There are corresponding type hints and descriptions in ts.
The following descriptions of the corresponding directories in the electron project:

DEMO source code:

https://gitee.com/mxcadx/mxdraw-article/tree/master/MxCad%E9%A1%B9%E7%9B%AE%E4%BA%8C%E6%AC%A1%E5%BC%80%E5%8F%91%E6%8F%92% e4%bb%b6%e9%9b%86%e6%88%90

Web CAD SDK to draw regular polygonal shapes

MxCAD — Wed, 06 Dec 2023 08:30:27 +0000

preamble
Drawing polygons is one of the common tasks in CAD (Computer Aided Design), and MxCAD is an online CAD-focused front-end library that provides a rich set of drawing and design features that make drawing polygons easy and flexible. In this article, we will walk you through the process of drawing polygons using MxCAD, giving you an in-depth understanding of its basic concepts and features.

mxcad is a TypeScript-based front-end library designed for CAD developers. It provides a rich set of APIs and features for creating, editing and displaying CAD drawings. Various drawing tasks can be realized by importing various modules.
Let's take drawing regular polygons as an example of how to use mxcad to draw polygons. Import the following code snippet into the modules that mxcad and mxdraw will use in this article.

import { DynamicInputType, MrxDbgUiPrInt, MrxDbgUiPrPoint, MxCursorType, MxFun } from "mxdraw" ;
import { MxCpp, McCmColor, McDbCircle, McDbPolyline, McGePoint3d, MxCADUiPrInt, MxCADUiPrPoint } from "mxcad" ;

DynamicInputType, MrxDbgUiPrInt, etc. are function modules provided by MxCAD, while McDbCircle, McDbPolyline are objects that represent CAD graphics.
If you don't understand the API usage examples exported in the text you can find them in the mxcadAPI documentation or the mxdrawAPI documentation
Understanding each step of the computation of the algorithm for generating regular polygons is very important for drawing regular polygons. Here is a detailed explanation of the computeRegularPolygonVertices function:

/**
 * :: Generate vertex coordinates of regular polygons
 * @param {McGePoint3d} centerPoint - center point of polygon
 * @param {McGePoint3d} vertexPoint - polygon vertex
 * @param {number} sides - number of polygon sides (at least 3)
 * @returns {McGePoint3d[]} array of vertex coordinates of the polygon
 */
export function computeRegularPolygonVertices(centerPoint = new McGePoint3d(), vertexPoint = new McGePoint3d(), sides = 3): McGePoint3d[] {
    const verticesArray: McGePoint3d[] = [];
    sides = Math.max(3, sides);
    verticesArray.push(vertexPoint);

    // Calculate the angle increment for each vertex
    const angleIncrement = (Math.PI * 2) / sides.

    for (let i = 1; i < sides; i++) {
        // Calculate the cosine and sine on the angle corresponding to the current vertex
        const cosValue = Math.cos(angleIncrement * i),
            sinValue = Math.sin(angleIncrement * i);

        // Duplicate the center and vertices so as not to modify the values of the original points
        const startPt = centerPoint.clone();
        const endPt = vertexPoint.clone();

        // Calculate the offset with respect to the center point
        const deltaX = endPt.x - startPt.x;
        const deltaY = endPt.y - startPt.y;

        // Calculate the new vertex coordinates from the rotation formula
        const newX = deltaX * cosValue - deltaY * sinValue + startPt.x;
        const newY = deltaX * sinValue + deltaY * cosValue + startPt.y;

        // Create a new vertex object and add it to the array.
        const point = new McGePoint3d(newX, newY);
        verticesArray.push(point);
    }
   return verticesArray;
}

Calculation of polygons
Below is a detailed explanation of each step of the algorithm's calculations:

Initialization parameters: First, the function initializes an empty array verticesArray to store the coordinates of the vertices of the polygon. At the same time, make sure that the polygon's sides are at least 3. If the user inputs a number of sides less than 3, set the number of sides to 3.

const verticesArray: McGePoint3d[] = [];
sides = Math.max(3, sides);
verticesArray.push(vertexPoint);

Calculate the angle increment: Calculate the angle increment between each vertex by dividing the complete circumferential angle (2π) by the number of sides of the polygon.

const angleIncrement = (Math.PI * 2) / sides.

Calculate the vertex coordinates: Calculate the offset of each vertex with respect to the start point using the cosine and sine values. Here the rotation formula is used to calculate the new vertex coordinates by rotating the coordinate system.

const cosValue = Math.cos(angleIncrement * i),
sinValue = Math.sin(angleIncrement * i);

Duplicate Center and Vertex: To prevent modification of the values of the original points, duplicates of the center and vertex are created.

const startPt = centerPoint.clone();
const endPt = vertexPoint.clone();

Calculate Offset: Calculate the offset with respect to the center point, i.e. the position of the vertex with respect to the center point.

const deltaX = endPt.x - startPt.x;
const deltaY = endPt.y - startPt.y;

Rotate to calculate new coordinates: Use the rotation formula to calculate new vertex coordinates and add them to the vertex array.

const newX = deltaX * cosValue - deltaY * sinValue + startPt.x;
const newY = deltaX * sinValue + deltaY * cosValue + startPt.y;
const point = new McGePoint3d(newX, newY);
verticesArray.push(point);

Returns the result: Finally, returns an array of the coordinates of the vertices of the computed polygon.

return verticesArray;

With this algorithm, we can draw regular polygons in CAD, not just simple vertices in a Cartesian coordinate system. This makes the drawing of polygons more flexible and adaptable.
Correspondingly, as we can see from the comments, they compute the vertex coordinates of the entire polygon from the polygon center and polygon vertices.

Other calculation methods
Then in AutoCAD, there are other ways to draw orthogonal polygons, then we will implement these algorithms one by one.
Here is a detailed explanation of the computePolygonVerticesFromEdge function:

/**
 * :: Calculate the coordinates of polygon vertices (based on edges)
 * @param {McGePoint3d} startPoint - the start point of the polygon edge
 * @param {McGePoint3d} endPoint - The end point of the polygon edge.
 * @param {number} sides - number of polygon sides (at least 3)
 * @returns {McGePoint3d[]} array of vertex coordinates of the polygon
 */
export function computePolygonVerticesFromEdge(startPoint: McGePoint3d, endPoint: McGePoint3d, sides: number): McGePoint3d[] {
    // Calculate the length and angle of an edge
    let dx = endPoint.x - startPoint.x;
    let dy = endPoint.y - startPoint.y;
    let length = Math.sqrt(dx * dx + dy * dy);
    let angle = Math.atan2(dy, dx);

    // Calculate the angle increment for each vertex
    let angleIncrement = (2 * Math.PI) / Math.max(3, sides);

    let polygonVertices = [startPoint, endPoint];

    for (let i = 0; i < sides; i++) {
        // Calculate the coordinates of the current vertex
        let x = startPoint.x + length * Math.cos(angle + i * angleIncrement);
        let y = startPoint.y + length * Math.sin(angle + i * angleIncrement);

        // Update the starting point and add it to the array
        startPoint = new McGePoint3d(x, y);
        polygonVertices.push(startPoint);
    }

    return polygonVertices.
}

A detailed explanation of each step of the algorithm's calculations is given below:

Calculate the length and angle of an edge: First, calculate the length and angle of a given edge. This is done by calculating the transverse and longitudinal differences between the start and end points, then calculating the length using the collinearity theorem, and finally calculating the angle using the inverse tangent function.

let dx = endPoint.x - startPoint.x;
let dy = endPoint.y - startPoint.y;
let length = Math.sqrt(dx * dx + dy * dy);
let angle = Math.atan2(dy, dx);

Calculate the angle increment for each vertex: In order to evenly distribute the vertices of the polygon, calculate the angle increment between each vertex.

let angleIncrement = (2 * Math.PI) / Math.max(3, sides);

Initialize the vertex array: Create an array containing the start and end points, this is to ensure that the polygon is closed.

let polygonVertices = [startPoint, endPoint];

Calculate vertex coordinates: Cycle through the coordinates of each vertex. The coordinates of each vertex relative to the start point are computed by a given angular increment using the transformation of the polar coordinate system.

for (let i = 0; i < sides; i++) {
    let x = startPoint.x + length * Math.cos(angle + i * angleIncrement);
    let y = startPoint.y + length * Math.sin(angle + i * angleIncrement);
    startPoint = new McGePoint3d(x, y);
    polygonVertices.push(startPoint);
}

Returns the result: Finally, returns an array of the coordinates of the vertices of the computed polygon.

return polygonVertices.

With this algorithm, we can draw polygons based on the given start and end points.
Here is a detailed explanation of the computePolygonVerticesFromMidpoint function:

/**
 * :: Calculate polygon vertex coordinates (based on midpoints)
 * @param {McGePoint3d} centerPoint - center point of polygon
 * @param {McGePoint3d} edgeMidPoint - the midpoint of an edge of the polygon
 * @param {number} sides - number of polygon sides (at least 3)
 * @returns {McGePoint3d[]} array of vertex coordinates of the polygon
 */
function computePolygonVerticesFromMidpoint(centerPoint = new McGePoint3d(), edgeMidPoint = new McGePoint3d(), sides = 3): McGePoint3d[] {
    const midX = edgeMidPoint.x;
    const midY = edgeMidPoint.y;
    const centerX = centerPoint.x;
    const centerY = centerPoint.y;
    const numberOfSides = Math.max(3, sides);

    // Calculate the distance from the midpoint to the center of the polygon
    const distanceToCenter = Math.sqrt((midX - centerX) ** 2 + (midY - centerY) ** 2);

    // Calculate the radius from the midpoint to the center of the polygon
    const radius = distanceToCenter / Math.cos(Math.PI / numberOfSides);

    // Calculate the starting angle
    const startAngle = Math.atan2(midY - centerY, midX - centerX) - Math.PI / numberOfSides;

    const vertices = [];

    for (let i = 0; i < numberOfSides; i++) {
        // Calculate the angle of the current vertex
        const angle = startAngle + (i * 2 * Math.PI / numberOfSides);

        // Conversion to coordinates in the Cartesian coordinate system from the polar coordinate system
        const x = centerX + radius * Math.cos(angle);
        const y = centerY + radius * Math.sin(angle);

        // Create a new vertex object and add it to the array.
        vertices.push(new McGePoint3d(x, y));
    }

    return vertices.
}

A detailed explanation of each step of the algorithm's calculations is given below:

Get the coordinates of the midpoint and center point: First, get the coordinates of the midpoint of the given edge (edgeMidPoint) and the center point of the polygon (centerPoint).

const midX = edgeMidPoint.x;
const midY = edgeMidPoint.y;
const centerX = centerPoint.x;
const centerY = centerPoint.y;

Calculate the distance from the midpoint to the center and the radius: Use the Pythagorean Theorem to calculate the distance from the midpoint to the center and then calculate the radius of the polygon.

const distanceToCenter = Math.sqrt((midX - centerX) ** 2 + (midY - centerY) ** 2);
const radius = distanceToCenter / Math.cos(Math.PI / numberOfSides);

Calculate the starting angle: Calculate the direction angle from the midpoint to the center using the inverse tangent function and subtract half of the angle increment to ensure an even distribution of polygon vertices.

const startAngle = Math.atan2(midY - centerY, midX - centerX) - Math.PI / numberOfSides;

Calculate vertex coordinates: Cycle through the coordinates of each vertex. Convert angles in polar coordinate system to coordinates in right angle coordinate system by polar coordinate system conversion.

for (let i = 0; i < numberOfSides; i++) {
    const angle = startAngle + (i * 2 * Math.PI / numberOfSides);
    const x = centerX + radius * Math.cos(angle);
    const y = centerY + radius * Math.sin(angle);
    vertices.push(new McGePoint3d(x, y));
}

Returns the result: Finally, returns an array of the coordinates of the vertices of the computed polygon.

return vertices.

With this algorithm, we can draw polygons based on the midpoints of the given edges and the centroid of the polygon.

Interactive drawing process
Above we have introduced these three algorithms, have been autoCAD to draw orthogonal polygon algorithm are simulated, then the next step is to simulate its interactive drawing process, the code is as follows.

/**
 * :: Functions for drawing polygons
 */
export async function drawPolygon() {
    // Create a user input object to get the number of sides
    const getNum = new MxCADUiPrInt();
    getNum.setMessage("\n input side number <5>")

    // Get the number of sides entered by the user
    let sideNum = await getNum.go() as number;
    if (!sideNum) sideNum = 5;

    // Create a user input object that can be used to get the center point or edge of a polygon.
    const getPoint = new MxCADUiPrPoint();
    getPoint.setMessage("\n Specify the center point of the positive polytope");;
    getPoint.setKeyWords("[Side(E)]");

    // Set the cursor type
    getPoint.setCursorType(MxCursorType.kCross);

    // Get the center point or edge of the user input
    const centerPoint = await getPoint.go();

    if (!centerPoint) {
        // If the user selects an edge, enter the edge drawing process
        if (getPoint.isKeyWordPicked("e")) {
            // Get the first endpoint of the edge entered by the user
            getPoint.setMessage("\n the first endpoint of the specified edge");;
            getPoint.setKeyWords("");
            const startPoint = await getPoint.go();

            if (!startPoint) return;

            // Set the user draw callback function to draw polygons in real time.
            getPoint.setUserDraw((currentPoint, pWorldDraw) => {
                const pPolyline = new McDbPolyline();
                // Calculate polygon vertices
                const points = computePolygonVerticesFromEdge(startPoint, currentPoint, sideNum);

                // Add vertices to polygons
                points.forEach((points) => {
                    pPolyline.addVertexAt(point);
                }).

                // Set the polygon to closed
                pPolyline.isClosed = true;

                // Draw polygons in real time
                pWorldDraw.drawMcDbEntity(pPolyline);
            }).

            // Get the second endpoint of the edge entered by the user
            getPoint.setMessage("\n second endpoint of the specified edge");;
            await getPoint.go();

            // Draw polygons and clear draw retention
            getPoint.drawReserve();
        }
        return;
    }

    // Plotting flow after the user selects the center point
    getPoint.setMessage("\n input options");;
    getPoint.setKeyWords("[Inside Circle (I)/Tangent to Circle (C)]");;

    // Get whether the user selected an inside or outside tangent circle
    await getPoint.go();
    let isTangentToTheCircle = true;
    If(getPoint.isKeyWordPicked("i")) isTangentToTheCircle = false;

    // Set the user draw callback function to draw polygons in real time.
    getPoint.setUserDraw((currentPoint, pWorldDraw) => {
        // Get the current drawing color
        let drawColor = MxCpp.getCurrentMxCAD().getCurrentDatabaseDrawColor();

        // Create polygon objects
        const pPolyline = new McDbPolyline();
        pPolyline.trueColor = new McCmColor(drawColor.r, drawColor.g, drawColor.b);

        // Calculate polygon vertices
        const points = isTangentToTheCircle ? computePolygonVerticesFromMidpoint(centerPoint, currentPoint, sideNum) : computeRegularPolygonVertices(centerPoint, currentPoint, sideNum); ? sideNum);

        // Add vertices to polygons
        points.forEach((pt) => {
            pPolyline.addVertexAt(pt);
        }).

        // Set the polygon to closed
        pPolyline.isClosed = true;

        // Draw polygons in real time
        pWorldDraw.drawMcDbEntity(pPolyline);
    }).

    // Get the radius of the circle entered by the user
    getPoint.setMessage("\n the radius of the specified circle");;
    await getPoint.go();

    // Draw polygons and clear draw retention
    getPoint.drawReserve();
}

// Register the function for drawing polygons as an MxCAD command.
MxFun.addCommand("Mx_Polygon", drawPolygon);

User input First, we need to get some information from the user, including the number of sides of the polygon and the location of the center point or edge. To accomplish this, we use the MxCADUiPrInt and MxCADUiPrPoint classes.

const getNum = new MxCADUiPrInt();
getNum.setMessage("\n input side number <5>")
let sideNum = await getNum.go() as number;
if (!sideNum) sideNum = 5;
const getPoint = new MxCADUiPrPoint();
getPoint.setMessage("\n Specify the center point of the positive polytope");;
getPoint.setKeyWords("[Side(E)]");

Here, we set up a message prompting the user to enter the number of sides of the polygon. If the user doesn't enter one, the default is 5. We then create an object for getting the points and set a few parameters, including possible keywords for the user (in this case, a flag for choosing sides).

Select the center point or edge With getPoint.go(), we wait for the user to select either the center point or the edge. If the user selects an edge, we go into the process of drawing the edge, otherwise, we continue with the center point.

const centerPoint = await getPoint.go();
if (!centerPoint) {
    if (getPoint.isKeyWordPicked("e")) {
        // Drawing the flow on the side...
    }
    return;
}

This step is the first interaction between the user and the program, and allows the user to choose whether to draw the polygon through the center point or to select an edge to start with. This increases the flexibility of the user and makes the tool more useful.

Side drawing process If the user selects an edge, we first get the starting point of the edge and then set the user draw callback function. This callback function is used to draw the polygon in real time so that the user can see a preview of what the edge will look like as it is selected.

const startPoint = await getPoint.go();
if (!startPoint) return;

getPoint.setUserDraw((currentPoint, pWorldDraw) => {
    // Draw polygons in real time...
}).

await getPoint.go();
getPoint.drawReserve();

In this step, we calculate and draw a preview effect of the polygon in real time using the starting point entered by the user. The user can see a dynamic polygon that updates as the mouse moves.

Center point drawing process If the user selects a center point, we first get whether the user selected an inner or outer tangent circle. Then, we set up the user draw callback function to draw the polygon in real time and get the radius of the circle entered by the user.

getPoint.setMessage("\n input options");;
getPoint.setKeyWords("[Inside Circle(I)/Tangent to Circle(C)]");;
await getPoint.go();

getPoint.setUserDraw((currentPoint, pWorldDraw) => {
    // Draw polygons in real time...
}).

getPoint.setMessage("\n the radius of the specified circle");;
await getPoint.go();
getPoint.drawReserve();

This step optionally specifies whether the polygon is internally attached to the circle or externally tangent to the circle, further adding to the functionality of the tool.

Real-time polygon drawing After the user selects a center point or an edge, we calculate the vertices of the polygon in real time through the user draw callback function and draw a preview of the polygon in real time using the drawing tools provided by MxCAD.

getPoint.setUserDraw((currentPoint, pWorldDraw) => {
    // Get the current drawing color...
    let drawColor = MxCpp.getCurrentMxCAD().getCurrentDatabaseDrawColor();

    // Create polygon objects...
    const pPolyline = new McDbPolyline();
    pPolyline.trueColor = new McCmColor(drawColor.r, drawColor.g, drawColor.b);

    // Calculate polygon vertices...
    const points = isTangentToTheCircle ? computePolygonVerticesFromMidpoint(centerPoint, currentPoint, sideNum) : computeRegularPolygonVertices(centerPoint, currentPoint, sideNum); ? sideNum);

    // Add vertices to polygons...
    points.forEach((pt) => {
        pPolyline.addVertexAt(pt);
    }).

    // Set the polygon to be closed...
    pPolyline.isClosed = true;

    // Draw polygons in real time...
    pWorldDraw.drawMcDbEntity(pPolyline);
}).

This step is the key to the entire process and shows how the user interacts with real-time drawing. The user can dynamically see the shape of the polygon by moving the mouse after selecting the center point or edge. This real-time feedback is an important factor in improving the user experience.

Registered as MxCAD command Finally, we register the functions for drawing polygons as MxCAD commands so that they can be called by the user from the command line.

MxFun.addCommand("Mx_Polygon", drawPolygon);

In this step-by-step series, we demonstrate how to use MxCAD to implement an interactive polygon drawing. This not only covers the processing of user input, but also shows how to combine the functionality provided by MxCAD for real-time drawing and user selection. By using mxcad, it enables the developer to focus on the business logic rather than the underlying graphics processing and interaction handling.

View the actual effect:https://demo.mxdraw3d.com:3000/mxcad/ Type Mx_Polygon at the command line of the page

WEB CAD front-end framework construction (web page display CAD drawings)

MxCAD — Thu, 09 Nov 2023 08:20:33 +0000

preamble

DWG format drawings are the private format of AutoCAD, many users need to view and edit CAD drawings on the web side, the traditional way is to buy the OCX solution of MxCAD Controls, which is a long time in development and rich in editing features, but because the new version of Google Chrome no longer supports AcitveX controls, so more users want to realize online CAD functionality in the way of Html5. Today we will talk about how to display CAD drawings on web page with H5 program of MxCADcontrol.
WEB CAD functionality testing:
https://demo.mxdraw3d.com:3000/mxcad/

Install the environment needed for front-end engineering

We need to install the Node environment first to initialize a engineered front-end project. You can follow the link below to install and configure the Node environment: https://blog.csdn.net/WHF__/article/details/129362462
With the Node environment on the npm package management tools, we now need to initialize a simplest front-end project through the Vite this packaging tool, here you can directly refer to the vite official documents: https://cn.vitejs.dev/guide/
You can create a Vite-based front-end project by simply typing the following command at the command line.

npm create vite@latest

At this point the command line appears with a number of choices:
Ok to proceed? (y) For this option, just type y and press enter.
? Project name: " vite-project Here is the name of the project, which is vite-project by default.
Of course you can change the name to something else:

Select a framework: " - Use arrow-keys. Select a framework: " - Use arrow-keys. return to submit.
Vanilla
Vue
React
Preact
Lit
Svelte
Others

Here is for you to choose a front-end framework, this article to Vue as an example. If you don't know what is a front-end framework, or don't know from these frameworks can only choose which one, then here is the choice of Vue, directly up and down keys to select, enter key to determine the choice, follow my steps can be:
Select a variant: " - Use arrow-keys. return to submit.
TypeScript
Customize with create-vue
Customize with create-vue
Nuxt
If you still don't understand what these are choices, choose TypeScript, because the examples in this article are developed in TypeScript.
Create vite project option:

When you see the following prompt it means that you have created a front-end project out of it:
** Now run: cd vite-project npm install npm run dev**

Then we follow the above information directly: 1) First cd vite-project into this directory; 2) Then npm install to download the front-end project dependencies; 3) Finally, run npm dev and you will see the following message. VITE v4.3.9 ready in 1042 ms ➜ Local. http://127.0.0.1:5173/ ➜ Network: use --host to expose ➜ press h to show help At this point we'll open it directly in the browser http://127.0.0.1:5173/ and you will see the page. Displaying CAD drawings on the page
see the page that there is no problem, we return to the command line window, press ctrl + c to exit the page of the service, and then we have to install the mxdraw front-end library, we render drawings are to be carried out around it, and then enter the command.

npm i mxdraw@latest

We download the latest version directly.

Two links are given here, read them if you can, it doesn't matter if you can't read them, have an impression first. For an introduction to mxdraw check out: https://mxcadx.gitee.io/mxdraw_docs/start/quickStart.html#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F For conversion of cad drawings to mxdraw supported rendered files please check out. https://mxcadx.gitee.io/mxdraw_docs/start/drawingConversion.html#%E4%B8%80%E3%80%81%E4%B8%8B%E8%BD%BDmxdraw%E4%BA%91%E5%9B%BE%E5% BC%80%E5%8F%91%E5%8C%85 We now have mxdraw installed, and at this point we need to start writing code.
First find the App.vue file in the src directory of the project. Find the code ... , delete it all and replace it with the following code.

<div style="height: 80vh; overflow: hidden;">
  <canvas id="mxcad"></canvas>
</div>

Then we find the content in and replace it with the following:

import Mx from "mxdraw"
Mx.loadCoreCode().then(()=> {
  // Creating Control Objects  
  Mx.MxFun.createMxObject({
      canvasId: "mxcad", // canvas elemental id
       // The converted cad drawing file actually accesses the http://127.0.0.1:5173/buf/$hhhh.dwg.mxb[index].wgh
      cadFile: "/buf/hhhh.dwg",
  })
})

That's not all, you don't have a converted render file for /buf/hhhh.dwg in your project. So we need to prepare a CAD drawing to do a conversion. With the command to convert drawings you may not feel good understanding, we can use the cloud development kit software to convert CAD drawings. Specific tutorials you can follow step by step to do it.
The details are as follows:
https://mxcadx.gitee.io/mxdraw_docs/start/drawingConversion.html#%E4%B8%80%E3%80%81%E4%B8%8B%E8%BD%BDmxdraw%E4%BA%91%E5%9B%BE%E5% bc%80%e5%8f%91%e5%8c%85
At this point, the converted buf directory in the project's public directory can be, to render this CAD drawing just need to change cadFile: "/buf/hhhh.dwg" to the name of their own converted drawings can be run.
The location of the converted file:

Finally, we'll just type: at the command line.

npm run dev

At this point you should be able to see a page showing the CAD drawing.