vislite 1.12.0 → 1.12.1

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 (179) hide show
  1. package/AUTHORS.txt +6 -6
  2. package/CHANGELOG +408 -403
  3. package/LICENSE +20 -20
  4. package/README-en.md +245 -245
  5. package/README.md +245 -245
  6. package/bin/formatArgv.js +30 -30
  7. package/bin/help.js +17 -17
  8. package/bin/run +21 -21
  9. package/bin/skills.js +26 -26
  10. package/lib/BarLayout/index.es.js +348 -348
  11. package/lib/Buffer/index.es.js +34 -34
  12. package/lib/Canvas/index.es.js +804 -804
  13. package/lib/Cardinal/index.es.js +89 -89
  14. package/lib/Eoap/index.es.js +32 -32
  15. package/lib/Hermite/index.es.js +34 -34
  16. package/lib/MapCoordinate/index.es.js +199 -199
  17. package/lib/Matrix4/index.es.js +123 -123
  18. package/lib/Mercator/index.es.js +18 -18
  19. package/lib/PieLayout/index.es.js +115 -115
  20. package/lib/RawCanvas/index.es.js +736 -736
  21. package/lib/SVG/index.es.js +626 -626
  22. package/lib/Shader/index.es.js +34 -34
  23. package/lib/Texture/index.es.js +52 -52
  24. package/lib/TreeLayout/index.es.js +301 -301
  25. package/lib/animation/index.es.js +2 -2
  26. package/lib/assemble/index.es.js +19 -19
  27. package/lib/getLoopColors/index.es.js +34 -34
  28. package/lib/getWebGLContext/index.es.js +61 -61
  29. package/lib/index.umd.js +2797 -2797
  30. package/lib/index.umd.min.js +1 -1
  31. package/lib/initOption/index.es.js +5 -5
  32. package/lib/mergeOption/index.es.js +34 -34
  33. package/lib/move/index.es.js +6 -6
  34. package/lib/rotate/index.es.js +6 -6
  35. package/lib/ruler/index.es.js +136 -136
  36. package/lib/scale/index.es.js +5 -5
  37. package/minialipay/ui-canvas/drawImage.js +35 -35
  38. package/minialipay/ui-canvas/index.acss +4 -4
  39. package/minialipay/ui-canvas/index.axml +3 -3
  40. package/minialipay/ui-canvas/index.d.ts +1 -1
  41. package/minialipay/ui-canvas/index.js +100 -100
  42. package/minialipay/ui-canvas/index.json +6 -6
  43. package/miniprogram/ui-canvas/drawImage.js +35 -35
  44. package/miniprogram/ui-canvas/index.js +125 -125
  45. package/miniprogram/ui-canvas/index.json +4 -4
  46. package/miniprogram/ui-canvas/index.wxml +4 -4
  47. package/miniprogram/ui-canvas/index.wxss +5 -5
  48. package/package/BarLayout/index.ts +2 -2
  49. package/package/Buffer/index.ts +2 -2
  50. package/package/Canvas/index.ts +2 -2
  51. package/package/Cardinal/index.ts +2 -2
  52. package/package/Eoap/index.ts +2 -2
  53. package/package/Hermite/index.ts +2 -2
  54. package/package/MapCoordinate/index.ts +2 -2
  55. package/package/Matrix4/index.ts +2 -2
  56. package/package/Mercator/index.ts +2 -2
  57. package/package/PieLayout/index.ts +2 -2
  58. package/package/RawCanvas/index.ts +2 -2
  59. package/package/SVG/index.ts +2 -2
  60. package/package/Shader/index.ts +2 -2
  61. package/package/Texture/index.ts +2 -2
  62. package/package/TreeLayout/index.ts +2 -2
  63. package/package/animation/index.ts +5 -5
  64. package/package/assemble/index.ts +2 -2
  65. package/package/getLoopColors/index.ts +2 -2
  66. package/package/getWebGLContext/index.ts +40 -40
  67. package/package/index.ts +84 -84
  68. package/package/initOption/index.ts +2 -2
  69. package/package/mergeOption/index.ts +2 -2
  70. package/package/move/index.ts +2 -2
  71. package/package/rotate/index.ts +2 -2
  72. package/package/ruler/index.ts +2 -2
  73. package/package/scale/index.ts +2 -2
  74. package/package/throttle/index.ts +2 -2
  75. package/package.json +79 -79
  76. package/skills/vislite-lib/BarLayout.md +117 -117
  77. package/skills/vislite-lib/Canvas.md +183 -183
  78. package/skills/vislite-lib/Interpolation.md +129 -129
  79. package/skills/vislite-lib/Matrix.md +174 -174
  80. package/skills/vislite-lib/PieLayout.md +131 -131
  81. package/skills/vislite-lib/Projections.md +158 -158
  82. package/skills/vislite-lib/SKILL.md +179 -179
  83. package/skills/vislite-lib/SVG.md +137 -137
  84. package/skills/vislite-lib/TreeLayout.md +176 -176
  85. package/skills/vislite-lib/Utilities.md +261 -261
  86. package/skills/vislite-lib/WebGL.md +106 -106
  87. package/skills/vislite-lib/minialipay/ui-canvas.md +95 -95
  88. package/skills/vislite-lib/miniprogram/ui-canvas.md +98 -98
  89. package/skills/vislite-lib/uniapp/ui-canvas.md +113 -113
  90. package/src/Canvas.ts +89 -89
  91. package/src/Eoap.ts +66 -66
  92. package/src/Matrix4/index.ts +84 -84
  93. package/src/Matrix4/move.ts +12 -12
  94. package/src/Matrix4/rotate.ts +15 -15
  95. package/src/Matrix4/scale.ts +11 -11
  96. package/src/Matrix4/transform.ts +64 -64
  97. package/src/Mercator.ts +27 -27
  98. package/src/SVG.ts +86 -86
  99. package/src/common/assemble.ts +30 -30
  100. package/src/common/canvas/arc.ts +51 -51
  101. package/src/common/canvas/config.ts +176 -176
  102. package/src/common/canvas/default.ts +64 -64
  103. package/src/common/canvas/gradient.ts +31 -31
  104. package/src/common/canvas/index.ts +189 -189
  105. package/src/common/canvas/painter.ts +475 -475
  106. package/src/common/canvas/texts.ts +18 -18
  107. package/src/common/map/getBoundary.ts +15 -15
  108. package/src/common/map/tool.ts +29 -29
  109. package/src/common/option.ts +31 -31
  110. package/src/common/setStyle.ts +5 -5
  111. package/src/common/svg/config.ts +213 -213
  112. package/src/common/svg/default.ts +29 -29
  113. package/src/common/svg/gradient.ts +53 -53
  114. package/src/common/svg/index.ts +420 -420
  115. package/src/common/svg/tool.ts +51 -51
  116. package/src/common/tree/index.ts +25 -25
  117. package/src/common/tree/toInnerTree.ts +61 -61
  118. package/src/common/tree/toPlainTree.ts +135 -135
  119. package/src/common/type.ts +26 -26
  120. package/src/common/webgl/buffer.ts +79 -79
  121. package/src/common/webgl/getWebGLContext.ts +45 -45
  122. package/src/common/webgl/shader.ts +75 -75
  123. package/src/common/webgl/texture.ts +98 -98
  124. package/src/coordinate/MapCoordinate.ts +80 -80
  125. package/src/getLoopColors.ts +42 -42
  126. package/src/interpolation/Cardinal.ts +110 -110
  127. package/src/interpolation/Hermite.ts +65 -65
  128. package/src/layout/BarLayout.ts +249 -249
  129. package/src/layout/PieLayout.ts +146 -146
  130. package/src/layout/TreeLayout.ts +200 -200
  131. package/src/move.ts +7 -7
  132. package/src/rotate.ts +7 -7
  133. package/src/ruler.ts +209 -209
  134. package/src/scale.ts +6 -6
  135. package/types/Bar.d.ts +91 -91
  136. package/types/BarConfig.d.ts +4 -4
  137. package/types/BarLayout.d.ts +48 -48
  138. package/types/BarOption.d.ts +31 -31
  139. package/types/Buffer.d.ts +30 -30
  140. package/types/Canvas.d.ts +379 -379
  141. package/types/CanvasConfig.d.ts +61 -61
  142. package/types/CanvasOption.d.ts +13 -13
  143. package/types/CanvasOpts.d.ts +9 -9
  144. package/types/Cardinal.d.ts +20 -20
  145. package/types/Gradient.d.ts +20 -20
  146. package/types/Hermite.d.ts +25 -25
  147. package/types/Map.d.ts +9 -9
  148. package/types/MapConfig.d.ts +27 -27
  149. package/types/MapCoordinate.d.ts +22 -22
  150. package/types/Matrix4.d.ts +79 -79
  151. package/types/Pie.d.ts +73 -73
  152. package/types/PieConfig.d.ts +26 -26
  153. package/types/PieLayout.d.ts +40 -40
  154. package/types/PieOption.d.ts +21 -21
  155. package/types/SVG.d.ts +282 -282
  156. package/types/SVGConfig.d.ts +54 -54
  157. package/types/Shader.d.ts +22 -22
  158. package/types/Texture.d.ts +22 -22
  159. package/types/Tree.d.ts +74 -74
  160. package/types/TreeConfig.d.ts +52 -52
  161. package/types/TreeLayout.d.ts +71 -71
  162. package/types/TreeOption.d.ts +48 -48
  163. package/types/animation.d.ts +26 -26
  164. package/types/assemble.d.ts +14 -14
  165. package/types/getLoopColors.d.ts +13 -13
  166. package/types/getWebGLContext.d.ts +7 -7
  167. package/types/index.d.ts +220 -220
  168. package/types/module.d.ts +110 -110
  169. package/types/move.d.ts +15 -15
  170. package/types/option.d.ts +12 -12
  171. package/types/painterConfig.d.ts +14 -14
  172. package/types/rotate.d.ts +15 -15
  173. package/types/ruler.d.ts +24 -24
  174. package/types/scale.d.ts +15 -15
  175. package/types/throttle.d.ts +6 -6
  176. package/types/ui-canvas.d.ts +4 -4
  177. package/types/uni-canvas.d.ts +3 -3
  178. package/uni-app/drawImage.js +19 -19
  179. package/uni-app/ui-canvas.vue +295 -295
