mxcad 1.0.368 → 1.0.370
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +839 -3
- package/dist/mxcad.d.ts +16 -7
- package/dist/mxcad.es.js +91 -27
- package/dist/mxcad.umd.js +1 -1
- package/dist/wasm/2d/mxdrawassembly_min.js +2390 -2356
- package/dist/wasm/2d/mxdrawassembly_min.wasm +0 -0
- package/dist/wasm/2d-st/mxdrawassembly_min.js +2386 -2353
- package/dist/wasm/2d-st/mxdrawassembly_minst.wasm +0 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,3 +1,839 @@
|
|
|
1
|
+
# Preface
|
|
2
|
+
|
|
3
|
+
If you have any questions during the use of mxcad, feel free to contact us. Contact: 710714273@qq.com
|
|
4
|
+
|
|
5
|
+
Official mxcad website: <https://www.webcadsdk.com/>
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
# Quick Start with mxcad
|
|
10
|
+
|
|
11
|
+
mxcad supports online rendering of `.mxweb` format files (this file format is our unique front-end CAD format). CAD drawing files (DWG, DXF) can be converted into .mxweb files via the drawing conversion program provided in our [mxdraw CloudDraw development package](https://www.webcadsdk.com/). The converted `.mxweb` files will be handed over to mxcad for browsing and editing in web pages. The edited `.mxweb` files can similarly be converted back into CAD drawing files through the drawing conversion program.
|
|
12
|
+
|
|
13
|
+
For specific steps on converting CAD drawing files to `.mxweb` format, please refer to the [drawing conversion steps](#drawing-conversion-steps) below.
|
|
14
|
+
|
|
15
|
+
The development of mxcad requires dependency on mxdraw, and the two need to work together. Therefore, if you are unfamiliar with the mxdraw library, please refer to：<https://github.com/mxcad/mxdraw/>
|
|
16
|
+
|
|
17
|
+
## Using mxcad with Vite
|
|
18
|
+
|
|
19
|
+
In this section, we will introduce how to create a simple mxcad project locally. The created project will use a build setup based on Vite.
|
|
20
|
+
|
|
21
|
+
First, ensure that you have installed [Node.js](https://nodejs.org/en), then navigate to the directory where you need to create the project:
|
|
22
|
+
|
|
23
|
+
1. Run the following commands in the command line to initialize the project and install Vite and mxcad
|
|
24
|
+
|
|
25
|
+
```sh
|
|
26
|
+
npm init -y
|
|
27
|
+
npm install vite -D
|
|
28
|
+
npm install mxcad
|
|
29
|
+
```
|
|
30
|
+
* If using `pnpm` for installation, you also need to manually install mxdraw
|
|
31
|
+
|
|
32
|
+
```sh
|
|
33
|
+
pnpm install mxdraw
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
2. Create a new index.html file in the project root directory and draw a canvas.
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<!DOCTYPE html>
|
|
40
|
+
<html lang="en">
|
|
41
|
+
<head>
|
|
42
|
+
<meta charset="UTF-8">
|
|
43
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
44
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
45
|
+
<title>vite use mxcad</title>
|
|
46
|
+
</head>
|
|
47
|
+
<body>
|
|
48
|
+
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
|
|
49
|
+
</body>
|
|
50
|
+
</html>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
3. Create a new `src` directory in the root directory, and create an `assets` folder within this directory to store the target `mxweb` file. ([Click to download an mxweb file](https://gitee.com/mxcadx/mxcad_docs/blob/master/examples/public/test2.mxweb))
|
|
54
|
+
|
|
55
|
+
4. Create a new `index.ts` file in the `src` directory (Vite supports ts by default).。
|
|
56
|
+
|
|
57
|
+
By calling the `create()` method in mxcad, load the target drawing. The file paths loaded in this method are all absolute HTTP URL paths relative to the position of the JavaScript call, i.e., the **web address** of the file. In Vite, you can obtain the correct **web address** of the file using the loading method shown in the example code below.
|
|
58
|
+
|
|
59
|
+
```ts
|
|
60
|
+
import { McObject } from "mxcad"
|
|
61
|
+
|
|
62
|
+
// Place both 2d and 2d-st into static resources to ensure normal operation regardless of whether SharedArrayBuffer is enabled
|
|
63
|
+
const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st"
|
|
64
|
+
// Create an mxcad instance object
|
|
65
|
+
const mxcad = new McObject()
|
|
66
|
+
mxcad.create({
|
|
67
|
+
// ID of the canvas element
|
|
68
|
+
canvas: "#myCanvas",
|
|
69
|
+
// Get the path location of the wasm-related files (wasm/js/worker.js)
|
|
70
|
+
locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href,
|
|
71
|
+
// URL path of the file to be initialized and opened
|
|
72
|
+
fileUrl: new URL("../src/assets/test.mxweb", import.meta.url).href,
|
|
73
|
+
// Provide the directory path for loading fonts
|
|
74
|
+
fontspath: new URL("node_modules/mxcad/dist/fonts", import.meta.url).href,
|
|
75
|
+
})
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Import this ts file into the above html file.
|
|
80
|
+
|
|
81
|
+
The `create()` method in mxcad needs to be called after the canvas element has finished loading on the page, so the script tag needs to be placed inside the body tag, allowing the browser to parse the HTML page first before downloading and executing the code in the script tag.
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<script type="module" src="./src/index.ts"></script>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
5. Create a `vite.config.ts` file in the root directory.
|
|
88
|
+
|
|
89
|
+
mxcad uses SharedArrayBuffer by default, which is a special type in JavaScript that allows multiple Web Worker threads to share the same memory space. Therefore, using mxcad requires setting the corresponding response headers on the server side.
|
|
90
|
+
|
|
91
|
+
```ts
|
|
92
|
+
import { defineConfig } from "vite"
|
|
93
|
+
|
|
94
|
+
export default defineConfig({
|
|
95
|
+
server: {
|
|
96
|
+
headers: {
|
|
97
|
+
"Cross-Origin-Opener-Policy": "same-origin",
|
|
98
|
+
"Cross-Origin-Embedder-Policy": "require-corp",
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
})
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
6. After completing the above steps, run the following command to start the project
|
|
105
|
+
|
|
106
|
+
```sh
|
|
107
|
+
npx vite
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
Reference example source code: <https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/vite>
|
|
111
|
+
|
|
112
|
+
## Using mxcad via CDN
|
|
113
|
+
|
|
114
|
+
You can use mxcad directly through a script tag with a CDN:
|
|
115
|
+
|
|
116
|
+
Here we use [unpkg](https://unpkg.com/), but you can use any CDN that provides npm package services, or you can download this file and serve it yourself
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<script scr="https://unpkg.com/mxdraw/dist/mxdraw.umd.js" crossorigin="anonymous"></script>
|
|
120
|
+
<script scr="https://unpkg.com/mxcad/dist/mxcad.umd.js" crossorigin="anonymous"></script>
|
|
121
|
+
```
|
|
122
|
+
### Using the Global Build Version
|
|
123
|
+
|
|
124
|
+
Example of the global build version:
|
|
125
|
+
|
|
126
|
+
```html
|
|
127
|
+
<!DOCTYPE html>
|
|
128
|
+
<html lang="en">
|
|
129
|
+
|
|
130
|
+
<head>
|
|
131
|
+
<meta charset="UTF-8">
|
|
132
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
133
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
134
|
+
<title>Document</title>
|
|
135
|
+
<script src="https://unpkg.com/mxdraw" crossorigin="anonymous"></script>
|
|
136
|
+
<script src="https://unpkg.com/mxcad" crossorigin="anonymous"></script>
|
|
137
|
+
</head>
|
|
138
|
+
|
|
139
|
+
<body>
|
|
140
|
+
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas" style="height: 300px"></canvas></div>
|
|
141
|
+
<script>
|
|
142
|
+
const { McObject } = MxCAD
|
|
143
|
+
const mxobj = new McObject()
|
|
144
|
+
mxobj.create({
|
|
145
|
+
canvas: "#myCanvas",//canvas's id
|
|
146
|
+
locateFile: (fileName) => "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName,
|
|
147
|
+
fontspath: "https://unpkg.com/mxcad/dist/fonts/",
|
|
148
|
+
fileUrl: "./test2.mxweb"//path to the target drawing
|
|
149
|
+
})
|
|
150
|
+
</script>
|
|
151
|
+
</body>
|
|
152
|
+
|
|
153
|
+
</html>
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
Reference sample source code：<https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/h5>
|
|
157
|
+
|
|
158
|
+
### Build the version using the ES module
|
|
159
|
+
|
|
160
|
+
Most modern browsers already natively support the ES module, so we can use mxcad like this through the CDN and the native ES module. Because they depend on mxdraw mxcad library, so [Import mapping table (Import Maps)](https://caniuse.com/import-maps) to tell the browser how to locate the mxdraw module and mxcad module to Import.
|
|
161
|
+
|
|
162
|
+
You can also add other dependencies to the mapping table - but make sure you are using the ES module version of the library.
|
|
163
|
+
|
|
164
|
+
```html
|
|
165
|
+
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas" style="height: 300px"></canvas></div>
|
|
166
|
+
<script type="importmap">
|
|
167
|
+
{
|
|
168
|
+
"imports": {
|
|
169
|
+
"mxdraw": "https://unpkg.com/mxdraw/dist/mxdraw.esm.js",
|
|
170
|
+
"mxcad": "https://unpkg.com/mxcad/dist/mxcad.es.js"
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
</script>
|
|
174
|
+
<script type="module">
|
|
175
|
+
import { McObject } from "mxcad"
|
|
176
|
+
|
|
177
|
+
const mxobj = new McObject()
|
|
178
|
+
mxobj.create({
|
|
179
|
+
canvas: "#myCanvas",
|
|
180
|
+
locateFile: (fileName) => "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName,
|
|
181
|
+
fontspath: "https://unpkg.com/mxcad/dist/fonts/",
|
|
182
|
+
fileUrl: "/test2.mxweb"
|
|
183
|
+
})
|
|
184
|
+
</script>
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
## Use mxcad with webpack
|
|
188
|
+
|
|
189
|
+
mxcad is also supported in other packaging tools, and building mxcad projects based on webpack is described below.
|
|
190
|
+
|
|
191
|
+
1. Project initialization and installation of webpack and mxcad.
|
|
192
|
+
```sh
|
|
193
|
+
npm init -y
|
|
194
|
+
npm install webpack webpack-cli copy-webpack-plugin@5 html-webpack-plugin -D
|
|
195
|
+
npm install mxcad
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
2. Create a new `index.html` file in the root directory and draw the canvas.
|
|
199
|
+
```html
|
|
200
|
+
<!DOCTYPE html>
|
|
201
|
+
<html>
|
|
202
|
+
<head>
|
|
203
|
+
<meta charset="utf-8" />
|
|
204
|
+
<title>start</title>
|
|
205
|
+
<script src="https://unpkg.com/lodash@4.17.20"></script>
|
|
206
|
+
</head>
|
|
207
|
+
<body>
|
|
208
|
+
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
|
|
209
|
+
</body>
|
|
210
|
+
</html>
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
3. Create a `src` directory in the root directory and a `index.js` file in the ` src` directory to load the target file
|
|
214
|
+
|
|
215
|
+
```js
|
|
216
|
+
import { McObject } from "mxcad"
|
|
217
|
+
|
|
218
|
+
const mxcad = new McObject()
|
|
219
|
+
mxcad.create({
|
|
220
|
+
canvas: "#myCanvas",
|
|
221
|
+
// Access http:xxx.com/test.mxweb to obtain the corresponding file
|
|
222
|
+
// Please provide the document yourself
|
|
223
|
+
fileUrl: "test.mxweb"
|
|
224
|
+
})
|
|
225
|
+
```
|
|
226
|
+
Introduce the js file under the `index.html` file. Put the script tag inside the body tag and let the browser finish parsing the HTML page before downloading and executing the code in the script tag.
|
|
227
|
+
```html
|
|
228
|
+
<script src="./src/index.js"></script>
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
4. Create the `webpack.config.js` file in the root directory.
|
|
232
|
+
|
|
233
|
+
Copy the mxcad required files to a static resource.
|
|
234
|
+
|
|
235
|
+
```js
|
|
236
|
+
const path = require('path');
|
|
237
|
+
// Please feel free to use copy-webpack-plugin@5 compatible webpack4 and 5 compatible versions
|
|
238
|
+
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
|
239
|
+
|
|
240
|
+
module.exports = {
|
|
241
|
+
mode: process.env.development === "development" ? "development" : "production",
|
|
242
|
+
entry: './src/index.js',
|
|
243
|
+
devServer: {
|
|
244
|
+
static: './dist',
|
|
245
|
+
headers: {
|
|
246
|
+
"Cross-Origin-Opener-Policy": "same-origin",
|
|
247
|
+
"Cross-Origin-Embedder-Policy": "require-corp"
|
|
248
|
+
}
|
|
249
|
+
},
|
|
250
|
+
output: {
|
|
251
|
+
path: path.resolve(__dirname, 'dist'),
|
|
252
|
+
filename: 'main.js',
|
|
253
|
+
},
|
|
254
|
+
plugins: [
|
|
255
|
+
new CopyWebpackPlugin([
|
|
256
|
+
// Copy mxcad WASM-related core code The default mxcad request path is /* All files need to be placed under dist2d
|
|
257
|
+
{
|
|
258
|
+
from: "node_modules/mxcad/dist/wasm/2d/*",
|
|
259
|
+
to: path.resolve(__dirname, "dist"),
|
|
260
|
+
flatten: true
|
|
261
|
+
},
|
|
262
|
+
// The font file must be required to display the text in the drawing. The mxcad library default request URL path is /fonts/* All need to be placed under dist/fonts
|
|
263
|
+
{
|
|
264
|
+
from: "node_modules/mxcad/dist/fonts",
|
|
265
|
+
to: path.resolve(__dirname, "dist/fonts"),
|
|
266
|
+
flatten: true,
|
|
267
|
+
toType: "dir"
|
|
268
|
+
},
|
|
269
|
+
])
|
|
270
|
+
],
|
|
271
|
+
// mxcad and mxdraw libraries have js code packages that exceed the size of webpack's default limit and need to set hints: false to close the warning
|
|
272
|
+
performance: {
|
|
273
|
+
hints: false,
|
|
274
|
+
}
|
|
275
|
+
};
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
5. After configuring the `packge.json` file as required, run the 'npx webpack serve' command to see the effect
|
|
279
|
+
|
|
280
|
+
Reference sample source code:
|
|
281
|
+
|
|
282
|
+
<https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/webpack-v4>
|
|
283
|
+
|
|
284
|
+
<https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/webpack-v5>
|
|
285
|
+
|
|
286
|
+
## Other knowledge points
|
|
287
|
+
|
|
288
|
+
### Parameter description of the mxcad.create() function
|
|
289
|
+
|
|
290
|
+
1. canvas：canvas id of the canvas instance
|
|
291
|
+
|
|
292
|
+
2. locateFile：The core of mxcad relies on the wasm file in the corresponding category (` 2d `|` 2d-st `) under the directory `/mxcad/dist/wasm` in mxcad library (the file is compiled and generated by c++), wherein the 2d directory is multi-threaded programs, and the 2D-ST directory is single-threaded programs. This parameter specifies the network path of the wasm program.
|
|
293
|
+
|
|
294
|
+
3. fontspath：Specifies the font file load path in a cad drawing. The default path is `dist/fonts`, where you can add all the font files you need to open your drawings.
|
|
295
|
+
|
|
296
|
+
4. fileUrl：Specifies the network path to open the mxweb drawing.
|
|
297
|
+
* The parameters fontspath, fileUrl and locateFile in the `create()` function that creates mxcad objects in mxcad are network paths.
|
|
298
|
+
|
|
299
|
+
5. onOpenFileComplete: Listen for the callback event when opening a file is successful. Operations to be performed after the drawing is opened can be executed within this method.
|
|
300
|
+
|
|
301
|
+
6. viewBackgroundColor: Set the background color of the view area, with the value in RGB format.
|
|
302
|
+
|
|
303
|
+
7. browse: Whether to set as browse mode. When the value is true or 1, browse mode is enabled and CAD objects cannot be selected; when the value is 2, browse mode is enabled and CAD objects can be selected but cannot be edited by grips; when the value is false, edit mode is enabled.
|
|
304
|
+
|
|
305
|
+
8. middlePan: Set the operation mode for moving the view. Set to 0 to move the view by clicking the left mouse button; set to 1 to move the view by clicking the middle mouse button; set to 2 to move the view by clicking either the middle or left mouse button.
|
|
306
|
+
|
|
307
|
+
9. enableUndo: Whether to enable the undo function. If set to true, the Mx_Undo command can be called to undo operations; if set to false, the undo command is disabled. The default setting is false.
|
|
308
|
+
|
|
309
|
+
10. enableIntelliSelect: Whether to enable the object selection function. Set to true to enable; set to false to disable.
|
|
310
|
+
|
|
311
|
+
11. multipleSelect: Whether to enable multiple selection. Set to true to enable; set to false to disable.
|
|
312
|
+
|
|
313
|
+
For more initialization parameter settings of createMxCad, please refer to the [MxCadConfig Configuration Description](../../api/interfaces/2d.MxCadConfig.md)
|
|
314
|
+
|
|
315
|
+
### Description of multi-thread and single-thread mode
|
|
316
|
+
|
|
317
|
+
mxcad supports multithreading by default for performance reasons. Among them, support for multithreading mode needs to open SharedArrayBuffer permissions, open can use `/wasm/2d` under the multithreaded program, otherwise use `/wasm/ 2d-ST/` under the single-threaded program.
|
|
318
|
+
|
|
319
|
+
The SharedArrayBuffer permission needs to be configured in the server responder, for example, node.js server program to enable SharedArrayBuffer permission set as follows:
|
|
320
|
+
|
|
321
|
+
```js
|
|
322
|
+
const http = require('http');
|
|
323
|
+
http.createServer((req, res)=> {
|
|
324
|
+
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
|
|
325
|
+
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
|
|
326
|
+
})
|
|
327
|
+
```
|
|
328
|
+
|
|
329
|
+
How to determine whether SharedArrayBuffer permissions are enabled in front-end js, and then automatically use the correct program loading, the code is as follows:
|
|
330
|
+
|
|
331
|
+
```js
|
|
332
|
+
import { McObject } from "mxcad"
|
|
333
|
+
// Putting both 2d and 2D-ST into a static resource ensures that it works regardless of whether SharedArrayBuffer is turned on or not
|
|
334
|
+
const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st"
|
|
335
|
+
const mxobj = new McObject()
|
|
336
|
+
mxobj.create({
|
|
337
|
+
// ...
|
|
338
|
+
locateFile: (fileName)=> {
|
|
339
|
+
new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href
|
|
340
|
+
},
|
|
341
|
+
})
|
|
342
|
+
```
|
|
343
|
+
* To use SharedArrayBuffer permissions, Google's browser requires access using HTTPS or the local path (http://localhost).
|
|
344
|
+
|
|
345
|
+
# Drawing Conversion Steps
|
|
346
|
+
|
|
347
|
+
Due to the large size, multiple versions, and complex format of AutoCAD files (DWG, DXF), directly loading them into web pages is inefficient, occupies large memory space, and is prone to loading failures. Therefore, we have designed and provided a unique web CAD file format: `.mxweb`, which effectively solves the aforementioned numerous issues. mxweb files and CAD drawing files can be converted back and forth using the CloudDraw development package we provide.
|
|
348
|
+
|
|
349
|
+
For more detailed conversion steps, please refer to [Drawing conversion](https://mxcad.github.io/mxcad/en/guide/convert.html)
|
|
350
|
+
|
|
351
|
+
## Download the CloudDraw Development Package
|
|
352
|
+
|
|
353
|
+
We need to download the [MxDraw CloudDraw development package](https://www.webcadsdk.com/)
|
|
354
|
+
|
|
355
|
+
|
|
356
|
+
|
|
357
|
+
After downloading the `MxDrawCloudServer1.0TryVersion.7z` compressed package, decompress it,
|
|
358
|
+
Go to the directory `MxDrawCloudServer\Bin\MxCAD\Release` under the decompressed MxDrawCloudServer directory, which is the program directory responsible for converting `.mxweb` format.
|
|
359
|
+
|
|
360
|
+
## Convert CAD Drawings to mxweb Format
|
|
361
|
+
|
|
362
|
+
### Method One
|
|
363
|
+
|
|
364
|
+
Open the command window in the directory where the decompressed `MxDraw CloudDraw development package` is located, find the path of the target drawing, then run the command line: mxcadassembly target drawing path.
|
|
365
|
+
|
|
366
|
+
Example code as follows:
|
|
367
|
+
```bash
|
|
368
|
+
cd C:\Users\MxDev\Downloads\MxDrawCloudServer1.0TryVersion\MxDrawCloudServer\Bin\MxCAD\Release
|
|
369
|
+
|
|
370
|
+
mxcadassembly D:\test2.dwg
|
|
371
|
+
```
|
|
372
|
+
|
|
373
|
+
Wait for the command line to output `{"code":0 }` indicating the drawing conversion is successful. The successfully converted `.mxweb` format file will be automatically saved in the same directory as the target drawing.
|
|
374
|
+
|
|
375
|
+
|
|
376
|
+
### Method Two
|
|
377
|
+
|
|
378
|
+
Open the command window in the directory where the decompressed `MxDraw CloudDraw development package` is located, find the path of the target drawing, then run the command line: mxcadassembly JSON string.
|
|
379
|
+
|
|
380
|
+
Example code as follows:
|
|
381
|
+
```bash
|
|
382
|
+
mxcadassembly.exe {"srcpath":"D:\test2.dwg","outpath":"D:\","outname":"test", "compression":0}
|
|
383
|
+
```
|
|
384
|
+
|
|
385
|
+
| Parameter | Description |
|
|
386
|
+
| --- | --- |
|
|
387
|
+
| srcpath | Path of the file to be converted |
|
|
388
|
+
| outpath | outpath|Output file path |
|
|
389
|
+
| outname | outname|Output file name (suffix needs to be added when converting mxweb to CAD drawings) |
|
|
390
|
+
| compression | 0 means no compression, if this attribute is not written, it means compression |
|
|
391
|
+
|
|
392
|
+
## Convert mxweb Format to CAD Drawings
|
|
393
|
+
|
|
394
|
+
We can also use this program to convert `.mxweb` format files back to `.dwg` format files by executing the following command:
|
|
395
|
+
```bash
|
|
396
|
+
mxcadassembly.exe {"srcpath":"D:\test.mxweb","outpath":"D:\","outname":"test.dwg"}
|
|
397
|
+
```
|
|
398
|
+
* The parameter outname must include the suffix of the CAD drawing, generally .dwg.
|
|
399
|
+
|
|
400
|
+
## Linux Version
|
|
401
|
+
|
|
402
|
+
For the Linux version of the CloudDraw development package, authorization operation is required before operation:
|
|
403
|
+
Enter the `Bin/Linux/MxCAD` directory, we should first give these files permission and copy some directories to the specified location:
|
|
404
|
+
```bash
|
|
405
|
+
sudo chmod -R 777 mxcadassembly
|
|
406
|
+
|
|
407
|
+
sudo chmod -R 777 ./mx/so/*
|
|
408
|
+
|
|
409
|
+
sudo cp -r -f ./mx/locale /usr/local/share/locale
|
|
410
|
+
```
|
|
411
|
+
|
|
412
|
+
Then we can refer to the Windows version file format conversion method for drawing conversion. For example, call the following command to convert CAD drawings to mxweb format:
|
|
413
|
+
```bash
|
|
414
|
+
./mxcadassembly "{'srcpath':'/home/mx/test.dwg','outpath':'/home/mx/Test','outname':'xxx'}"
|
|
415
|
+
```
|
|
416
|
+
where srcpath: the path where the target CAD file is located, outpath: the specified path where the converted drawing file is located, outname: specifies the filename of the output mxweb file.
|
|
417
|
+
||||||| .r10481
|
|
418
|
+
|
|
419
|
+
# Preface
|
|
420
|
+
|
|
421
|
+
If you have any questions during the use of mxcad, feel free to contact us. Contact: 710714273@qq.com
|
|
422
|
+
|
|
423
|
+
Official mxcad website: <https://www.webcadsdk.com/>
|
|
424
|
+
|
|
425
|
+
# Quick Start with mxcad
|
|
426
|
+
|
|
427
|
+
mxcad supports online rendering of `.mxweb` format files (this file format is our unique front-end CAD format). CAD drawing files (DWG, DXF) can be converted into .mxweb files via the drawing conversion program provided in our [mxdraw CloudDraw development package](https://www.webcadsdk.com/). The converted `.mxweb` files will be handed over to mxcad for browsing and editing in web pages. The edited `.mxweb` files can similarly be converted back into CAD drawing files through the drawing conversion program.
|
|
428
|
+
|
|
429
|
+
For specific steps on converting CAD drawing files to `.mxweb` format, please refer to the [drawing conversion steps](#drawing-conversion-steps) below.
|
|
430
|
+
|
|
431
|
+
The development of mxcad requires dependency on mxdraw, and the two need to work together. Therefore, if you are unfamiliar with the mxdraw library, please refer to：<https://github.com/mxcad/mxdraw/>
|
|
432
|
+
|
|
433
|
+
## Using mxcad with Vite
|
|
434
|
+
|
|
435
|
+
In this section, we will introduce how to create a simple mxcad project locally. The created project will use a build setup based on Vite.
|
|
436
|
+
|
|
437
|
+
First, ensure that you have installed [Node.js](https://nodejs.org/en), then navigate to the directory where you need to create the project:
|
|
438
|
+
|
|
439
|
+
1. Run the following commands in the command line to initialize the project and install Vite and mxcad
|
|
440
|
+
|
|
441
|
+
```sh
|
|
442
|
+
npm init -y
|
|
443
|
+
npm install vite -D
|
|
444
|
+
npm install mxcad
|
|
445
|
+
```
|
|
446
|
+
* If using `pnpm` for installation, you also need to manually install mxdraw
|
|
447
|
+
|
|
448
|
+
```sh
|
|
449
|
+
pnpm install mxdraw
|
|
450
|
+
```
|
|
451
|
+
|
|
452
|
+
2. Create a new index.html file in the project root directory and draw a canvas.
|
|
453
|
+
|
|
454
|
+
```html
|
|
455
|
+
<!DOCTYPE html>
|
|
456
|
+
<html lang="en">
|
|
457
|
+
<head>
|
|
458
|
+
<meta charset="UTF-8">
|
|
459
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
460
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
461
|
+
<title>vite use mxcad</title>
|
|
462
|
+
</head>
|
|
463
|
+
<body>
|
|
464
|
+
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
|
|
465
|
+
</body>
|
|
466
|
+
</html>
|
|
467
|
+
```
|
|
468
|
+
|
|
469
|
+
3. Create a new `src` directory in the root directory, and create an `assets` folder within this directory to store the target `mxweb` file. ([Click to download an mxweb file](https://gitee.com/mxcadx/mxcad_docs/blob/master/examples/public/test2.mxweb))
|
|
470
|
+
|
|
471
|
+
4. Create a new `index.ts` file in the `src` directory (Vite supports ts by default).。
|
|
472
|
+
|
|
473
|
+
By calling the `create()` method in mxcad, load the target drawing. The file paths loaded in this method are all absolute HTTP URL paths relative to the position of the JavaScript call, i.e., the **web address** of the file. In Vite, you can obtain the correct **web address** of the file using the loading method shown in the example code below.
|
|
474
|
+
|
|
475
|
+
```ts
|
|
476
|
+
import { McObject } from "mxcad"
|
|
477
|
+
|
|
478
|
+
// Place both 2d and 2d-st into static resources to ensure normal operation regardless of whether SharedArrayBuffer is enabled
|
|
479
|
+
const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st"
|
|
480
|
+
// Create an mxcad instance object
|
|
481
|
+
const mxcad = new McObject()
|
|
482
|
+
mxcad.create({
|
|
483
|
+
// ID of the canvas element
|
|
484
|
+
canvas: "#myCanvas",
|
|
485
|
+
// Get the path location of the wasm-related files (wasm/js/worker.js)
|
|
486
|
+
locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href,
|
|
487
|
+
// URL path of the file to be initialized and opened
|
|
488
|
+
fileUrl: new URL("../src/assets/test.mxweb", import.meta.url).href,
|
|
489
|
+
// Provide the directory path for loading fonts
|
|
490
|
+
fontspath: new URL("node_modules/mxcad/dist/fonts", import.meta.url).href,
|
|
491
|
+
})
|
|
492
|
+
|
|
493
|
+
```
|
|
494
|
+
|
|
495
|
+
Import this ts file into the above html file.
|
|
496
|
+
|
|
497
|
+
The `create()` method in mxcad needs to be called after the canvas element has finished loading on the page, so the script tag needs to be placed inside the body tag, allowing the browser to parse the HTML page first before downloading and executing the code in the script tag.
|
|
498
|
+
|
|
499
|
+
```html
|
|
500
|
+
<script type="module" src="./src/index.ts"></script>
|
|
501
|
+
```
|
|
502
|
+
|
|
503
|
+
5. Create a `vite.config.ts` file in the root directory.
|
|
504
|
+
|
|
505
|
+
mxcad uses SharedArrayBuffer by default, which is a special type in JavaScript that allows multiple Web Worker threads to share the same memory space. Therefore, using mxcad requires setting the corresponding response headers on the server side.
|
|
506
|
+
|
|
507
|
+
```ts
|
|
508
|
+
import { defineConfig } from "vite"
|
|
509
|
+
|
|
510
|
+
export default defineConfig({
|
|
511
|
+
server: {
|
|
512
|
+
headers: {
|
|
513
|
+
"Cross-Origin-Opener-Policy": "same-origin",
|
|
514
|
+
"Cross-Origin-Embedder-Policy": "require-corp",
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
})
|
|
518
|
+
```
|
|
519
|
+
|
|
520
|
+
6. After completing the above steps, run the following command to start the project
|
|
521
|
+
|
|
522
|
+
```sh
|
|
523
|
+
npx vite
|
|
524
|
+
```
|
|
525
|
+
|
|
526
|
+
Reference example source code: <https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/vite>
|
|
527
|
+
|
|
528
|
+
## Using mxcad via CDN
|
|
529
|
+
|
|
530
|
+
You can use mxcad directly through a script tag with a CDN:
|
|
531
|
+
|
|
532
|
+
Here we use [unpkg](https://unpkg.com/), but you can use any CDN that provides npm package services, or you can download this file and serve it yourself
|
|
533
|
+
|
|
534
|
+
```html
|
|
535
|
+
<script scr="https://unpkg.com/mxdraw/dist/mxdraw.umd.js" crossorigin="anonymous"></script>
|
|
536
|
+
<script scr="https://unpkg.com/mxcad/dist/mxcad.umd.js" crossorigin="anonymous"></script>
|
|
537
|
+
```
|
|
538
|
+
### Using the Global Build Version
|
|
539
|
+
|
|
540
|
+
Example of the global build version:
|
|
541
|
+
|
|
542
|
+
```html
|
|
543
|
+
<!DOCTYPE html>
|
|
544
|
+
<html lang="en">
|
|
545
|
+
|
|
546
|
+
<head>
|
|
547
|
+
<meta charset="UTF-8">
|
|
548
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
549
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
550
|
+
<title>Document</title>
|
|
551
|
+
<script src="https://unpkg.com/mxdraw" crossorigin="anonymous"></script>
|
|
552
|
+
<script src="https://unpkg.com/mxcad" crossorigin="anonymous"></script>
|
|
553
|
+
</head>
|
|
554
|
+
|
|
555
|
+
<body>
|
|
556
|
+
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas" style="height: 300px"></canvas></div>
|
|
557
|
+
<script>
|
|
558
|
+
const { McObject } = MxCAD
|
|
559
|
+
const mxobj = new McObject()
|
|
560
|
+
mxobj.create({
|
|
561
|
+
canvas: "#myCanvas",//canvas's id
|
|
562
|
+
locateFile: (fileName) => "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName,
|
|
563
|
+
fontspath: "https://unpkg.com/mxcad/dist/fonts/",
|
|
564
|
+
fileUrl: "./test2.mxweb"//path to the target drawing
|
|
565
|
+
})
|
|
566
|
+
</script>
|
|
567
|
+
</body>
|
|
568
|
+
|
|
569
|
+
</html>
|
|
570
|
+
```
|
|
571
|
+
|
|
572
|
+
Reference sample source code：<https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/h5>
|
|
573
|
+
|
|
574
|
+
### Build the version using the ES module
|
|
575
|
+
|
|
576
|
+
Most modern browsers already natively support the ES module, so we can use mxcad like this through the CDN and the native ES module. Because they depend on mxdraw mxcad library, so [Import mapping table (Import Maps)](https://caniuse.com/import-maps) to tell the browser how to locate the mxdraw module and mxcad module to Import.
|
|
577
|
+
|
|
578
|
+
You can also add other dependencies to the mapping table - but make sure you are using the ES module version of the library.
|
|
579
|
+
|
|
580
|
+
```html
|
|
581
|
+
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas" style="height: 300px"></canvas></div>
|
|
582
|
+
<script type="importmap">
|
|
583
|
+
{
|
|
584
|
+
"imports": {
|
|
585
|
+
"mxdraw": "https://unpkg.com/mxdraw/dist/mxdraw.esm.js",
|
|
586
|
+
"mxcad": "https://unpkg.com/mxcad/dist/mxcad.es.js"
|
|
587
|
+
}
|
|
588
|
+
}
|
|
589
|
+
</script>
|
|
590
|
+
<script type="module">
|
|
591
|
+
import { McObject } from "mxcad"
|
|
592
|
+
|
|
593
|
+
const mxobj = new McObject()
|
|
594
|
+
mxobj.create({
|
|
595
|
+
canvas: "#myCanvas",
|
|
596
|
+
locateFile: (fileName) => "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName,
|
|
597
|
+
fontspath: "https://unpkg.com/mxcad/dist/fonts/",
|
|
598
|
+
fileUrl: "/test2.mxweb"
|
|
599
|
+
})
|
|
600
|
+
</script>
|
|
601
|
+
```
|
|
602
|
+
|
|
603
|
+
## Use mxcad with webpack
|
|
604
|
+
|
|
605
|
+
mxcad is also supported in other packaging tools, and building mxcad projects based on webpack is described below.
|
|
606
|
+
|
|
607
|
+
1. Project initialization and installation of webpack and mxcad.
|
|
608
|
+
```sh
|
|
609
|
+
npm init -y
|
|
610
|
+
npm install webpack webpack-cli copy-webpack-plugin@5 html-webpack-plugin -D
|
|
611
|
+
npm install mxcad
|
|
612
|
+
```
|
|
613
|
+
|
|
614
|
+
2. Create a new `index.html` file in the root directory and draw the canvas.
|
|
615
|
+
```html
|
|
616
|
+
<!DOCTYPE html>
|
|
617
|
+
<html>
|
|
618
|
+
<head>
|
|
619
|
+
<meta charset="utf-8" />
|
|
620
|
+
<title>start</title>
|
|
621
|
+
<script src="https://unpkg.com/lodash@4.17.20"></script>
|
|
622
|
+
</head>
|
|
623
|
+
<body>
|
|
624
|
+
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
|
|
625
|
+
</body>
|
|
626
|
+
</html>
|
|
627
|
+
```
|
|
628
|
+
|
|
629
|
+
3. Create a `src` directory in the root directory and a `index.js` file in the ` src` directory to load the target file
|
|
630
|
+
|
|
631
|
+
```js
|
|
632
|
+
import { McObject } from "mxcad"
|
|
633
|
+
|
|
634
|
+
const mxcad = new McObject()
|
|
635
|
+
mxcad.create({
|
|
636
|
+
canvas: "#myCanvas",
|
|
637
|
+
// Access http:xxx.com/test.mxweb to obtain the corresponding file
|
|
638
|
+
// Please provide the document yourself
|
|
639
|
+
fileUrl: "test.mxweb"
|
|
640
|
+
})
|
|
641
|
+
```
|
|
642
|
+
Introduce the js file under the `index.html` file. Put the script tag inside the body tag and let the browser finish parsing the HTML page before downloading and executing the code in the script tag.
|
|
643
|
+
```html
|
|
644
|
+
<script src="./src/index.js"></script>
|
|
645
|
+
```
|
|
646
|
+
|
|
647
|
+
4. Create the `webpack.config.js` file in the root directory.
|
|
648
|
+
|
|
649
|
+
Copy the mxcad required files to a static resource.
|
|
650
|
+
|
|
651
|
+
```js
|
|
652
|
+
const path = require('path');
|
|
653
|
+
// Please feel free to use copy-webpack-plugin@5 compatible webpack4 and 5 compatible versions
|
|
654
|
+
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
|
655
|
+
|
|
656
|
+
module.exports = {
|
|
657
|
+
mode: process.env.development === "development" ? "development" : "production",
|
|
658
|
+
entry: './src/index.js',
|
|
659
|
+
devServer: {
|
|
660
|
+
static: './dist',
|
|
661
|
+
headers: {
|
|
662
|
+
"Cross-Origin-Opener-Policy": "same-origin",
|
|
663
|
+
"Cross-Origin-Embedder-Policy": "require-corp"
|
|
664
|
+
}
|
|
665
|
+
},
|
|
666
|
+
output: {
|
|
667
|
+
path: path.resolve(__dirname, 'dist'),
|
|
668
|
+
filename: 'main.js',
|
|
669
|
+
},
|
|
670
|
+
plugins: [
|
|
671
|
+
new CopyWebpackPlugin([
|
|
672
|
+
// Copy mxcad WASM-related core code The default mxcad request path is /* All files need to be placed under dist2d
|
|
673
|
+
{
|
|
674
|
+
from: "node_modules/mxcad/dist/wasm/2d/*",
|
|
675
|
+
to: path.resolve(__dirname, "dist"),
|
|
676
|
+
flatten: true
|
|
677
|
+
},
|
|
678
|
+
// The font file must be required to display the text in the drawing. The mxcad library default request URL path is /fonts/* All need to be placed under dist/fonts
|
|
679
|
+
{
|
|
680
|
+
from: "node_modules/mxcad/dist/fonts",
|
|
681
|
+
to: path.resolve(__dirname, "dist/fonts"),
|
|
682
|
+
flatten: true,
|
|
683
|
+
toType: "dir"
|
|
684
|
+
},
|
|
685
|
+
])
|
|
686
|
+
],
|
|
687
|
+
// mxcad and mxdraw libraries have js code packages that exceed the size of webpack's default limit and need to set hints: false to close the warning
|
|
688
|
+
performance: {
|
|
689
|
+
hints: false,
|
|
690
|
+
}
|
|
691
|
+
};
|
|
692
|
+
```
|
|
693
|
+
|
|
694
|
+
5. After configuring the `packge.json` file as required, run the 'npx webpack serve' command to see the effect
|
|
695
|
+
|
|
696
|
+
Reference sample source code:
|
|
697
|
+
|
|
698
|
+
<https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/webpack-v4>
|
|
699
|
+
|
|
700
|
+
<https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/webpack-v5>
|
|
701
|
+
|
|
702
|
+
## Other knowledge points
|
|
703
|
+
|
|
704
|
+
### Parameter description of the mxcad.create() function
|
|
705
|
+
|
|
706
|
+
1. canvas：canvas id of the canvas instance
|
|
707
|
+
|
|
708
|
+
2. locateFile：The core of mxcad relies on the wasm file in the corresponding category (` 2d `|` 2d-st `) under the directory `/mxcad/dist/wasm` in mxcad library (the file is compiled and generated by c++), wherein the 2d directory is multi-threaded programs, and the 2D-ST directory is single-threaded programs. This parameter specifies the network path of the wasm program.
|
|
709
|
+
|
|
710
|
+
3. fontspath：Specifies the font file load path in a cad drawing. The default path is `dist/fonts`, where you can add all the font files you need to open your drawings.
|
|
711
|
+
|
|
712
|
+
4. fileUrl：Specifies the network path to open the mxweb drawing.
|
|
713
|
+
* The parameters fontspath, fileUrl and locateFile in the `create()` function that creates mxcad objects in mxcad are network paths.
|
|
714
|
+
|
|
715
|
+
5. onOpenFileComplete: Listen for the callback event when opening a file is successful. Operations to be performed after the drawing is opened can be executed within this method.
|
|
716
|
+
|
|
717
|
+
6. viewBackgroundColor: Set the background color of the view area, with the value in RGB format.
|
|
718
|
+
|
|
719
|
+
7. browse: Whether to set as browse mode. When the value is true or 1, browse mode is enabled and CAD objects cannot be selected; when the value is 2, browse mode is enabled and CAD objects can be selected but cannot be edited by grips; when the value is false, edit mode is enabled.
|
|
720
|
+
|
|
721
|
+
8. middlePan: Set the operation mode for moving the view. Set to 0 to move the view by clicking the left mouse button; set to 1 to move the view by clicking the middle mouse button; set to 2 to move the view by clicking either the middle or left mouse button.
|
|
722
|
+
|
|
723
|
+
9. enableUndo: Whether to enable the undo function. If set to true, the Mx_Undo command can be called to undo operations; if set to false, the undo command is disabled. The default setting is false.
|
|
724
|
+
|
|
725
|
+
10. enableIntelliSelect: Whether to enable the object selection function. Set to true to enable; set to false to disable.
|
|
726
|
+
|
|
727
|
+
11. multipleSelect: Whether to enable multiple selection. Set to true to enable; set to false to disable.
|
|
728
|
+
|
|
729
|
+
For more initialization parameter settings of createMxCad, please refer to the [MxCadConfig Configuration Description](../../api/interfaces/2d.MxCadConfig.md)
|
|
730
|
+
|
|
731
|
+
### Description of multi-thread and single-thread mode
|
|
732
|
+
|
|
733
|
+
mxcad supports multithreading by default for performance reasons. Among them, support for multithreading mode needs to open SharedArrayBuffer permissions, open can use `/wasm/2d` under the multithreaded program, otherwise use `/wasm/ 2d-ST/` under the single-threaded program.
|
|
734
|
+
|
|
735
|
+
The SharedArrayBuffer permission needs to be configured in the server responder, for example, node.js server program to enable SharedArrayBuffer permission set as follows:
|
|
736
|
+
|
|
737
|
+
```js
|
|
738
|
+
const http = require('http');
|
|
739
|
+
http.createServer((req, res)=> {
|
|
740
|
+
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
|
|
741
|
+
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
|
|
742
|
+
})
|
|
743
|
+
```
|
|
744
|
+
|
|
745
|
+
How to determine whether SharedArrayBuffer permissions are enabled in front-end js, and then automatically use the correct program loading, the code is as follows:
|
|
746
|
+
|
|
747
|
+
```js
|
|
748
|
+
import { McObject } from "mxcad"
|
|
749
|
+
// Putting both 2d and 2D-ST into a static resource ensures that it works regardless of whether SharedArrayBuffer is turned on or not
|
|
750
|
+
const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st"
|
|
751
|
+
const mxobj = new McObject()
|
|
752
|
+
mxobj.create({
|
|
753
|
+
// ...
|
|
754
|
+
locateFile: (fileName)=> {
|
|
755
|
+
new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href
|
|
756
|
+
},
|
|
757
|
+
})
|
|
758
|
+
```
|
|
759
|
+
* To use SharedArrayBuffer permissions, Google's browser requires access using HTTPS or the local path (http://localhost).
|
|
760
|
+
|
|
761
|
+
# Drawing Conversion Steps
|
|
762
|
+
|
|
763
|
+
Due to the large size, multiple versions, and complex format of AutoCAD files (DWG, DXF), directly loading them into web pages is inefficient, occupies large memory space, and is prone to loading failures. Therefore, we have designed and provided a unique web CAD file format: `.mxweb`, which effectively solves the aforementioned numerous issues. mxweb files and CAD drawing files can be converted back and forth using the CloudDraw development package we provide.
|
|
764
|
+
|
|
765
|
+
For more detailed conversion steps, please refer to [Drawing conversion](https://mxcad.github.io/mxcad/en/guide/convert.html)
|
|
766
|
+
|
|
767
|
+
## Download the CloudDraw Development Package
|
|
768
|
+
|
|
769
|
+
We need to download the [MxDraw CloudDraw development package](https://www.webcadsdk.com/)
|
|
770
|
+
|
|
771
|
+
|
|
772
|
+
|
|
773
|
+
After downloading the `MxDrawCloudServer1.0TryVersion.7z` compressed package, decompress it,
|
|
774
|
+
Go to the directory `MxDrawCloudServer\Bin\MxCAD\Release` under the decompressed MxDrawCloudServer directory, which is the program directory responsible for converting `.mxweb` format.
|
|
775
|
+
|
|
776
|
+
|
|
777
|
+
|
|
778
|
+
|
|
779
|
+
## Convert CAD Drawings to mxweb Format
|
|
780
|
+
|
|
781
|
+
### Method One
|
|
782
|
+
|
|
783
|
+
Open the command window in the directory where the decompressed `MxDraw CloudDraw development package` is located, find the path of the target drawing, then run the command line: mxcadassembly target drawing path.
|
|
784
|
+
|
|
785
|
+
Example code as follows:
|
|
786
|
+
```bash
|
|
787
|
+
cd C:\Users\MxDev\Downloads\MxDrawCloudServer1.0TryVersion\MxDrawCloudServer\Bin\MxCAD\Release
|
|
788
|
+
|
|
789
|
+
mxcadassembly D:\test2.dwg
|
|
790
|
+
```
|
|
791
|
+
|
|
792
|
+
Wait for the command line to output `{"code":0 }` indicating the drawing conversion is successful. The successfully converted `.mxweb` format file will be automatically saved in the same directory as the target drawing.
|
|
793
|
+
|
|
794
|
+
|
|
795
|
+
|
|
796
|
+
### Method Two
|
|
797
|
+
|
|
798
|
+
Open the command window in the directory where the decompressed `MxDraw CloudDraw development package` is located, find the path of the target drawing, then run the command line: mxcadassembly JSON string.
|
|
799
|
+
|
|
800
|
+
Example code as follows:
|
|
801
|
+
```bash
|
|
802
|
+
mxcadassembly.exe {"srcpath":"D:\test2.dwg","outpath":"D:\","outname":"test", "compression":0}
|
|
803
|
+
```
|
|
804
|
+
|
|
805
|
+
| Parameter | Description |
|
|
806
|
+
| --- | --- |
|
|
807
|
+
| srcpath | Path of the file to be converted |
|
|
808
|
+
| outpath | outpath|Output file path |
|
|
809
|
+
| outname | outname|Output file name (suffix needs to be added when converting mxweb to CAD drawings) |
|
|
810
|
+
| compression | 0 means no compression, if this attribute is not written, it means compression |
|
|
811
|
+
|
|
812
|
+
## Convert mxweb Format to CAD Drawings
|
|
813
|
+
|
|
814
|
+
We can also use this program to convert `.mxweb` format files back to `.dwg` format files by executing the following command:
|
|
815
|
+
```bash
|
|
816
|
+
mxcadassembly.exe {"srcpath":"D:\test.mxweb","outpath":"D:\","outname":"test.dwg"}
|
|
817
|
+
```
|
|
818
|
+
* The parameter outname must include the suffix of the CAD drawing, generally .dwg.
|
|
819
|
+
|
|
820
|
+
## Linux Version
|
|
821
|
+
|
|
822
|
+
For the Linux version of the CloudDraw development package, authorization operation is required before operation:
|
|
823
|
+
Enter the `Bin/Linux/MxCAD` directory, we should first give these files permission and copy some directories to the specified location:
|
|
824
|
+
```bash
|
|
825
|
+
sudo chmod -R 777 mxcadassembly
|
|
826
|
+
|
|
827
|
+
sudo chmod -R 777 ./mx/so/*
|
|
828
|
+
|
|
829
|
+
sudo cp -r -f ./mx/locale /usr/local/share/locale
|
|
830
|
+
```
|
|
831
|
+
|
|
832
|
+
Then we can refer to the Windows version file format conversion method for drawing conversion. For example, call the following command to convert CAD drawings to mxweb format:
|
|
833
|
+
```bash
|
|
834
|
+
./mxcadassembly "{'srcpath':'/home/mx/test.dwg','outpath':'/home/mx/Test','outname':'xxx'}"
|
|
835
|
+
```
|
|
836
|
+
where srcpath: the path where the target CAD file is located, outpath: the specified path where the converted drawing file is located, outname: specifies the filename of the output mxweb file.=======
|
|
1
837
|
|
|
2
838
|
# Preface
|
|
3
839
|
|
|
@@ -356,7 +1192,7 @@ We need to download the [MxDraw CloudDraw development package](https://www.webca
|
|
|
356
1192
|
After downloading the `MxDrawCloudServer1.0TryVersion.7z` compressed package, decompress it,
|
|
357
1193
|
Go to the directory `MxDrawCloudServer\Bin\MxCAD\Release` under the decompressed MxDrawCloudServer directory, which is the program directory responsible for converting `.mxweb` format.
|
|
358
1194
|
|
|
359
|
-
|
|
1195
|
+
|
|
360
1196
|
|
|
361
1197
|
|
|
362
1198
|
## Convert CAD Drawings to mxweb Format
|
|
@@ -374,7 +1210,7 @@ mxcadassembly D:\test2.dwg
|
|
|
374
1210
|
|
|
375
1211
|
Wait for the command line to output `{"code":0 }` indicating the drawing conversion is successful. The successfully converted `.mxweb` format file will be automatically saved in the same directory as the target drawing.
|
|
376
1212
|
|
|
377
|
-
|
|
1213
|
+
|
|
378
1214
|
|
|
379
1215
|
### Method Two
|
|
380
1216
|
|
|
@@ -416,4 +1252,4 @@ Then we can refer to the Windows version file format conversion method for drawi
|
|
|
416
1252
|
```bash
|
|
417
1253
|
./mxcadassembly "{'srcpath':'/home/mx/test.dwg','outpath':'/home/mx/Test','outname':'xxx'}"
|
|
418
1254
|
```
|
|
419
|
-
where srcpath: the path where the target CAD file is located, outpath: the specified path where the converted drawing file is located, outname: specifies the filename of the output mxweb file.
|
|
1255
|
+
where srcpath: the path where the target CAD file is located, outpath: the specified path where the converted drawing file is located, outname: specifies the filename of the output mxweb file.>>>>>>> .r10487
|