vislite 1.9.0-alpha.2 → 1.9.0

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.
Files changed (184) hide show
  1. package/AUTHORS.txt +6 -6
  2. package/CHANGELOG +3 -2
  3. package/LICENSE +20 -20
  4. package/README.md +1 -1
  5. package/lib/BarLayout/index.es.js +121 -121
  6. package/lib/BarLayout/index.es.min.js +2 -2
  7. package/lib/Buffer/index.es.js +1 -1
  8. package/lib/Buffer/index.es.min.js +1 -1
  9. package/lib/Canvas/index.es.js +1 -1
  10. package/lib/Canvas/index.es.min.js +1 -1
  11. package/lib/Cardinal/index.es.js +1 -1
  12. package/lib/Cardinal/index.es.min.js +1 -1
  13. package/lib/Eoap/index.es.js +1 -1
  14. package/lib/Eoap/index.es.min.js +1 -1
  15. package/lib/Hermite/index.es.js +1 -1
  16. package/lib/Hermite/index.es.min.js +1 -1
  17. package/lib/MapCoordinate/index.es.js +1 -1
  18. package/lib/MapCoordinate/index.es.min.js +1 -1
  19. package/lib/Matrix4/index.es.js +1 -1
  20. package/lib/Matrix4/index.es.min.js +1 -1
  21. package/lib/Mercator/index.es.js +1 -1
  22. package/lib/Mercator/index.es.min.js +1 -1
  23. package/lib/PieLayout/index.es.js +121 -121
  24. package/lib/PieLayout/index.es.min.js +2 -2
  25. package/lib/RawCanvas/index.es.js +1 -1
  26. package/lib/RawCanvas/index.es.min.js +1 -1
  27. package/lib/SVG/index.es.js +1 -1
  28. package/lib/SVG/index.es.min.js +1 -1
  29. package/lib/Shader/index.es.js +1 -1
  30. package/lib/Shader/index.es.min.js +1 -1
  31. package/lib/Texture/index.es.js +1 -1
  32. package/lib/Texture/index.es.min.js +1 -1
  33. package/lib/TreeLayout/index.es.js +121 -121
  34. package/lib/TreeLayout/index.es.min.js +2 -2
  35. package/lib/animation/index.es.js +121 -121
  36. package/lib/animation/index.es.min.js +2 -2
  37. package/lib/assemble/index.es.js +1 -1
  38. package/lib/assemble/index.es.min.js +1 -1
  39. package/lib/getLoopColors/index.es.js +1 -1
  40. package/lib/getLoopColors/index.es.min.js +1 -1
  41. package/lib/getWebGLContext/index.es.js +1 -1
  42. package/lib/getWebGLContext/index.es.min.js +1 -1
  43. package/lib/index.umd.js +171 -171
  44. package/lib/index.umd.min.js +3 -3
  45. package/lib/initOption/index.es.js +1 -1
  46. package/lib/initOption/index.es.min.js +1 -1
  47. package/lib/mergeOption/index.es.js +1 -1
  48. package/lib/mergeOption/index.es.min.js +1 -1
  49. package/lib/move/index.es.js +1 -1
  50. package/lib/move/index.es.min.js +1 -1
  51. package/lib/rotate/index.es.js +1 -1
  52. package/lib/rotate/index.es.min.js +1 -1
  53. package/lib/ruler/index.es.js +1 -1
  54. package/lib/ruler/index.es.min.js +1 -1
  55. package/lib/scale/index.es.js +1 -1
  56. package/lib/scale/index.es.min.js +1 -1
  57. package/lib/throttle/index.es.js +51 -51
  58. package/lib/throttle/index.es.min.js +2 -2
  59. package/minialipay/ui-canvas/drawImage.js +35 -35
  60. package/minialipay/ui-canvas/index.acss +4 -4
  61. package/minialipay/ui-canvas/index.axml +3 -3
  62. package/minialipay/ui-canvas/index.d.ts +1 -1
  63. package/minialipay/ui-canvas/index.js +100 -100
  64. package/minialipay/ui-canvas/index.json +6 -6
  65. package/miniprogram/ui-canvas/drawImage.js +35 -35
  66. package/miniprogram/ui-canvas/index.js +125 -125
  67. package/miniprogram/ui-canvas/index.json +4 -4
  68. package/miniprogram/ui-canvas/index.wxml +4 -4
  69. package/miniprogram/ui-canvas/index.wxss +5 -5
  70. package/package/BarLayout/index.ts +2 -2
  71. package/package/Buffer/index.ts +2 -2
  72. package/package/Canvas/index.ts +2 -2
  73. package/package/Cardinal/index.ts +2 -2
  74. package/package/Eoap/index.ts +2 -2
  75. package/package/Hermite/index.ts +2 -2
  76. package/package/MapCoordinate/index.ts +2 -2
  77. package/package/Matrix4/index.ts +2 -2
  78. package/package/Mercator/index.ts +2 -2
  79. package/package/PieLayout/index.ts +2 -2
  80. package/package/RawCanvas/index.ts +2 -2
  81. package/package/SVG/index.ts +2 -2
  82. package/package/Shader/index.ts +2 -2
  83. package/package/Texture/index.ts +2 -2
  84. package/package/TreeLayout/index.ts +2 -2
  85. package/package/animation/index.ts +5 -5
  86. package/package/assemble/index.ts +2 -2
  87. package/package/getLoopColors/index.ts +2 -2
  88. package/package/getWebGLContext/index.ts +40 -40
  89. package/package/index.ts +84 -84
  90. package/package/initOption/index.ts +2 -2
  91. package/package/mergeOption/index.ts +2 -2
  92. package/package/move/index.ts +2 -2
  93. package/package/rotate/index.ts +2 -2
  94. package/package/ruler/index.ts +2 -2
  95. package/package/scale/index.ts +2 -2
  96. package/package/throttle/index.ts +2 -2
  97. package/package.json +75 -75
  98. package/src/Canvas.ts +89 -89
  99. package/src/Eoap.ts +66 -66
  100. package/src/Matrix4/index.ts +84 -84
  101. package/src/Matrix4/move.ts +12 -12
  102. package/src/Matrix4/rotate.ts +15 -15
  103. package/src/Matrix4/scale.ts +11 -11
  104. package/src/Matrix4/transform.ts +64 -64
  105. package/src/Mercator.ts +27 -27
  106. package/src/SVG.ts +55 -55
  107. package/src/common/assemble.ts +22 -22
  108. package/src/common/canvas/arc.ts +51 -51
  109. package/src/common/canvas/config.ts +176 -176
  110. package/src/common/canvas/default.ts +64 -64
  111. package/src/common/canvas/gradient.ts +31 -31
  112. package/src/common/canvas/index.ts +189 -189
  113. package/src/common/canvas/texts.ts +18 -18
  114. package/src/common/map/getBoundary.ts +15 -15
  115. package/src/common/map/tool.ts +29 -29
  116. package/src/common/option.ts +29 -29
  117. package/src/common/setStyle.ts +5 -5
  118. package/src/common/svg/config.ts +213 -213
  119. package/src/common/svg/default.ts +29 -29
  120. package/src/common/svg/gradient.ts +53 -53
  121. package/src/common/svg/index.ts +420 -420
  122. package/src/common/svg/tool.ts +51 -51
  123. package/src/common/tree/index.ts +25 -25
  124. package/src/common/tree/toInnerTree.ts +61 -61
  125. package/src/common/tree/toPlainTree.ts +135 -135
  126. package/src/common/type.ts +26 -26
  127. package/src/common/webgl/buffer.ts +79 -79
  128. package/src/common/webgl/getWebGLContext.ts +45 -45
  129. package/src/common/webgl/shader.ts +75 -75
  130. package/src/common/webgl/texture.ts +98 -98
  131. package/src/coordinate/MapCoordinate.ts +80 -80
  132. package/src/getLoopColors.ts +42 -42
  133. package/src/interpolation/Cardinal.ts +110 -110
  134. package/src/interpolation/Hermite.ts +65 -65
  135. package/src/layout/BarLayout.ts +249 -249
  136. package/src/layout/TreeLayout.ts +200 -200
  137. package/src/move.ts +7 -7
  138. package/src/rotate.ts +7 -7
  139. package/src/ruler.ts +209 -209
  140. package/src/scale.ts +6 -6
  141. package/types/Bar.d.ts +91 -91
  142. package/types/BarConfig.d.ts +4 -4
  143. package/types/BarLayout.d.ts +48 -48
  144. package/types/BarOption.d.ts +31 -31
  145. package/types/Buffer.d.ts +23 -23
  146. package/types/Canvas.d.ts +375 -375
  147. package/types/CanvasConfig.d.ts +88 -88
  148. package/types/CanvasOption.d.ts +13 -13
  149. package/types/CanvasOpts.d.ts +9 -9
  150. package/types/Cardinal.d.ts +13 -13
  151. package/types/Gradient.d.ts +14 -14
  152. package/types/Hermite.d.ts +18 -18
  153. package/types/Map.d.ts +9 -9
  154. package/types/MapConfig.d.ts +27 -27
  155. package/types/MapCoordinate.d.ts +22 -22
  156. package/types/Matrix4.d.ts +47 -47
  157. package/types/Pie.d.ts +73 -73
  158. package/types/PieConfig.d.ts +26 -26
  159. package/types/PieLayout.d.ts +40 -40
  160. package/types/PieOption.d.ts +21 -21
  161. package/types/SVG.d.ts +278 -278
  162. package/types/SVGConfig.d.ts +71 -71
  163. package/types/Shader.d.ts +16 -16
  164. package/types/Texture.d.ts +16 -16
  165. package/types/Tree.d.ts +74 -74
  166. package/types/TreeConfig.d.ts +36 -36
  167. package/types/TreeLayout.d.ts +59 -59
  168. package/types/TreeOption.d.ts +48 -48
  169. package/types/animation.d.ts +11 -11
  170. package/types/assemble.d.ts +5 -5
  171. package/types/getLoopColors.d.ts +5 -5
  172. package/types/getWebGLContext.d.ts +7 -7
  173. package/types/index.d.ts +196 -196
  174. package/types/move.d.ts +5 -5
  175. package/types/option.d.ts +12 -12
  176. package/types/painterConfig.d.ts +4 -4
  177. package/types/rotate.d.ts +5 -5
  178. package/types/ruler.d.ts +10 -10
  179. package/types/scale.d.ts +5 -5
  180. package/types/throttle.d.ts +5 -5
  181. package/types/ui-canvas.d.ts +4 -4
  182. package/types/uni-canvas.d.ts +3 -3
  183. package/uni-app/drawImage.js +19 -19
  184. package/uni-app/ui-canvas.vue +295 -295
