mxdraw 0.1.342 → 0.1.343
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 +85 -8
- package/dist/mxdraw.d.ts +1 -1
- package/dist/mxdraw.esm.js +1 -1
- package/dist/mxdraw.umd.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,22 +2,99 @@
|
|
|
2
2
|
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
3
3
|
目录
|
|
4
4
|
|
|
5
|
-
- [
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
- [Overview](#overview)
|
|
6
|
+
- [Main features](#main-features)
|
|
7
|
+
- [Compatibility](#compatibility)
|
|
8
|
+
- [Install mxdraw](#install-mxdraw)
|
|
9
|
+
- [Basic use](#basic-use)
|
|
8
10
|
|
|
9
11
|
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
Welcome to your visit, and reading this document will help you get started quickly with mxdraw. If you encounter any problems in the use of the process, you can leave a comment or github consultation oh.
|
|
12
14
|
|
|
13
|
-
##
|
|
15
|
+
## Overview
|
|
14
16
|
|
|
15
|
-
|
|
17
|
+
mxdraw is an HTML5 Canvas JavaScript framework, which is extended and developed on the basis of THREE.js, and provides users with a set of solutions that are more convenient, fast and efficient in front end drawing. The essence of mxdraw is a front end two-dimensional drawing platform. You can use mxdraw to draw graphics on the canvas, add events to the graphics, move, scale and rotate the graphics, and more.
|
|
18
|
+
|
|
19
|
+
## Main features
|
|
20
|
+
|
|
21
|
+
* Customizable extension of three.js function
|
|
16
22
|
|
|
17
23
|
* Efficient and convenient implementation of front-end drawing content
|
|
18
24
|
|
|
19
|
-
*
|
|
25
|
+
* Support online secondary development, to achieve custom comment objects
|
|
20
26
|
|
|
21
27
|
## Compatibility
|
|
22
28
|
|
|
23
|
-
|
|
29
|
+
It supports most modern mainstream browsers such as Chrome and Edge, but does not support Internet Explorer.
|
|
30
|
+
|
|
31
|
+
## Install mxdraw
|
|
32
|
+
|
|
33
|
+
Use the package manager (it is recommended to always install the latest version of the mxdraw library to avoid affecting subsequent use)
|
|
34
|
+
```sh
|
|
35
|
+
npm install mxdraw@latest
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Use the < script > tag
|
|
39
|
+
```html
|
|
40
|
+
<script src="https://unpkg.com/mxdraw/dist/mxdraw.umd.js"></script>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Basic use
|
|
44
|
+
mxdraw.js relies on the canvas tag to open the canvas, but since canvas will automatically resize according to the width and height of the parent element, in order to ensure that the drawing is not distorted, it is necessary to fix the width and height of the canvas parent, and set the attribute overflow:hidden on the parent element. After creating a canvas in the page, you can perform different drawing functions according to your needs. The example code for creating a canvas is as follows:
|
|
45
|
+
```html
|
|
46
|
+
<!DOCTYPE html>
|
|
47
|
+
<html lang="en">
|
|
48
|
+
|
|
49
|
+
<head>
|
|
50
|
+
<meta charset="UTF-8">
|
|
51
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
52
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
53
|
+
<title>mxdraw Basic Usage example </title>
|
|
54
|
+
<script src="https://unpkg.com/mxdraw/dist/mxdraw.umd.js"></script>
|
|
55
|
+
</head>
|
|
56
|
+
<script type="module">
|
|
57
|
+
Mx.loadCoreCode().then(() => {
|
|
58
|
+
// Create a control object
|
|
59
|
+
Mx.MxFun.createMxObject({
|
|
60
|
+
canvasId: "mxdraw", the id of the canvas element
|
|
61
|
+
callback: (mxobj, dom) => {
|
|
62
|
+
// After the creation of the drawing display control callback function callback parameters mxDraw and dom
|
|
63
|
+
console.log(mxobj, dom);
|
|
64
|
+
|
|
65
|
+
mxobj.on("openFileComplete", (iRet) => {
|
|
66
|
+
// Draw a straight line
|
|
67
|
+
let line = new Mx.MxDbLine();
|
|
68
|
+
line.pt1 = new THREE.Vector3(0, 0, 0);
|
|
69
|
+
line.pt2 = new THREE.Vector3(100, 100, 0);
|
|
70
|
+
mxobj.addMxEntity(line);
|
|
71
|
+
// Draw a circle
|
|
72
|
+
let circle = new Mx.MxDbCircleShape()
|
|
73
|
+
circle.center = new THREE.Vector3(50, 50, 0)
|
|
74
|
+
circle.xRadius = circle.yRadius = 20
|
|
75
|
+
circle.isClosedToCenter = false
|
|
76
|
+
mxobj.addMxEntity(circle)
|
|
77
|
+
// Draw text
|
|
78
|
+
let text = new Mx.MxDbText()
|
|
79
|
+
text.position = new THREE.Vector3(50, 50, 0)
|
|
80
|
+
text.height = Mx.MxFun.screenCoordLong2Doc(50)
|
|
81
|
+
text.text = 'Test text'
|
|
82
|
+
mxobj.addMxEntity(text)
|
|
83
|
+
|
|
84
|
+
mxobj.zoomW(line.pt1, line.pt2);
|
|
85
|
+
});
|
|
86
|
+
},
|
|
87
|
+
});
|
|
88
|
+
})
|
|
89
|
+
</script>
|
|
90
|
+
|
|
91
|
+
<body>
|
|
92
|
+
<div style="height: 80vh; overflow: hidden;">
|
|
93
|
+
<canvas id="mxdraw"></canvas>
|
|
94
|
+
</div>
|
|
95
|
+
</body>
|
|
96
|
+
|
|
97
|
+
</html>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
For more information about mxdraw, please refer to the development documentation link below：https://mxcad.github.io/mxdraw/en/
|
package/dist/mxdraw.d.ts
CHANGED
|
@@ -1219,7 +1219,7 @@ declare class MxFunClass {
|
|
|
1219
1219
|
* ``` typescript
|
|
1220
1220
|
* ```
|
|
1221
1221
|
*/
|
|
1222
|
-
setloadImageFuction(call: (url: string, onLoad?: (texture: any) => void, onError?: (event: any) => void) => void): void;
|
|
1222
|
+
setloadImageFuction(call: (url: string, onLoad?: (texture: any) => void, onError?: (event: any) => void, fileType?: string, isTifInverse?: boolean) => void): void;
|
|
1223
1223
|
/**
|
|
1224
1224
|
* MxFun 模块
|
|
1225
1225
|
* mxdraw模块初始化同步
|