vislite 1.4.0 → 1.5.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 (159) hide show
  1. package/AUTHORS.txt +6 -6
  2. package/CHANGELOG +10 -0
  3. package/LICENSE +20 -20
  4. package/README.md +284 -284
  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 +6 -5
  10. package/lib/Canvas/index.es.min.js +2 -2
  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 +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 +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 +6 -5
  44. package/lib/index.umd.min.js +4 -4
  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 -117
  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/Buffer/index.ts +2 -2
  71. package/package/Canvas/index.ts +2 -2
  72. package/package/Cardinal/index.ts +2 -2
  73. package/package/Eoap/index.ts +2 -2
  74. package/package/Hermite/index.ts +2 -2
  75. package/package/MapCoordinate/index.ts +2 -2
  76. package/package/Matrix4/index.ts +2 -2
  77. package/package/Mercator/index.ts +2 -2
  78. package/package/RawCanvas/index.ts +2 -2
  79. package/package/SVG/index.ts +2 -2
  80. package/package/Shader/index.ts +2 -2
  81. package/package/Texture/index.ts +2 -2
  82. package/package/TreeLayout/index.ts +2 -2
  83. package/package/assemble/index.ts +2 -2
  84. package/package/getLoopColors/index.ts +2 -2
  85. package/package/getWebGLContext/index.ts +40 -40
  86. package/package/initOption/index.ts +2 -2
  87. package/package/mergeOption/index.ts +2 -2
  88. package/package/move/index.ts +2 -2
  89. package/package/rotate/index.ts +2 -2
  90. package/package/ruler/index.ts +2 -2
  91. package/package/scale/index.ts +2 -2
  92. package/package.json +1 -1
  93. package/src/Canvas.ts +89 -84
  94. package/src/Eoap.ts +66 -66
  95. package/src/Matrix4/index.ts +84 -84
  96. package/src/Matrix4/move.ts +12 -12
  97. package/src/Matrix4/rotate.ts +15 -15
  98. package/src/Matrix4/scale.ts +11 -11
  99. package/src/Matrix4/transform.ts +64 -64
  100. package/src/Mercator.ts +27 -27
  101. package/src/common/assemble.ts +22 -22
  102. package/src/common/canvas/arc.ts +51 -51
  103. package/src/common/canvas/config.ts +176 -176
  104. package/src/common/canvas/default.ts +64 -64
  105. package/src/common/canvas/index.ts +188 -188
  106. package/src/common/canvas/painter.ts +443 -443
  107. package/src/common/canvas/texts.ts +18 -18
  108. package/src/common/map/getBoundary.ts +15 -15
  109. package/src/common/map/tool.ts +29 -29
  110. package/src/common/option.ts +29 -29
  111. package/src/common/setStyle.ts +5 -5
  112. package/src/common/svg/config.ts +213 -213
  113. package/src/common/svg/tool.ts +51 -51
  114. package/src/common/tree/index.ts +25 -25
  115. package/src/common/tree/toInnerTree.ts +61 -61
  116. package/src/common/type.ts +26 -26
  117. package/src/common/webgl/buffer.ts +79 -79
  118. package/src/common/webgl/getWebGLContext.ts +45 -45
  119. package/src/common/webgl/shader.ts +75 -75
  120. package/src/coordinate/MapCoordinate.ts +80 -80
  121. package/src/getLoopColors.ts +42 -42
  122. package/src/interpolation/Cardinal.ts +110 -110
  123. package/src/interpolation/Hermite.ts +65 -65
  124. package/src/move.ts +7 -7
  125. package/src/rotate.ts +7 -7
  126. package/src/ruler.ts +209 -209
  127. package/src/scale.ts +6 -6
  128. package/types/Buffer.d.ts +23 -23
  129. package/types/Canvas.d.ts +352 -352
  130. package/types/CanvasConfig.d.ts +88 -88
  131. package/types/CanvasOption.d.ts +13 -8
  132. package/types/CanvasOpts.d.ts +9 -9
  133. package/types/Cardinal.d.ts +13 -13
  134. package/types/Gradient.d.ts +14 -14
  135. package/types/Hermite.d.ts +18 -18
  136. package/types/Map.d.ts +9 -9
  137. package/types/MapConfig.d.ts +27 -27
  138. package/types/MapCoordinate.d.ts +22 -22
  139. package/types/Matrix4.d.ts +47 -47
  140. package/types/SVGConfig.d.ts +71 -71
  141. package/types/Shader.d.ts +16 -16
  142. package/types/Texture.d.ts +16 -16
  143. package/types/Tree.d.ts +74 -74
  144. package/types/TreeConfig.d.ts +36 -36
  145. package/types/TreeLayout.d.ts +59 -59
  146. package/types/TreeOption.d.ts +48 -48
  147. package/types/assemble.d.ts +5 -5
  148. package/types/getLoopColors.d.ts +5 -5
  149. package/types/getWebGLContext.d.ts +7 -7
  150. package/types/move.d.ts +5 -5
  151. package/types/option.d.ts +12 -12
  152. package/types/painterConfig.d.ts +4 -4
  153. package/types/rotate.d.ts +5 -5
  154. package/types/ruler.d.ts +10 -10
  155. package/types/scale.d.ts +5 -5
  156. package/types/ui-canvas.d.ts +4 -4
  157. package/types/uni-canvas.d.ts +3 -3
  158. package/uni-app/drawImage.js +19 -19
  159. package/uni-app/ui-canvas.vue +295 -284
