vislite 1.7.0-alpha.0 → 1.7.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 (186) hide show
  1. package/AUTHORS.txt +6 -6
  2. package/CHANGELOG +13 -3
  3. package/LICENSE +20 -20
  4. package/README.md +1 -49
  5. package/lib/BarLayout/index.es.js +1 -1
  6. package/lib/BarLayout/index.es.min.js +1 -1
  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 +1 -1
  24. package/lib/PieLayout/index.es.min.js +1 -1
  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 +91 -2
  28. package/lib/SVG/index.es.min.js +2 -2
  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 +1 -1
  34. package/lib/TreeLayout/index.es.min.js +1 -1
  35. package/lib/animation/index.es.js +1 -1
  36. package/lib/animation/index.es.min.js +1 -1
  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 +91 -2
  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 +1 -1
  58. package/lib/throttle/index.es.min.js +1 -1
  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 +1 -1
  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 +188 -188
  113. package/src/common/canvas/painter.ts +453 -453
  114. package/src/common/canvas/texts.ts +18 -18
  115. package/src/common/map/getBoundary.ts +15 -15
  116. package/src/common/map/tool.ts +29 -29
  117. package/src/common/option.ts +29 -29
  118. package/src/common/setStyle.ts +5 -5
  119. package/src/common/svg/config.ts +213 -213
  120. package/src/common/svg/default.ts +29 -29
  121. package/src/common/svg/gradient.ts +53 -53
  122. package/src/common/svg/index.ts +89 -2
  123. package/src/common/svg/tool.ts +51 -51
  124. package/src/common/tree/index.ts +25 -25
  125. package/src/common/tree/toInnerTree.ts +61 -61
  126. package/src/common/tree/toPlainTree.ts +135 -135
  127. package/src/common/type.ts +26 -26
  128. package/src/common/webgl/buffer.ts +79 -79
  129. package/src/common/webgl/getWebGLContext.ts +45 -45
  130. package/src/common/webgl/shader.ts +75 -75
  131. package/src/common/webgl/texture.ts +98 -98
  132. package/src/coordinate/MapCoordinate.ts +80 -80
  133. package/src/getLoopColors.ts +42 -42
  134. package/src/interpolation/Cardinal.ts +110 -110
  135. package/src/interpolation/Hermite.ts +65 -65
  136. package/src/layout/BarLayout.ts +249 -249
  137. package/src/layout/PieLayout.ts +144 -144
  138. package/src/layout/TreeLayout.ts +200 -200
  139. package/src/move.ts +7 -7
  140. package/src/rotate.ts +7 -7
  141. package/src/ruler.ts +209 -209
  142. package/src/scale.ts +6 -6
  143. package/types/Bar.d.ts +91 -91
  144. package/types/BarConfig.d.ts +4 -4
  145. package/types/BarLayout.d.ts +48 -48
  146. package/types/BarOption.d.ts +31 -31
  147. package/types/Buffer.d.ts +23 -23
  148. package/types/Canvas.d.ts +375 -375
  149. package/types/CanvasConfig.d.ts +88 -88
  150. package/types/CanvasOption.d.ts +13 -13
  151. package/types/CanvasOpts.d.ts +9 -9
  152. package/types/Cardinal.d.ts +13 -13
  153. package/types/Gradient.d.ts +14 -14
  154. package/types/Hermite.d.ts +18 -18
  155. package/types/Map.d.ts +9 -9
  156. package/types/MapConfig.d.ts +27 -27
  157. package/types/MapCoordinate.d.ts +22 -22
  158. package/types/Matrix4.d.ts +47 -47
  159. package/types/Pie.d.ts +73 -73
  160. package/types/PieConfig.d.ts +26 -26
  161. package/types/PieLayout.d.ts +40 -40
  162. package/types/PieOption.d.ts +21 -21
  163. package/types/SVG.d.ts +31 -0
  164. package/types/SVGConfig.d.ts +71 -71
  165. package/types/Shader.d.ts +16 -16
  166. package/types/Texture.d.ts +16 -16
  167. package/types/Tree.d.ts +74 -74
  168. package/types/TreeConfig.d.ts +36 -36
  169. package/types/TreeLayout.d.ts +59 -59
  170. package/types/TreeOption.d.ts +48 -48
  171. package/types/animation.d.ts +11 -11
  172. package/types/assemble.d.ts +5 -5
  173. package/types/getLoopColors.d.ts +5 -5
  174. package/types/getWebGLContext.d.ts +7 -7
  175. package/types/index.d.ts +195 -195
  176. package/types/move.d.ts +5 -5
  177. package/types/option.d.ts +12 -12
  178. package/types/painterConfig.d.ts +4 -4
  179. package/types/rotate.d.ts +5 -5
  180. package/types/ruler.d.ts +10 -10
  181. package/types/scale.d.ts +5 -5
  182. package/types/throttle.d.ts +5 -5
  183. package/types/ui-canvas.d.ts +4 -4
  184. package/types/uni-canvas.d.ts +3 -3
  185. package/uni-app/drawImage.js +19 -19
  186. package/uni-app/ui-canvas.vue +295 -295
