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
@@ -1,30 +1,30 @@
1
- export function mllData(geoJson: any) {
2
- let minLongitude: any = null, maxLongitude: any = null, minLatitude: any = null, maxLatitude: any = null
3
-
4
- const forPolygon = function (coordinates: any) {
5
- for (let j = 0; j < coordinates.length; j++) {
6
- for (let k = 0; k < coordinates[j].length; k++) {
7
- const longitude = coordinates[j][k][0], latitude = coordinates[j][k][1]
8
-
9
- if (minLongitude == void 0 || minLongitude > longitude) minLongitude = longitude
10
- if (maxLongitude == void 0 || maxLongitude < longitude) maxLongitude = longitude
11
-
12
- if (minLatitude == void 0 || minLatitude > latitude) minLatitude = latitude
13
- if (maxLatitude == void 0 || maxLatitude < latitude) maxLatitude = latitude
14
- }
15
- }
16
- };
17
-
18
- const features = geoJson.features
19
- for (let i = 0; i < features.length; i++) {
20
- if (features[i].geometry.type == "Polygon") {
21
- forPolygon(features[i].geometry.coordinates)
22
- } else if (features[i].geometry.type == "MultiPolygon") {
23
- for (let j = 0; j < features[i].geometry.coordinates.length; j++) {
24
- forPolygon(features[i].geometry.coordinates[j])
25
- }
26
- }
27
- }
28
-
29
- return [minLongitude, maxLongitude, minLatitude, maxLatitude]
1
+ export function mllData(geoJson: any) {
2
+ let minLongitude: any = null, maxLongitude: any = null, minLatitude: any = null, maxLatitude: any = null
3
+
4
+ const forPolygon = function (coordinates: any) {
5
+ for (let j = 0; j < coordinates.length; j++) {
6
+ for (let k = 0; k < coordinates[j].length; k++) {
7
+ const longitude = coordinates[j][k][0], latitude = coordinates[j][k][1]
8
+
9
+ if (minLongitude == void 0 || minLongitude > longitude) minLongitude = longitude
10
+ if (maxLongitude == void 0 || maxLongitude < longitude) maxLongitude = longitude
11
+
12
+ if (minLatitude == void 0 || minLatitude > latitude) minLatitude = latitude
13
+ if (maxLatitude == void 0 || maxLatitude < latitude) maxLatitude = latitude
14
+ }
15
+ }
16
+ };
17
+
18
+ const features = geoJson.features
19
+ for (let i = 0; i < features.length; i++) {
20
+ if (features[i].geometry.type == "Polygon") {
21
+ forPolygon(features[i].geometry.coordinates)
22
+ } else if (features[i].geometry.type == "MultiPolygon") {
23
+ for (let j = 0; j < features[i].geometry.coordinates.length; j++) {
24
+ forPolygon(features[i].geometry.coordinates[j])
25
+ }
26
+ }
27
+ }
28
+
29
+ return [minLongitude, maxLongitude, minLatitude, maxLatitude]
30
30
  }
@@ -1,30 +1,30 @@
1
- import { isPlainObject } from "./type"
2
-
3
- // 初始化配置
4
- export function initOption(setOption: any, defaultOption: any) {
5
- for (const key in setOption) {
6
- defaultOption[key] = setOption[key]
7
- }
8
-
9
- return defaultOption
10
- }
11
-
12
- // 合并配置
13
- export function mergeOption(oldOption: any, newOption: any) {
14
- (function doit(oldOption, newOption) {
15
-
16
- for (const key in newOption) {
17
- const value = newOption[key]
18
-
19
- if (isPlainObject(value)) {
20
- if (!oldOption[key]) oldOption[key] = {}
21
-
22
- doit(oldOption[key], newOption[key])
23
- } else {
24
- oldOption[key] = value
25
- }
26
-
27
- }
28
-
29
- })(oldOption, newOption)
1
+ import { isPlainObject } from "./type"
2
+
3
+ // 初始化配置
4
+ export function initOption(setOption: any, defaultOption: any) {
5
+ for (const key in setOption) {
6
+ defaultOption[key] = setOption[key]
7
+ }
8
+
9
+ return defaultOption
10
+ }
11
+
12
+ // 合并配置
13
+ export function mergeOption(oldOption: any, newOption: any) {
14
+ (function doit(oldOption, newOption) {
15
+
16
+ for (const key in newOption) {
17
+ const value = newOption[key]
18
+
19
+ if (isPlainObject(value)) {
20
+ if (!oldOption[key]) oldOption[key] = {}
21
+
22
+ doit(oldOption[key], newOption[key])
23
+ } else {
24
+ oldOption[key] = value
25
+ }
26
+
27
+ }
28
+
29
+ })(oldOption, newOption)
30
30
  }
@@ -1,6 +1,6 @@
1
- // 修改样式
2
- export default function (el: HTMLElement | SVGElement, styles: any) {
3
- for (const key in styles) {
4
- el.style[key as any] = styles[key]
5
- }
1
+ // 修改样式
2
+ export default function (el: HTMLElement | SVGElement, styles: any) {
3
+ for (const key in styles) {
4
+ el.style[key as any] = styles[key]
5
+ }
6
6
  }
@@ -1,213 +1,213 @@
1
- import type SVGConfigType from "../../../types/SVGConfig"
2
-
3
- import { setAttribute } from "./tool"
4
- import setStyle from "../setStyle"
5
- import arc from "../canvas/arc"
6
- import { toNode } from "./tool"
7
-
8
- export const initDefs = (el: SVGElement) => {
9
- const defs = el.getElementsByTagName('defs')
10
- if (defs.length <= 0) {
11
- const newDefs = toNode("defs")
12
- el.appendChild(newDefs)
13
- return newDefs
14
- } else {
15
- return defs[0]
16
- }
17
- }
18
-
19
- // 文字统一设置方法
20
- export const initText = (
21
- el: SVGElement,
22
- config: SVGConfigType,
23
- x: number,
24
- y: number,
25
- deg: number
26
- ) => {
27
- if (el.nodeName.toLowerCase() !== "text") throw new Error("Need a <text> !")
28
-
29
- // 垂直对齐采用dy实现
30
- setAttribute(
31
- el,
32
- "dy",
33
- ({
34
- top: (config["fontSize"] as number) * 0.5,
35
- middle: 0,
36
- bottom: -(config["fontSize"] as number) * 0.5,
37
- } as {
38
- [key: string]: number
39
- })[config.textBaseline as string]
40
- )
41
-
42
- setStyle(el, {
43
- // 文字对齐方式
44
- "text-anchor": ({
45
- left: "start",
46
- right: "end",
47
- center: "middle",
48
- } as {
49
- [key: string]: string
50
- })[config.textAlign as string],
51
- "dominant-baseline": "central",
52
-
53
- // 文字大小和字体设置
54
- "font-size": config["fontSize"] + "px",
55
- "font-family": config["fontFamily"],
56
- })
57
-
58
- // 位置
59
- setAttribute(el, "x", x)
60
- setAttribute(el, "y", y)
61
-
62
- // 旋转
63
- if (typeof deg == "number") {
64
- deg = deg % 360
65
- setAttribute(el, "transform", "rotate(" + deg + "," + x + "," + y + ")")
66
- }
67
- }
68
-
69
- // 画圆统一设置方法
70
- export const initCircle = (el: SVGElement, cx: number, cy: number, r: number) => {
71
- if (el.nodeName.toLowerCase() !== "circle")
72
- throw new Error("Need a <circle> !")
73
- setAttribute(el, "cx", cx)
74
- setAttribute(el, "cy", cy)
75
- setAttribute(el, "r", r)
76
- }
77
-
78
- // 路径统一设置方法
79
- export const initPath = (el: SVGElement, path: string) => {
80
- if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
81
- setAttribute(el, "d", path)
82
- }
83
-
84
- // 画矩形统一设置方法
85
- export const initRect = (
86
- el: SVGElement,
87
- config: SVGConfigType,
88
- x: number,
89
- y: number,
90
- width: number,
91
- height: number
92
- ) => {
93
- if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
94
-
95
- const rectRadius: Array<number> = [];
96
- if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
97
- for (let index = 0; index < 4; index++) {
98
- rectRadius.push(...config.rectRadius)
99
- }
100
- }
101
-
102
- // 由于高和宽不可以是负数,校对一下
103
- if (height < 0) {
104
- height *= -1
105
- y -= height
106
- }
107
- if (width < 0) {
108
- width *= -1
109
- x -= width
110
- }
111
-
112
- let d = ""
113
- if (rectRadius.length >= 4) {
114
- d = "M" + (x + rectRadius[0]) + " " + y
115
- d += "L" + (x + width - rectRadius[1]) + " " + y
116
- d += "A" + rectRadius[1] + " " + rectRadius[1] + " 0 0 1 " + (x + width) + " " + (y + rectRadius[1])
117
- d += "L" + (x + width) + " " + (y + height - rectRadius[2])
118
- d += "A" + rectRadius[2] + " " + rectRadius[2] + " 0 0 1 " + (x + width - rectRadius[2]) + " " + (y + height)
119
- d += "L" + (x + rectRadius[3]) + " " + (y + height)
120
- d += "A" + rectRadius[3] + " " + rectRadius[3] + " 0 0 1 " + x + " " + (y + height - rectRadius[3])
121
- d += "L" + x + " " + (y + rectRadius[0])
122
- d += "A" + rectRadius[0] + " " + rectRadius[0] + " 0 0 1 " + (x + rectRadius[0]) + " " + y
123
- } else {
124
- d = "M" + x + " " + y
125
- d += "L" + (x + width) + " " + y
126
- d += "L" + (x + width) + " " + (y + height)
127
- d += "L" + x + " " + (y + height)
128
- d += "Z"
129
- }
130
- setAttribute(el, "d", d)
131
- }
132
-
133
- // 画弧统一设置方法
134
- export const initArc = (
135
- el: SVGElement,
136
- config: SVGConfigType,
137
- cx: number,
138
- cy: number,
139
- r1: number,
140
- r2: number,
141
- beginDeg: number,
142
- deg: number
143
- ) => {
144
- if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
145
-
146
- beginDeg = (beginDeg / 180) * Math.PI
147
- deg = (deg / 180) * Math.PI
148
-
149
- beginDeg = beginDeg % (Math.PI * 2)
150
-
151
- if (r1 > r2) {
152
- const temp = r1
153
- r1 = r2
154
- r2 = temp
155
- }
156
-
157
- // 当|deg|>=2π的时候都认为是一个圆环
158
- if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
159
- deg = Math.PI * 1.999999
160
- } else {
161
- deg = deg % (Math.PI * 2)
162
- }
163
-
164
- arc(
165
- beginDeg,
166
- deg,
167
- cx,
168
- cy,
169
- r1,
170
- r2,
171
- function (
172
- beginA: number,
173
- endA: number,
174
- begInnerX: number,
175
- begInnerY: number,
176
- begOuterX: number,
177
- begOuterY: number,
178
- endInnerX: number,
179
- endInnerY: number,
180
- endOuterX: number,
181
- endOuterY: number,
182
- r: number
183
- ) {
184
- const f = endA - beginA > Math.PI ? 1 : 0
185
- let d = "M" + begInnerX + " " + begInnerY
186
- if (r < 0) r = -r
187
-
188
- d +=
189
- // 横半径 竖半径 x轴偏移角度 0小弧/1大弧 0逆时针/1顺时针 终点x 终点y
190
- "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY
191
-
192
- // 结尾
193
- if (config.arcEndCap == "round")
194
- d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY
195
- else if (config.arcEndCap == "-round")
196
- d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY
197
- else d += "L" + endOuterX + " " + endOuterY
198
- d +=
199
- "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY
200
-
201
- // 开头
202
- if (config.arcStartCap == "round")
203
- d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY
204
- else if (config.arcStartCap == "-round")
205
- d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY
206
- else d += "L" + begInnerX + " " + begInnerY
207
-
208
- if (config.arcStartCap == "butt") d += "Z"
209
-
210
- setAttribute(el, "d", d)
211
- }
212
- )
213
- }
1
+ import type SVGConfigType from "../../../types/SVGConfig"
2
+
3
+ import { setAttribute } from "./tool"
4
+ import setStyle from "../setStyle"
5
+ import arc from "../canvas/arc"
6
+ import { toNode } from "./tool"
7
+
8
+ export const initDefs = (el: SVGElement) => {
9
+ const defs = el.getElementsByTagName('defs')
10
+ if (defs.length <= 0) {
11
+ const newDefs = toNode("defs")
12
+ el.appendChild(newDefs)
13
+ return newDefs
14
+ } else {
15
+ return defs[0]
16
+ }
17
+ }
18
+
19
+ // 文字统一设置方法
20
+ export const initText = (
21
+ el: SVGElement,
22
+ config: SVGConfigType,
23
+ x: number,
24
+ y: number,
25
+ deg: number
26
+ ) => {
27
+ if (el.nodeName.toLowerCase() !== "text") throw new Error("Need a <text> !")
28
+
29
+ // 垂直对齐采用dy实现
30
+ setAttribute(
31
+ el,
32
+ "dy",
33
+ ({
34
+ top: (config["fontSize"] as number) * 0.5,
35
+ middle: 0,
36
+ bottom: -(config["fontSize"] as number) * 0.5,
37
+ } as {
38
+ [key: string]: number
39
+ })[config.textBaseline as string]
40
+ )
41
+
42
+ setStyle(el, {
43
+ // 文字对齐方式
44
+ "text-anchor": ({
45
+ left: "start",
46
+ right: "end",
47
+ center: "middle",
48
+ } as {
49
+ [key: string]: string
50
+ })[config.textAlign as string],
51
+ "dominant-baseline": "central",
52
+
53
+ // 文字大小和字体设置
54
+ "font-size": config["fontSize"] + "px",
55
+ "font-family": config["fontFamily"],
56
+ })
57
+
58
+ // 位置
59
+ setAttribute(el, "x", x)
60
+ setAttribute(el, "y", y)
61
+
62
+ // 旋转
63
+ if (typeof deg == "number") {
64
+ deg = deg % 360
65
+ setAttribute(el, "transform", "rotate(" + deg + "," + x + "," + y + ")")
66
+ }
67
+ }
68
+
69
+ // 画圆统一设置方法
70
+ export const initCircle = (el: SVGElement, cx: number, cy: number, r: number) => {
71
+ if (el.nodeName.toLowerCase() !== "circle")
72
+ throw new Error("Need a <circle> !")
73
+ setAttribute(el, "cx", cx)
74
+ setAttribute(el, "cy", cy)
75
+ setAttribute(el, "r", r)
76
+ }
77
+
78
+ // 路径统一设置方法
79
+ export const initPath = (el: SVGElement, path: string) => {
80
+ if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
81
+ setAttribute(el, "d", path)
82
+ }
83
+
84
+ // 画矩形统一设置方法
85
+ export const initRect = (
86
+ el: SVGElement,
87
+ config: SVGConfigType,
88
+ x: number,
89
+ y: number,
90
+ width: number,
91
+ height: number
92
+ ) => {
93
+ if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
94
+
95
+ const rectRadius: Array<number> = [];
96
+ if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
97
+ for (let index = 0; index < 4; index++) {
98
+ rectRadius.push(...config.rectRadius)
99
+ }
100
+ }
101
+
102
+ // 由于高和宽不可以是负数,校对一下
103
+ if (height < 0) {
104
+ height *= -1
105
+ y -= height
106
+ }
107
+ if (width < 0) {
108
+ width *= -1
109
+ x -= width
110
+ }
111
+
112
+ let d = ""
113
+ if (rectRadius.length >= 4) {
114
+ d = "M" + (x + rectRadius[0]) + " " + y
115
+ d += "L" + (x + width - rectRadius[1]) + " " + y
116
+ d += "A" + rectRadius[1] + " " + rectRadius[1] + " 0 0 1 " + (x + width) + " " + (y + rectRadius[1])
117
+ d += "L" + (x + width) + " " + (y + height - rectRadius[2])
118
+ d += "A" + rectRadius[2] + " " + rectRadius[2] + " 0 0 1 " + (x + width - rectRadius[2]) + " " + (y + height)
119
+ d += "L" + (x + rectRadius[3]) + " " + (y + height)
120
+ d += "A" + rectRadius[3] + " " + rectRadius[3] + " 0 0 1 " + x + " " + (y + height - rectRadius[3])
121
+ d += "L" + x + " " + (y + rectRadius[0])
122
+ d += "A" + rectRadius[0] + " " + rectRadius[0] + " 0 0 1 " + (x + rectRadius[0]) + " " + y
123
+ } else {
124
+ d = "M" + x + " " + y
125
+ d += "L" + (x + width) + " " + y
126
+ d += "L" + (x + width) + " " + (y + height)
127
+ d += "L" + x + " " + (y + height)
128
+ d += "Z"
129
+ }
130
+ setAttribute(el, "d", d)
131
+ }
132
+
133
+ // 画弧统一设置方法
134
+ export const initArc = (
135
+ el: SVGElement,
136
+ config: SVGConfigType,
137
+ cx: number,
138
+ cy: number,
139
+ r1: number,
140
+ r2: number,
141
+ beginDeg: number,
142
+ deg: number
143
+ ) => {
144
+ if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
145
+
146
+ beginDeg = (beginDeg / 180) * Math.PI
147
+ deg = (deg / 180) * Math.PI
148
+
149
+ beginDeg = beginDeg % (Math.PI * 2)
150
+
151
+ if (r1 > r2) {
152
+ const temp = r1
153
+ r1 = r2
154
+ r2 = temp
155
+ }
156
+
157
+ // 当|deg|>=2π的时候都认为是一个圆环
158
+ if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
159
+ deg = Math.PI * 1.999999
160
+ } else {
161
+ deg = deg % (Math.PI * 2)
162
+ }
163
+
164
+ arc(
165
+ beginDeg,
166
+ deg,
167
+ cx,
168
+ cy,
169
+ r1,
170
+ r2,
171
+ function (
172
+ beginA: number,
173
+ endA: number,
174
+ begInnerX: number,
175
+ begInnerY: number,
176
+ begOuterX: number,
177
+ begOuterY: number,
178
+ endInnerX: number,
179
+ endInnerY: number,
180
+ endOuterX: number,
181
+ endOuterY: number,
182
+ r: number
183
+ ) {
184
+ const f = endA - beginA > Math.PI ? 1 : 0
185
+ let d = "M" + begInnerX + " " + begInnerY
186
+ if (r < 0) r = -r
187
+
188
+ d +=
189
+ // 横半径 竖半径 x轴偏移角度 0小弧/1大弧 0逆时针/1顺时针 终点x 终点y
190
+ "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY
191
+
192
+ // 结尾
193
+ if (config.arcEndCap == "round")
194
+ d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY
195
+ else if (config.arcEndCap == "-round")
196
+ d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY
197
+ else d += "L" + endOuterX + " " + endOuterY
198
+ d +=
199
+ "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY
200
+
201
+ // 开头
202
+ if (config.arcStartCap == "round")
203
+ d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY
204
+ else if (config.arcStartCap == "-round")
205
+ d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY
206
+ else d += "L" + begInnerX + " " + begInnerY
207
+
208
+ if (config.arcStartCap == "butt") d += "Z"
209
+
210
+ setAttribute(el, "d", d)
211
+ }
212
+ )
213
+ }
@@ -1,30 +1,30 @@
1
- import type { arcCapType, textAlignType, textBaselineType, lineCapType, lineJoinType } from "../../../types/painterConfig"
2
-
3
- export default function () {
4
- return {
5
- // 颜色
6
- fillStyle: "rgb(0,0,0)",
7
- strokeStyle: "rgb(0,0,0)",
8
-
9
- // 文字对齐方式
10
- textAlign: <textAlignType>"left",
11
- textBaseline: <textBaselineType>"middle",
12
-
13
- // 文字
14
- "fontSize": 16,
15
- "fontFamily": "sans-serif",
16
-
17
- // arc二端闭合方式['butt':直线闭合,'round':圆帽闭合]
18
- "arcStartCap": <arcCapType>"butt",
19
- "arcEndCap": <arcCapType>"butt",
20
-
21
- // 线条
22
- lineDash: [],
23
- lineWidth: 1,
24
- lineCap: <lineCapType>"butt",
25
- lineJoin: <lineJoinType>"miter",
26
-
27
- // 矩形圆角半径
28
- "rectRadius": []
29
- }
1
+ import type { arcCapType, textAlignType, textBaselineType, lineCapType, lineJoinType } from "../../../types/painterConfig"
2
+
3
+ export default function () {
4
+ return {
5
+ // 颜色
6
+ fillStyle: "rgb(0,0,0)",
7
+ strokeStyle: "rgb(0,0,0)",
8
+
9
+ // 文字对齐方式
10
+ textAlign: <textAlignType>"left",
11
+ textBaseline: <textBaselineType>"middle",
12
+
13
+ // 文字
14
+ "fontSize": 16,
15
+ "fontFamily": "sans-serif",
16
+
17
+ // arc二端闭合方式['butt':直线闭合,'round':圆帽闭合]
18
+ "arcStartCap": <arcCapType>"butt",
19
+ "arcEndCap": <arcCapType>"butt",
20
+
21
+ // 线条
22
+ lineDash: [],
23
+ lineWidth: 1,
24
+ lineCap: <lineCapType>"butt",
25
+ lineJoin: <lineJoinType>"miter",
26
+
27
+ // 矩形圆角半径
28
+ "rectRadius": []
29
+ }
30
30
  }