@@ -1,19 +1,19 @@
1
- export default function (painter: CanvasRenderingContext2D, contents: string, width: number, height: number, doback: (content: string, top: number) => void) {
2
-
3
- let lineNumber = 0, content = ""
4
- for (let i = 0; i < contents.length; i++) {
5
- if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
6
- lineNumber += 1
7
- doback(content, (lineNumber - 0.5) * height)
8
-
9
- content = contents[i]
10
- } else if (i == contents.length - 1) {
11
- lineNumber += 1
12
- doback(content + contents[i], (lineNumber - 0.5) * height)
13
- } else {
14
- content += contents[i]
15
- }
16
- }
17
-
18
- return lineNumber * height
1
+ export default function (painter: CanvasRenderingContext2D, contents: string, width: number, height: number, doback: (content: string, top: number) => void) {
2
+
3
+ let lineNumber = 0, content = ""
4
+ for (let i = 0; i < contents.length; i++) {
5
+ if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
6
+ lineNumber += 1
7
+ doback(content, (lineNumber - 0.5) * height)
8
+
9
+ content = contents[i]
10
+ } else if (i == contents.length - 1) {
11
+ lineNumber += 1
12
+ doback(content + contents[i], (lineNumber - 0.5) * height)
13
+ } else {
14
+ content += contents[i]
15
+ }
16
+ }
17
+
18
+ return lineNumber * height
19
19
  }
@@ -1,16 +1,16 @@
1
- import { mllData } from "./tool"
2
-
3
- export default function (...geos: any[]) {
4
- let minLongitude: any = null, maxLongitude: any = null, minLatitude: any = null, maxLatitude: any = null
5
-
6
- for (const geoJson of geos) {
7
- const [_minLongitude, _maxLongitude, _minLatitude, _maxLatitude] = mllData(geoJson)
8
-
9
- if (minLongitude == void 0 || _minLongitude < minLongitude) minLongitude = _minLongitude
10
- if (maxLongitude == void 0 || _maxLongitude > maxLongitude) maxLongitude = _maxLongitude
11
- if (minLatitude == void 0 || _minLatitude < minLatitude) minLatitude = _minLatitude
12
- if (maxLatitude == void 0 || _maxLatitude > maxLatitude) maxLatitude = _maxLatitude
13
- }
14
-
15
- return [minLongitude, maxLongitude, minLatitude, maxLatitude]
1
+ import { mllData } from "./tool"
2
+
3
+ export default function (...geos: any[]) {
4
+ let minLongitude: any = null, maxLongitude: any = null, minLatitude: any = null, maxLatitude: any = null
5
+
6
+ for (const geoJson of geos) {
7
+ const [_minLongitude, _maxLongitude, _minLatitude, _maxLatitude] = mllData(geoJson)
8
+
9
+ if (minLongitude == void 0 || _minLongitude < minLongitude) minLongitude = _minLongitude
10
+ if (maxLongitude == void 0 || _maxLongitude > maxLongitude) maxLongitude = _maxLongitude
11
+ if (minLatitude == void 0 || _minLatitude < minLatitude) minLatitude = _minLatitude
12
+ if (maxLatitude == void 0 || _maxLatitude > maxLatitude) maxLatitude = _maxLatitude
13
+ }
14
+
15
+ return [minLongitude, maxLongitude, minLatitude, maxLatitude]
16
16
  }
@@ -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
+ }