@@ -1,31 +1,31 @@
1
- export default function (begin: number, end: number, step: number, count: number) {
2
- const val: Array<number> = []
3
- for (let index = 0; index < count; index++) val[index] = begin
4
-
5
- // 非常类似进制数,每次调用都+1
6
- return function () {
7
- for (let i = 0; i < count; i++) {
8
-
9
- // 如果当前位可以进1
10
- if (val[i] + step < end) {
11
-
12
- // 直接累加,最后一次性格式化,避免每次都做toFixed+Number转换
13
- // 2026年9月22日 于南宁
14
- val[i] = val[i] + step
15
- break
16
- }
17
-
18
- // 如果当前位不可以,那当前位归0,尝试下一位
19
- else if (i < count - 1) {
20
- val[i] = begin
21
- }
22
- }
23
-
24
- // 返回前对每一位做一次toFixed(7),消除浮点累积误差
25
- for (let k = 0; k < val.length; k++) {
26
- val[k] = +val[k].toFixed(7)
27
- }
28
-
29
- return val
30
- }
1
+ export default function (begin: number, end: number, step: number, count: number) {
2
+ const val: Array<number> = []
3
+ for (let index = 0; index < count; index++) val[index] = begin
4
+
5
+ // 非常类似进制数,每次调用都+1
6
+ return function () {
7
+ for (let i = 0; i < count; i++) {
8
+
9
+ // 如果当前位可以进1
10
+ if (val[i] + step < end) {
11
+
12
+ // 直接累加,最后一次性格式化,避免每次都做toFixed+Number转换
13
+ // 2026年9月22日 于南宁
14
+ val[i] = val[i] + step
15
+ break
16
+ }
17
+
18
+ // 如果当前位不可以,那当前位归0,尝试下一位
19
+ else if (i < count - 1) {
20
+ val[i] = begin
21
+ }
22
+ }
23
+
24
+ // 返回前对每一位做一次toFixed(7),消除浮点累积误差
25
+ for (let k = 0; k < val.length; k++) {
26
+ val[k] = +val[k].toFixed(7)
27
+ }
28
+
29
+ return val
30
+ }
31
31
  }
@@ -1,51 +1,51 @@
1
-
2
- // 点(x,y)围绕中心(cx,cy)旋转deg度
3
-
4
- const rotate = function (cx: number, cy: number, deg: number, x: number, y: number) {
5
- const cos = Math.cos(deg), sin = Math.sin(deg)
6
- return [
7
- +((x - cx) * cos - (y - cy) * sin + cx).toFixed(7),
8
- +((x - cx) * sin + (y - cy) * cos + cy).toFixed(7)
9
- ]
10
- }
11
-
12
- // r1和r2,内半径和外半径
13
- // beginA起点弧度,rotateA旋转弧度式
14
-
15
- export default function (beginA: number, rotateA: number, cx: number, cy: number, r1: number, r2: number, doback: Function) {
16
-
17
- // 保证逆时针也是可以的
18
- if (rotateA < 0) {
19
- beginA += rotateA
20
- rotateA *= -1
21
- }
22
-
23
- const temp: number[] = []
24
- let p: number[]
25
-
26
- // 内部
27
- p = rotate(0, 0, beginA, r1, 0)
28
- temp[0] = p[0]
29
- temp[1] = p[1]
30
- p = rotate(0, 0, rotateA, p[0], p[1])
31
- temp[2] = p[0]
32
- temp[3] = p[1]
33
-
34
- // 外部
35
- p = rotate(0, 0, beginA, r2, 0)
36
- temp[4] = p[0]
37
- temp[5] = p[1]
38
- p = rotate(0, 0, rotateA, p[0], p[1])
39
- temp[6] = p[0]
40
- temp[7] = p[1]
41
-
42
- doback(
43
- beginA, beginA + rotateA,
44
- temp[0] + cx, temp[1] + cy,
45
- temp[4] + cx, temp[5] + cy,
46
- temp[2] + cx, temp[3] + cy,
47
- temp[6] + cx, temp[7] + cy,
48
- (r2 - r1) * 0.5
49
- )
50
-
51
- }
1
+
2
+ // 点(x,y)围绕中心(cx,cy)旋转deg度
3
+
4
+ const rotate = function (cx: number, cy: number, deg: number, x: number, y: number) {
5
+ const cos = Math.cos(deg), sin = Math.sin(deg)
6
+ return [
7
+ +((x - cx) * cos - (y - cy) * sin + cx).toFixed(7),
8
+ +((x - cx) * sin + (y - cy) * cos + cy).toFixed(7)
9
+ ]
10
+ }
11
+
12
+ // r1和r2,内半径和外半径
13
+ // beginA起点弧度,rotateA旋转弧度式
14
+
15
+ export default function (beginA: number, rotateA: number, cx: number, cy: number, r1: number, r2: number, doback: Function) {
16
+
17
+ // 保证逆时针也是可以的
18
+ if (rotateA < 0) {
19
+ beginA += rotateA
20
+ rotateA *= -1
21
+ }
22
+
23
+ const temp: number[] = []
24
+ let p: number[]
25
+
26
+ // 内部
27
+ p = rotate(0, 0, beginA, r1, 0)
28
+ temp[0] = p[0]
29
+ temp[1] = p[1]
30
+ p = rotate(0, 0, rotateA, p[0], p[1])
31
+ temp[2] = p[0]
32
+ temp[3] = p[1]
33
+
34
+ // 外部
35
+ p = rotate(0, 0, beginA, r2, 0)
36
+ temp[4] = p[0]
37
+ temp[5] = p[1]
38
+ p = rotate(0, 0, rotateA, p[0], p[1])
39
+ temp[6] = p[0]
40
+ temp[7] = p[1]
41
+
42
+ doback(
43
+ beginA, beginA + rotateA,
44
+ temp[0] + cx, temp[1] + cy,
45
+ temp[4] + cx, temp[5] + cy,
46
+ temp[2] + cx, temp[3] + cy,
47
+ temp[6] + cx, temp[7] + cy,
48
+ (r2 - r1) * 0.5
49
+ )
50
+
51
+ }
@@ -1,176 +1,176 @@
1
- import type CanvasConfigType from "../../../types/CanvasConfig"
2
-
3
- import arc from "./arc"
4
-
5
- // 文字统一设置方法
6
- export const initText = function (
7
- painter: CanvasRenderingContext2D,
8
- config: CanvasConfigType,
9
- x: number,
10
- y: number,
11
- deg: number
12
- ) {
13
- painter.beginPath();
14
- painter.translate(x, y);
15
- painter.rotate(deg);
16
- painter.font =
17
- config.fontStyle +
18
- " " +
19
- config.fontWeight +
20
- " " +
21
- config.fontSize +
22
- "px " +
23
- config.fontFamily;
24
- return painter
25
- }
26
-
27
- // 画弧统一设置方法
28
- export const initArc = function (
29
- painter: CanvasRenderingContext2D,
30
- config: CanvasConfigType,
31
- cx: number,
32
- cy: number,
33
- r1: number,
34
- r2: number,
35
- beginDeg: number,
36
- deg: number
37
- ) {
38
- if (r1 > r2) {
39
- const temp = r1
40
- r1 = r2
41
- r2 = temp
42
- }
43
-
44
- beginDeg = beginDeg % (Math.PI * 2)
45
-
46
- // 当|deg|>=2π的时候都认为是一个圆环
47
- // 为什么不取2π比较,是怕部分浏览器浮点不精确
48
- if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
49
- deg = Math.PI * 2
50
- } else {
51
- deg = deg % (Math.PI * 2)
52
- }
53
-
54
- arc(
55
- beginDeg,
56
- deg,
57
- cx,
58
- cy,
59
- r1,
60
- r2,
61
- function (
62
- beginA: number,
63
- endA: number,
64
- begInnerX: number,
65
- begInnerY: number,
66
- begOuterX: number,
67
- begOuterY: number,
68
- endInnerX: number,
69
- endInnerY: number,
70
- endOuterX: number,
71
- endOuterY: number,
72
- r: number
73
- ) {
74
- if (r < 0) r = -r
75
- painter.beginPath()
76
- painter.moveTo(begInnerX, begInnerY)
77
- painter.arc(
78
- // (圆心x,圆心y,半径,开始角度,结束角度,true逆时针/false顺时针)
79
- cx,
80
- cy,
81
- r1,
82
- beginA,
83
- endA,
84
- false
85
- )
86
- // 结尾
87
- if (config.arcEndCap == "round")
88
- painter.arc(
89
- (endInnerX + endOuterX) * 0.5,
90
- (endInnerY + endOuterY) * 0.5,
91
- r,
92
- endA - Math.PI,
93
- endA,
94
- true
95
- )
96
- else if (config.arcEndCap == "-round")
97
- painter.arc(
98
- (endInnerX + endOuterX) * 0.5,
99
- (endInnerY + endOuterY) * 0.5,
100
- r,
101
- endA - Math.PI,
102
- endA,
103
- false
104
- )
105
- else painter.lineTo(endOuterX, endOuterY)
106
-
107
- painter.arc(cx, cy, r2, endA, beginA, true)
108
- // 开头
109
- if (config.arcStartCap == "round")
110
- painter.arc(
111
- (begInnerX + begOuterX) * 0.5,
112
- (begInnerY + begOuterY) * 0.5,
113
- r,
114
- beginA,
115
- beginA - Math.PI,
116
- true
117
- )
118
- else if (config.arcStartCap == "-round")
119
- painter.arc(
120
- (begInnerX + begOuterX) * 0.5,
121
- (begInnerY + begOuterY) * 0.5,
122
- r,
123
- beginA,
124
- beginA - Math.PI,
125
- false
126
- )
127
- else painter.lineTo(begInnerX, begInnerY)
128
- }
129
- )
130
- if (config.arcStartCap == "butt") painter.closePath()
131
- return painter
132
- }
133
-
134
- // 画圆统一设置方法
135
- export const initCircle = function (
136
- painter: CanvasRenderingContext2D,
137
- cx: number,
138
- cy: number,
139
- r: number
140
- ) {
141
- painter.beginPath()
142
- painter.moveTo(cx + r, cy)
143
- painter.arc(cx, cy, r, 0, Math.PI * 2)
144
- return painter
145
- };
146
-
147
- // 画矩形统一设置方法
148
- export const initRect = function (
149
- painter: CanvasRenderingContext2D,
150
- config: CanvasConfigType,
151
- x: number,
152
- y: number,
153
- width: number,
154
- height: number
155
- ) {
156
- painter.beginPath()
157
-
158
- const rectRadius: Array<number> = [];
159
- if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
160
- for (let index = 0; index < 4; index++) {
161
- rectRadius.push(...config.rectRadius)
162
- }
163
- }
164
-
165
- if (rectRadius.length >= 4) {
166
- painter.arc(x + rectRadius[0], y + rectRadius[0], rectRadius[0], Math.PI, Math.PI * 1.5)
167
- painter.arc(x + width - rectRadius[1], y + rectRadius[1], rectRadius[1], 1.5 * Math.PI, 0)
168
- painter.arc(x + width - rectRadius[2], y + height - rectRadius[2], rectRadius[2], 0, Math.PI * 0.5)
169
- painter.arc(x + rectRadius[3], y + height - rectRadius[3], rectRadius[3], 0.5 * Math.PI, Math.PI)
170
- painter.closePath()
171
- } else {
172
- painter.rect(x, y, width, height)
173
- }
174
-
175
- return painter
176
- }
1
+ import type CanvasConfigType from "../../../types/CanvasConfig"
2
+
3
+ import arc from "./arc"
4
+
5
+ // 文字统一设置方法
6
+ export const initText = function (
7
+ painter: CanvasRenderingContext2D,
8
+ config: CanvasConfigType,
9
+ x: number,
10
+ y: number,
11
+ deg: number
12
+ ) {
13
+ painter.beginPath();
14
+ painter.translate(x, y);
15
+ painter.rotate(deg);
16
+ painter.font =
17
+ config.fontStyle +
18
+ " " +
19
+ config.fontWeight +
20
+ " " +
21
+ config.fontSize +
22
+ "px " +
23
+ config.fontFamily;
24
+ return painter
25
+ }
26
+
27
+ // 画弧统一设置方法
28
+ export const initArc = function (
29
+ painter: CanvasRenderingContext2D,
30
+ config: CanvasConfigType,
31
+ cx: number,
32
+ cy: number,
33
+ r1: number,
34
+ r2: number,
35
+ beginDeg: number,
36
+ deg: number
37
+ ) {
38
+ if (r1 > r2) {
39
+ const temp = r1
40
+ r1 = r2
41
+ r2 = temp
42
+ }
43
+
44
+ beginDeg = beginDeg % (Math.PI * 2)
45
+
46
+ // 当|deg|>=2π的时候都认为是一个圆环
47
+ // 为什么不取2π比较,是怕部分浏览器浮点不精确
48
+ if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
49
+ deg = Math.PI * 2
50
+ } else {
51
+ deg = deg % (Math.PI * 2)
52
+ }
53
+
54
+ arc(
55
+ beginDeg,
56
+ deg,
57
+ cx,
58
+ cy,
59
+ r1,
60
+ r2,
61
+ function (
62
+ beginA: number,
63
+ endA: number,
64
+ begInnerX: number,
65
+ begInnerY: number,
66
+ begOuterX: number,
67
+ begOuterY: number,
68
+ endInnerX: number,
69
+ endInnerY: number,
70
+ endOuterX: number,
71
+ endOuterY: number,
72
+ r: number
73
+ ) {
74
+ if (r < 0) r = -r
75
+ painter.beginPath()
76
+ painter.moveTo(begInnerX, begInnerY)
77
+ painter.arc(
78
+ // (圆心x,圆心y,半径,开始角度,结束角度,true逆时针/false顺时针)
79
+ cx,
80
+ cy,
81
+ r1,
82
+ beginA,
83
+ endA,
84
+ false
85
+ )
86
+ // 结尾
87
+ if (config.arcEndCap == "round")
88
+ painter.arc(
89
+ (endInnerX + endOuterX) * 0.5,
90
+ (endInnerY + endOuterY) * 0.5,
91
+ r,
92
+ endA - Math.PI,
93
+ endA,
94
+ true
95
+ )
96
+ else if (config.arcEndCap == "-round")
97
+ painter.arc(
98
+ (endInnerX + endOuterX) * 0.5,
99
+ (endInnerY + endOuterY) * 0.5,
100
+ r,
101
+ endA - Math.PI,
102
+ endA,
103
+ false
104
+ )
105
+ else painter.lineTo(endOuterX, endOuterY)
106
+
107
+ painter.arc(cx, cy, r2, endA, beginA, true)
108
+ // 开头
109
+ if (config.arcStartCap == "round")
110
+ painter.arc(
111
+ (begInnerX + begOuterX) * 0.5,
112
+ (begInnerY + begOuterY) * 0.5,
113
+ r,
114
+ beginA,
115
+ beginA - Math.PI,
116
+ true
117
+ )
118
+ else if (config.arcStartCap == "-round")
119
+ painter.arc(
120
+ (begInnerX + begOuterX) * 0.5,
121
+ (begInnerY + begOuterY) * 0.5,
122
+ r,
123
+ beginA,
124
+ beginA - Math.PI,
125
+ false
126
+ )
127
+ else painter.lineTo(begInnerX, begInnerY)
128
+ }
129
+ )
130
+ if (config.arcStartCap == "butt") painter.closePath()
131
+ return painter
132
+ }
133
+
134
+ // 画圆统一设置方法
135
+ export const initCircle = function (
136
+ painter: CanvasRenderingContext2D,
137
+ cx: number,
138
+ cy: number,
139
+ r: number
140
+ ) {
141
+ painter.beginPath()
142
+ painter.moveTo(cx + r, cy)
143
+ painter.arc(cx, cy, r, 0, Math.PI * 2)
144
+ return painter
145
+ };
146
+
147
+ // 画矩形统一设置方法
148
+ export const initRect = function (
149
+ painter: CanvasRenderingContext2D,
150
+ config: CanvasConfigType,
151
+ x: number,
152
+ y: number,
153
+ width: number,
154
+ height: number
155
+ ) {
156
+ painter.beginPath()
157
+
158
+ const rectRadius: Array<number> = [];
159
+ if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
160
+ for (let index = 0; index < 4; index++) {
161
+ rectRadius.push(...config.rectRadius)
162
+ }
163
+ }
164
+
165
+ if (rectRadius.length >= 4) {
166
+ painter.arc(x + rectRadius[0], y + rectRadius[0], rectRadius[0], Math.PI, Math.PI * 1.5)
167
+ painter.arc(x + width - rectRadius[1], y + rectRadius[1], rectRadius[1], 1.5 * Math.PI, 0)
168
+ painter.arc(x + width - rectRadius[2], y + height - rectRadius[2], rectRadius[2], 0, Math.PI * 0.5)
169
+ painter.arc(x + rectRadius[3], y + height - rectRadius[3], rectRadius[3], 0.5 * Math.PI, Math.PI)
170
+ painter.closePath()
171
+ } else {
172
+ painter.rect(x, y, width, height)
173
+ }
174
+
175
+ return painter
176
+ }
@@ -1,65 +1,65 @@
1
- import type { arcCapType } from '../../../types/painterConfig'
2
-
3
- export default function (type?: string) {
4
-
5
- const special = {
6
- // 文字大小
7
- "fontSize": 16,
8
-
9
- // 字体
10
- "fontFamily": "sans-serif",
11
-
12
- // 字重
13
- "fontWeight": 400,
14
-
15
- // 字类型
16
- "fontStyle": "normal",
17
-
18
- // 圆弧开始端闭合方式("butt"直线闭合、"round"圆帽闭合)
19
- "arcStartCap": <arcCapType>'butt',
20
-
21
- // 圆弧结束端闭合方式,和上一个类似
22
- "arcEndCap": <arcCapType>'butt',
23
-
24
- // 矩形圆角半径
25
- "rectRadius": []
26
- }
27
-
28
- const init = {
29
- // 填充色或图案
30
- "fillStyle": 'black',
31
-
32
- // 轮廓色或图案
33
- "strokeStyle": 'black',
34
-
35
- // 线条宽度(单位px,下同)
36
- "lineWidth": 1,
37
-
38
- // 线的端点类型,("butt"平直边缘、"round"半圆和"square"矩形)
39
- "lineCap": "butt",
40
-
41
- // 线的拐角连接方式,("miter"连接处边缘延长相接、"bevel"对角线斜角和"round"圆)
42
- "lineJoin": "miter",
43
-
44
- // 设置线条虚线,应该是一个数组[number,...]
45
- "lineDash": [],
46
-
47
- // 文字水平对齐方式("left"左对齐、"center"居中和"right"右对齐)
48
- "textAlign": 'left',
49
-
50
- // 文字垂直对齐方式("middle"垂直居中、"top"上对齐和"bottom"下对齐)
51
- "textBaseline": 'middle',
52
-
53
- // 阴影的模糊系数,默认0,也就是无阴影
54
- "shadowBlur": 0,
55
-
56
- // 阴影的颜色
57
- "shadowColor": "black"
58
- }
59
-
60
- if (type == 'special') return special
61
- else if (type == 'init') return init
62
- else return {
63
- ...special, ...init
64
- }
1
+ import type { arcCapType } from '../../../types/painterConfig'
2
+
3
+ export default function (type?: string) {
4
+
5
+ const special = {
6
+ // 文字大小
7
+ "fontSize": 16,
8
+
9
+ // 字体
10
+ "fontFamily": "sans-serif",
11
+
12
+ // 字重
13
+ "fontWeight": 400,
14
+
15
+ // 字类型
16
+ "fontStyle": "normal",
17
+
18
+ // 圆弧开始端闭合方式("butt"直线闭合、"round"圆帽闭合)
19
+ "arcStartCap": <arcCapType>'butt',
20
+
21
+ // 圆弧结束端闭合方式,和上一个类似
22
+ "arcEndCap": <arcCapType>'butt',
23
+
24
+ // 矩形圆角半径
25
+ "rectRadius": []
26
+ }
27
+
28
+ const init = {
29
+ // 填充色或图案
30
+ "fillStyle": 'black',
31
+
32
+ // 轮廓色或图案
33
+ "strokeStyle": 'black',
34
+
35
+ // 线条宽度(单位px,下同)
36
+ "lineWidth": 1,
37
+
38
+ // 线的端点类型,("butt"平直边缘、"round"半圆和"square"矩形)
39
+ "lineCap": "butt",
40
+
41
+ // 线的拐角连接方式,("miter"连接处边缘延长相接、"bevel"对角线斜角和"round"圆)
42
+ "lineJoin": "miter",
43
+
44
+ // 设置线条虚线,应该是一个数组[number,...]
45
+ "lineDash": [],
46
+
47
+ // 文字水平对齐方式("left"左对齐、"center"居中和"right"右对齐)
48
+ "textAlign": 'left',
49
+
50
+ // 文字垂直对齐方式("middle"垂直居中、"top"上对齐和"bottom"下对齐)
51
+ "textBaseline": 'middle',
52
+
53
+ // 阴影的模糊系数,默认0,也就是无阴影
54
+ "shadowBlur": 0,
55
+
56
+ // 阴影的颜色
57
+ "shadowColor": "black"
58
+ }
59
+
60
+ if (type == 'special') return special
61
+ else if (type == 'init') return init
62
+ else return {
63
+ ...special, ...init
64
+ }
65
65
  }