@@ -1,3 +1,3 @@
1
- import Shader from '../../src/common/webgl/shader'
2
-
1
+ import Shader from '../../src/common/webgl/shader'
2
+
3
3
  export default Shader
@@ -1,3 +1,3 @@
1
- import Texture from '../../src/common/webgl/texture'
2
-
1
+ import Texture from '../../src/common/webgl/texture'
2
+
3
3
  export default Texture
@@ -1,3 +1,3 @@
1
- import TreeLayout from "../../src/layout/TreeLayout"
2
-
1
+ import TreeLayout from "../../src/layout/TreeLayout"
2
+
3
3
  export default TreeLayout
@@ -1,6 +1,6 @@
1
- import type { animationFun } from "oipage/web/animation/index"
2
- import { animation } from "oipage/web/animation/index"
3
-
4
- export default function (doback: animationFun, duration?: number, callback?: animationFun) {
5
- return animation(doback, duration || 400, callback || function () { }).stop
1
+ import type { animationFun } from "oipage/web/animation/index"
2
+ import { animation } from "oipage/web/animation/index"
3
+
4
+ export default function (doback: animationFun, duration?: number, callback?: animationFun) {
5
+ return animation(doback, duration || 400, callback || function () { }).stop
6
6
  }
@@ -1,3 +1,3 @@
1
- import assemble from "../../src/common/assemble"
2
-
1
+ import assemble from "../../src/common/assemble"
2
+
3
3
  export default assemble
@@ -1,3 +1,3 @@
1
- import getLoopColors from "../../src/getLoopColors"
2
-
1
+ import getLoopColors from "../../src/getLoopColors"
2
+
3
3
  export default getLoopColors
@@ -1,41 +1,41 @@
1
- import getWebGLContext from "../../src/common/webgl/getWebGLContext"
2
- import type { WebGLmodeType } from "../../types/getWebGLContext"
3
-
4
- export default (el: HTMLElement | null, scale: number = 1, mode?: WebGLmodeType) => {
5
- if (!el) {
6
- throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.")
7
- }
8
-
9
- let width = el.clientWidth, height = el.clientHeight
10
-
11
- let ViewCanvas: HTMLCanvasElement
12
-
13
- let _el = el as any
14
-
15
- // 如果已经初始化过了
16
- if (_el._vislite_canvas_) {
17
- ViewCanvas = _el._vislite_canvas_
18
- }
19
-
20
- // 否则就初始化
21
- else {
22
-
23
- ViewCanvas = document.createElement('canvas')
24
- el.appendChild(ViewCanvas)
25
-
26
- _el._vislite_canvas_ = ViewCanvas
27
-
28
- el.setAttribute('vislite', 'WebGL')
29
-
30
- }
31
-
32
- // 设置画布大小
33
-
34
- ViewCanvas.style.width = width + "px"
35
- ViewCanvas.setAttribute('width', width + "")
36
-
37
- ViewCanvas.style.height = height + "px"
38
- ViewCanvas.setAttribute('height', height + "")
39
-
40
- return getWebGLContext(ViewCanvas, scale, {}, mode)
1
+ import getWebGLContext from "../../src/common/webgl/getWebGLContext"
2
+ import type { WebGLmodeType } from "../../types/getWebGLContext"
3
+
4
+ export default (el: HTMLElement | null, scale: number = 1, mode?: WebGLmodeType) => {
5
+ if (!el) {
6
+ throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.")
7
+ }
8
+
9
+ let width = el.clientWidth, height = el.clientHeight
10
+
11
+ let ViewCanvas: HTMLCanvasElement
12
+
13
+ let _el = el as any
14
+
15
+ // 如果已经初始化过了
16
+ if (_el._vislite_canvas_) {
17
+ ViewCanvas = _el._vislite_canvas_
18
+ }
19
+
20
+ // 否则就初始化
21
+ else {
22
+
23
+ ViewCanvas = document.createElement('canvas')
24
+ el.appendChild(ViewCanvas)
25
+
26
+ _el._vislite_canvas_ = ViewCanvas
27
+
28
+ el.setAttribute('vislite', 'WebGL')
29
+
30
+ }
31
+
32
+ // 设置画布大小
33
+
34
+ ViewCanvas.style.width = width + "px"
35
+ ViewCanvas.setAttribute('width', width + "")
36
+
37
+ ViewCanvas.style.height = height + "px"
38
+ ViewCanvas.setAttribute('height', height + "")
39
+
40
+ return getWebGLContext(ViewCanvas, scale, {}, mode)
41
41
  }
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,6 +1,6 @@
1
1
  {
2
2
  "name": "vislite",
3
- "version": "1.7.0-alpha.0",
3
+ "version": "1.7.0",
4
4
  "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
5
5
  "main": "./lib/index.umd.min.js",
6
6
  "typings": "./types/index.d.ts",
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