package/package/index.ts CHANGED
@@ -1,85 +1,85 @@
1
- import Cardinal from "./Cardinal/index"
2
- import Hermite from "./Hermite/index"
3
-
4
- import Matrix4 from "./Matrix4/index"
5
- import rotate from "./rotate/index"
6
- import move from "./move/index"
7
- import scale from "./scale/index"
8
-
9
- import getLoopColors from "./getLoopColors/index"
10
- import animation from "./animation/index"
11
- import ruler from "./ruler/index"
12
-
13
- import SVG from "./SVG/index"
14
- import Canvas from "./Canvas/index"
15
- import RawCanvas from "../src/common/canvas/index"
16
-
17
- import getWebGLContext from "./getWebGLContext/index"
18
- import Shader from "./Shader/index"
19
- import Texture from "./Texture/index"
20
- import Buffer from "./Buffer/index"
21
-
22
- import Eoap from "./Eoap/index"
23
- import Mercator from "./Mercator/index"
24
-
25
- import throttle from "./throttle/index"
26
-
27
- import MapCoordinate from "./MapCoordinate/index"
28
-
29
- import TreeLayout from "./TreeLayout/index"
30
- import PieLayout from "./PieLayout/index"
31
- import BarLayout from "./BarLayout/index"
32
-
33
- import initOption from "./initOption/index"
34
- import mergeOption from "./mergeOption/index"
35
-
36
- import assemble from "./assemble/index"
37
-
38
- export default {
39
-
40
- // 插值
41
- Cardinal,
42
- Hermite,
43
-
44
- // 变换
45
- Matrix4,
46
- rotate,
47
- move,
48
- scale,
49
-
50
- // 工具
51
- getLoopColors,
52
- animation,
53
- ruler,
54
-
55
- // 画笔
56
- SVG,
57
- Canvas,
58
- RawCanvas,
59
-
60
- // WebGL
61
- getWebGLContext,
62
- Shader,
63
- Texture,
64
- Buffer,
65
-
66
- // 投影
67
- Eoap,
68
- Mercator,
69
-
70
- // 辅助
71
- throttle,
72
- assemble,
73
-
74
- // 坐标系
75
- MapCoordinate,
76
-
77
- // 布局
78
- TreeLayout,
79
- PieLayout,
80
- BarLayout,
81
-
82
- // 配置项
83
- initOption,
84
- mergeOption
1
+ import Cardinal from "./Cardinal/index"
2
+ import Hermite from "./Hermite/index"
3
+
4
+ import Matrix4 from "./Matrix4/index"
5
+ import rotate from "./rotate/index"
6
+ import move from "./move/index"
7
+ import scale from "./scale/index"
8
+
9
+ import getLoopColors from "./getLoopColors/index"
10
+ import animation from "./animation/index"
11
+ import ruler from "./ruler/index"
12
+
13
+ import SVG from "./SVG/index"
14
+ import Canvas from "./Canvas/index"
15
+ import RawCanvas from "../src/common/canvas/index"
16
+
17
+ import getWebGLContext from "./getWebGLContext/index"
18
+ import Shader from "./Shader/index"
19
+ import Texture from "./Texture/index"
20
+ import Buffer from "./Buffer/index"
21
+
22
+ import Eoap from "./Eoap/index"
23
+ import Mercator from "./Mercator/index"
24
+
25
+ import throttle from "./throttle/index"
26
+
27
+ import MapCoordinate from "./MapCoordinate/index"
28
+
29
+ import TreeLayout from "./TreeLayout/index"
30
+ import PieLayout from "./PieLayout/index"
31
+ import BarLayout from "./BarLayout/index"
32
+
33
+ import initOption from "./initOption/index"
34
+ import mergeOption from "./mergeOption/index"
35
+
36
+ import assemble from "./assemble/index"
37
+
38
+ export default {
39
+
40
+ // 插值
41
+ Cardinal,
42
+ Hermite,
43
+
44
+ // 变换
45
+ Matrix4,
46
+ rotate,
47
+ move,
48
+ scale,
49
+
50
+ // 工具
51
+ getLoopColors,
52
+ animation,
53
+ ruler,
54
+
55
+ // 画笔
56
+ SVG,
57
+ Canvas,
58
+ RawCanvas,
59
+
60
+ // WebGL
61
+ getWebGLContext,
62
+ Shader,
63
+ Texture,
64
+ Buffer,
65
+
66
+ // 投影
67
+ Eoap,
68
+ Mercator,
69
+
70
+ // 辅助
71
+ throttle,
72
+ assemble,
73
+
74
+ // 坐标系
75
+ MapCoordinate,
76
+
77
+ // 布局
78
+ TreeLayout,
79
+ PieLayout,
80
+ BarLayout,
81
+
82
+ // 配置项
83
+ initOption,
84
+ mergeOption
85
85
  }
@@ -1,3 +1,3 @@
1
- import { initOption } from "../../src/common/option"
2
-
1
+ import { initOption } from "../../src/common/option"
2
+
3
3
  export default initOption
@@ -1,3 +1,3 @@
1
- import { mergeOption } from "../../src/common/option"
2
-
1
+ import { mergeOption } from "../../src/common/option"
2
+
3
3
  export default mergeOption
@@ -1,3 +1,3 @@
1
- import move from "../../src/move"
2
-
1
+ import move from "../../src/move"
2
+
3
3
  export default move
@@ -1,3 +1,3 @@
1
- import rotate from "../../src/rotate"
2
-
1
+ import rotate from "../../src/rotate"
2
+
3
3
  export default rotate
@@ -1,3 +1,3 @@
1
- import ruler from "../../src/ruler"
2
-
1
+ import ruler from "../../src/ruler"
2
+
3
3
  export default ruler
@@ -1,3 +1,3 @@
1
- import scale from "../../src/scale"
2
-
1
+ import scale from "../../src/scale"
2
+
3
3
  export default scale
@@ -1,3 +1,3 @@
1
- import { throttle } from "oipage/web/throttle/index"
2
-
1
+ import { throttle } from "oipage/web/throttle/index"
2
+
3
3
  export default throttle
package/package.json CHANGED
@@ -1,75 +1,75 @@
1
- {
2
- "name": "vislite",
3
- "version": "1.9.0-alpha.2",
4
- "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
5
- "main": "./lib/index.umd.min.js",
6
- "typings": "./types/index.d.ts",
7
- "unpkg": "./lib/index.umd.min.js",
8
- "jsdelivr": "./lib/index.umd.min.js",
9
- "sideEffects": false,
10
- "scripts": {
11
- "dev": "webpack serve --config ./build/webpack.config.js",
12
- "build": "oipage-cli disk -d ./lib && node ./build/pkg.js",
13
- "test": "karma start ./build/karma.config.js",
14
- "lint": "eslint src/**/*.ts --fix"
15
- },
16
- "miniprogram": ".",
17
- "repository": {
18
- "type": "git",
19
- "url": "git+https://github.com/oi-contrib/VISLite.git"
20
- },
21
- "keywords": [
22
- "svg",
23
- "webgl",
24
- "typescript",
25
- "canvas",
26
- "vue",
27
- "uniapp",
28
- "miniprogram",
29
- "image2d",
30
- "image3d",
31
- "oi-contrib",
32
- "vislite",
33
- "d3",
34
- "zxl20070701",
35
- "three",
36
- "echarts",
37
- "datav",
38
- "webgpu",
39
- "layout",
40
- "algorithm"
41
- ],
42
- "author": {
43
- "name": "zxl20070701",
44
- "url": "https://zxl20070701.github.io/notebook/home.html"
45
- },
46
- "license": "MIT",
47
- "bugs": {
48
- "url": "https://github.com/oi-contrib/VISLite/issues"
49
- },
50
- "homepage": "https://oi-contrib.github.io/VISLite",
51
- "devDependencies": {
52
- "@rollup/plugin-commonjs": "^25.0.7",
53
- "@rollup/plugin-node-resolve": "^15.2.3",
54
- "@rollup/plugin-typescript": "^11.1.0",
55
- "@types/jasmine": "^4.3.1",
56
- "@typescript-eslint/eslint-plugin": "^6.14.0",
57
- "@typescript-eslint/parser": "^6.14.0",
58
- "eslint": "^8.56.0",
59
- "karma": "^6.3.10",
60
- "karma-chrome-launcher": "^3.1.0",
61
- "karma-jasmine": "^4.0.1",
62
- "karma-webpack": "^5.0.0",
63
- "rollup": "^3.20.6",
64
- "terser": "^5.17.1",
65
- "ts-loader": "^9.2.8",
66
- "tslib": "^2.5.0",
67
- "typescript": "^4.6.2",
68
- "webpack": "^5.70.0",
69
- "webpack-cli": "^4.9.2",
70
- "webpack-dev-server": "^4.7.4"
71
- },
72
- "dependencies": {
73
- "oipage": "^1.8.0-alpha.1"
74
- }
75
- }
1
+ {
2
+ "name": "vislite",
3
+ "version": "1.9.0",
4
+ "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
5
+ "main": "./lib/index.umd.min.js",
6
+ "typings": "./types/index.d.ts",
7
+ "unpkg": "./lib/index.umd.min.js",
8
+ "jsdelivr": "./lib/index.umd.min.js",
9
+ "sideEffects": false,
10
+ "scripts": {
11
+ "dev": "webpack serve --config ./build/webpack.config.js",
12
+ "build": "oipage-cli disk -d ./lib && node ./build/pkg.js",
13
+ "test": "karma start ./build/karma.config.js",
14
+ "lint": "eslint src/**/*.ts --fix"
15
+ },
16
+ "miniprogram": ".",
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "git+https://github.com/oi-contrib/VISLite.git"
20
+ },
21
+ "keywords": [
22
+ "svg",
23
+ "webgl",
24
+ "typescript",
25
+ "canvas",
26
+ "vue",
27
+ "uniapp",
28
+ "miniprogram",
29
+ "image2d",
30
+ "image3d",
31
+ "oi-contrib",
32
+ "vislite",
33
+ "d3",
34
+ "zxl20070701",
35
+ "three",
36
+ "echarts",
37
+ "datav",
38
+ "webgpu",
39
+ "layout",
40
+ "algorithm"
41
+ ],
42
+ "author": {
43
+ "name": "zxl20070701",
44
+ "url": "https://zxl20070701.github.io/notebook/home.html"
45
+ },
46
+ "license": "MIT",
47
+ "bugs": {
48
+ "url": "https://github.com/oi-contrib/VISLite/issues"
49
+ },
50
+ "homepage": "https://oi-contrib.github.io/VISLite",
51
+ "devDependencies": {
52
+ "@rollup/plugin-commonjs": "^25.0.7",
53
+ "@rollup/plugin-node-resolve": "^15.2.3",
54
+ "@rollup/plugin-typescript": "^11.1.0",
55
+ "@types/jasmine": "^4.3.1",
56
+ "@typescript-eslint/eslint-plugin": "^6.14.0",
57
+ "@typescript-eslint/parser": "^6.14.0",
58
+ "eslint": "^8.56.0",
59
+ "karma": "^6.3.10",
60
+ "karma-chrome-launcher": "^3.1.0",
61
+ "karma-jasmine": "^4.0.1",
62
+ "karma-webpack": "^5.0.0",
63
+ "rollup": "^3.20.6",
64
+ "terser": "^5.17.1",
65
+ "ts-loader": "^9.2.8",
66
+ "tslib": "^2.5.0",
67
+ "typescript": "^4.6.2",
68
+ "webpack": "^5.70.0",
69
+ "webpack-cli": "^4.9.2",
70
+ "webpack-dev-server": "^4.7.4"
71
+ },
72
+ "dependencies": {
73
+ "oipage": "^1.8.0"
74
+ }
75
+ }
package/src/Canvas.ts CHANGED
@@ -1,90 +1,90 @@
1
- import type CanvasType from '../types/Canvas'
2
- import type CanvasOptionType from '../types/CanvasOption'
3
-
4
- import OralCanvas from './common/canvas/index'
5
- import { initOption } from './common/option'
6
-
7
- class Canvas extends OralCanvas implements CanvasType {
8
- private __canvas: HTMLCanvasElement
9
- private __el: HTMLElement
10
- constructor(el: HTMLElement | null, option: CanvasOptionType = {}, width: number = 0, height: number = 0) {
11
- if (!el) {
12
- throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
13
- }
14
-
15
- option = initOption(option, {
16
-
17
- // 对外暴露自定义缩放倍率(为满足特殊场景,以简化使用)
18
- // 2025年7月25日 于秦皇岛
19
- scale: 2,
20
-
21
- region: true,
22
- willReadFrequently: false
23
- })
24
-
25
- width = width || el.clientWidth
26
- height = height || el.clientHeight
27
-
28
- let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null = null
29
-
30
- const _el = el as any
31
-
32
- // 如果已经初始化过了
33
- if (_el._vislite_canvas_) {
34
- ViewCanvas = _el._vislite_canvas_[0]
35
- RegionCanvas = _el._vislite_canvas_[1]
36
- }
37
-
38
- // 否则就初始化
39
- else {
40
- ViewCanvas = document.createElement('canvas')
41
- el.appendChild(ViewCanvas)
42
-
43
- if (option.region) {
44
- RegionCanvas = document.createElement('canvas')
45
- }
46
-
47
- _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
48
-
49
- el.setAttribute('vislite', 'Canvas')
50
- }
51
-
52
- // 设置画布大小
53
- const canvasArray = [RegionCanvas, ViewCanvas]
54
- for (let index = 0; index < canvasArray.length; index++) {
55
- const canvas = canvasArray[index]
56
- if (canvas) {
57
- canvas.style.width = width + "px"
58
- canvas.setAttribute('width', ((index === 1 ? option.scale as number : 1) * width) + "")
59
-
60
- canvas.style.height = height + "px"
61
- canvas.setAttribute('height', ((index === 1 ? option.scale as number : 1) * height) + "")
62
- }
63
- }
64
-
65
- super(ViewCanvas, RegionCanvas, {
66
- willReadFrequently: option.willReadFrequently,
67
- }, option.scale)
68
-
69
- this.__canvas = ViewCanvas
70
- this.__el = el
71
- this.painter.scale(option.scale as number, option.scale as number)
72
- }
73
-
74
- toDataURL(type: string = "image/png", encoderOptions: number = 0.92): Promise<string> {
75
- return new Promise(resolve => {
76
- resolve(this.__canvas.toDataURL(type, encoderOptions))
77
- })
78
- }
79
-
80
- bind(eventName: string, callback: (regionName: string, x: number, y: number) => void) {
81
- this.__el.addEventListener(eventName, (event: any) => {
82
- this.getRegion(event.offsetX, event.offsetY).then(regionName => {
83
- callback(regionName, event.offsetX, event.offsetY)
84
- })
85
- })
86
- return this
87
- }
88
- }
89
-
1
+ import type CanvasType from '../types/Canvas'
2
+ import type CanvasOptionType from '../types/CanvasOption'
3
+
4
+ import OralCanvas from './common/canvas/index'
5
+ import { initOption } from './common/option'
6
+
7
+ class Canvas extends OralCanvas implements CanvasType {
8
+ private __canvas: HTMLCanvasElement
9
+ private __el: HTMLElement
10
+ constructor(el: HTMLElement | null, option: CanvasOptionType = {}, width: number = 0, height: number = 0) {
11
+ if (!el) {
12
+ throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
13
+ }
14
+
15
+ option = initOption(option, {
16
+
17
+ // 对外暴露自定义缩放倍率(为满足特殊场景,以简化使用)
18
+ // 2025年7月25日 于秦皇岛
19
+ scale: 2,
20
+
21
+ region: true,
22
+ willReadFrequently: false
23
+ })
24
+
25
+ width = width || el.clientWidth
26
+ height = height || el.clientHeight
27
+
28
+ let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null = null
29
+
30
+ const _el = el as any
31
+
32
+ // 如果已经初始化过了
33
+ if (_el._vislite_canvas_) {
34
+ ViewCanvas = _el._vislite_canvas_[0]
35
+ RegionCanvas = _el._vislite_canvas_[1]
36
+ }
37
+
38
+ // 否则就初始化
39
+ else {
40
+ ViewCanvas = document.createElement('canvas')
41
+ el.appendChild(ViewCanvas)
42
+
43
+ if (option.region) {
44
+ RegionCanvas = document.createElement('canvas')
45
+ }
46
+
47
+ _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
48
+
49
+ el.setAttribute('vislite', 'Canvas')
50
+ }
51
+
52
+ // 设置画布大小
53
+ const canvasArray = [RegionCanvas, ViewCanvas]
54
+ for (let index = 0; index < canvasArray.length; index++) {
55
+ const canvas = canvasArray[index]
56
+ if (canvas) {
57
+ canvas.style.width = width + "px"
58
+ canvas.setAttribute('width', ((index === 1 ? option.scale as number : 1) * width) + "")
59
+
60
+ canvas.style.height = height + "px"
61
+ canvas.setAttribute('height', ((index === 1 ? option.scale as number : 1) * height) + "")
62
+ }
63
+ }
64
+
65
+ super(ViewCanvas, RegionCanvas, {
66
+ willReadFrequently: option.willReadFrequently,
67
+ }, option.scale)
68
+
69
+ this.__canvas = ViewCanvas
70
+ this.__el = el
71
+ this.painter.scale(option.scale as number, option.scale as number)
72
+ }
73
+
74
+ toDataURL(type: string = "image/png", encoderOptions: number = 0.92): Promise<string> {
75
+ return new Promise(resolve => {
76
+ resolve(this.__canvas.toDataURL(type, encoderOptions))
77
+ })
78
+ }
79
+
80
+ bind(eventName: string, callback: (regionName: string, x: number, y: number) => void) {
81
+ this.__el.addEventListener(eventName, (event: any) => {
82
+ this.getRegion(event.offsetX, event.offsetY).then(regionName => {
83
+ callback(regionName, event.offsetX, event.offsetY)
84
+ })
85
+ })
86
+ return this
87
+ }
88
+ }
89
+
90
90
  export default Canvas