vislite 0.3.0 → 0.3.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 (129) hide show
  1. package/AUTHORS.txt +6 -6
  2. package/CHANGELOG +7 -1
  3. package/LICENSE +20 -20
  4. package/README.md +53 -53
  5. package/lib/Buffer/index.umd.js +2 -2
  6. package/lib/Buffer/index.umd.min.js +2 -2
  7. package/lib/Canvas/index.umd.js +11 -6
  8. package/lib/Canvas/index.umd.min.js +3 -3
  9. package/lib/Cardinal/index.umd.js +2 -2
  10. package/lib/Cardinal/index.umd.min.js +2 -2
  11. package/lib/Eoap/index.umd.js +2 -2
  12. package/lib/Eoap/index.umd.min.js +2 -2
  13. package/lib/Hermite/index.umd.js +2 -2
  14. package/lib/Hermite/index.umd.min.js +2 -2
  15. package/lib/Matrix4/index.umd.js +2 -2
  16. package/lib/Matrix4/index.umd.min.js +2 -2
  17. package/lib/Mercator/index.umd.js +2 -2
  18. package/lib/Mercator/index.umd.min.js +2 -2
  19. package/lib/OralCanvas/index.es.js +11 -6
  20. package/lib/OralCanvas/index.es.min.js +3 -3
  21. package/lib/OralWebGL/index.es.js +10 -5
  22. package/lib/OralWebGL/index.es.min.js +3 -3
  23. package/lib/SVG/index.umd.js +9 -4
  24. package/lib/SVG/index.umd.min.js +3 -3
  25. package/lib/Shader/index.umd.js +2 -2
  26. package/lib/Shader/index.umd.min.js +2 -2
  27. package/lib/Texture/index.umd.js +2 -2
  28. package/lib/Texture/index.umd.min.js +2 -2
  29. package/lib/WebGL/index.umd.js +10 -5
  30. package/lib/WebGL/index.umd.min.js +3 -3
  31. package/lib/animation/index.umd.js +2 -2
  32. package/lib/animation/index.umd.min.js +2 -2
  33. package/lib/getLoopColors/index.umd.js +2 -2
  34. package/lib/getLoopColors/index.umd.min.js +2 -2
  35. package/lib/getWebGLContext/index.umd.js +2 -2
  36. package/lib/getWebGLContext/index.umd.min.js +2 -2
  37. package/lib/index.umd.js +11 -6
  38. package/lib/index.umd.min.js +3 -3
  39. package/lib/rotate/index.umd.js +2 -2
  40. package/lib/rotate/index.umd.min.js +2 -2
  41. package/lib/ruler/index.umd.js +2 -2
  42. package/lib/ruler/index.umd.min.js +2 -2
  43. package/lib/viewHandler/index.umd.js +2 -2
  44. package/lib/viewHandler/index.umd.min.js +2 -2
  45. package/miniprogram/ui-canvas/index.js +99 -99
  46. package/miniprogram/ui-canvas/index.json +4 -4
  47. package/miniprogram/ui-canvas/index.wxml +4 -4
  48. package/miniprogram/ui-canvas/index.wxss +5 -5
  49. package/package/Buffer/index.ts +1 -1
  50. package/package/Canvas/index.ts +1 -1
  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/Matrix4/index.ts +2 -2
  55. package/package/Mercator/index.ts +2 -2
  56. package/package/OralCanvas/index.ts +1 -1
  57. package/package/OralWebGL/index.ts +1 -1
  58. package/package/SVG/index.ts +2 -2
  59. package/package/Shader/index.ts +1 -1
  60. package/package/Texture/index.ts +1 -1
  61. package/package/WebGL/index.ts +1 -1
  62. package/package/animation/index.ts +2 -2
  63. package/package/getLoopColors/index.ts +2 -2
  64. package/package/getWebGLContext/index.ts +39 -39
  65. package/package/index.ts +56 -56
  66. package/package/rotate/index.ts +2 -2
  67. package/package/ruler/index.ts +2 -2
  68. package/package/viewHandler/index.ts +2 -2
  69. package/package.json +1 -1
  70. package/src/Canvas.ts +56 -56
  71. package/src/Eoap.ts +66 -66
  72. package/src/Matrix4/index.ts +76 -76
  73. package/src/Matrix4/move.ts +12 -12
  74. package/src/Matrix4/rotate.ts +15 -15
  75. package/src/Matrix4/scale.ts +11 -11
  76. package/src/Matrix4/transform.ts +64 -64
  77. package/src/Mercator.ts +26 -26
  78. package/src/SVG.ts +23 -23
  79. package/src/WebGL.ts +52 -52
  80. package/src/animation.ts +99 -99
  81. package/src/common/assemble.ts +1 -1
  82. package/src/common/canvas/arc.ts +50 -50
  83. package/src/common/canvas/config.ts +157 -157
  84. package/src/common/canvas/gradient.ts +29 -29
  85. package/src/common/canvas/index.ts +10 -7
  86. package/src/common/canvas/painter.ts +355 -355
  87. package/src/common/canvas/texts.ts +18 -18
  88. package/src/common/setStyle.ts +5 -5
  89. package/src/common/svg/config.ts +173 -173
  90. package/src/common/svg/index.ts +334 -334
  91. package/src/common/svg/tool.ts +43 -43
  92. package/src/common/webgl/buffer.ts +79 -79
  93. package/src/common/webgl/doDraw.ts +106 -106
  94. package/src/common/webgl/getColorFactory.ts +26 -26
  95. package/src/common/webgl/getShader.ts +75 -75
  96. package/src/common/webgl/getTexture.ts +11 -11
  97. package/src/common/webgl/getWebGLContext.ts +27 -27
  98. package/src/common/webgl/index.ts +216 -216
  99. package/src/common/webgl/shader.ts +75 -75
  100. package/src/common/webgl/texture.ts +99 -99
  101. package/src/getLoopColors.ts +42 -42
  102. package/src/interpolation/Cardinal.ts +109 -109
  103. package/src/interpolation/Hermite.ts +65 -65
  104. package/src/rotate.ts +7 -7
  105. package/src/ruler.ts +99 -99
  106. package/src/viewHandler.ts +139 -139
  107. package/types/Buffer.d.ts +23 -23
  108. package/types/Canvas.d.ts +282 -282
  109. package/types/CanvasConfig.d.ts +80 -80
  110. package/types/Cardinal.d.ts +13 -13
  111. package/types/Gradient.d.ts +14 -14
  112. package/types/Hermite.d.ts +18 -18
  113. package/types/Map.d.ts +9 -9
  114. package/types/Matrix4.d.ts +42 -42
  115. package/types/Object3D.d.ts +113 -113
  116. package/types/SVG.d.ts +210 -210
  117. package/types/SVGConfig.d.ts +58 -58
  118. package/types/Scene3D.d.ts +6 -6
  119. package/types/Shader.d.ts +15 -15
  120. package/types/Texture.d.ts +16 -16
  121. package/types/WebGL.d.ts +38 -38
  122. package/types/animation.d.ts +6 -6
  123. package/types/getLoopColors.d.ts +2 -2
  124. package/types/getWebGLContext.d.ts +2 -2
  125. package/types/index.d.ts +129 -129
  126. package/types/rotate.d.ts +2 -2
  127. package/types/ruler.d.ts +2 -2
  128. package/types/viewHandler.d.ts +12 -12
  129. package/uni-app/ui-canvas.vue +212 -212
@@ -1,76 +1,76 @@
1
- // 着色器分为两类:顶点着色器 + 片段着色器
2
- // 前者用于定义一个点的特性,比如位置,大小,颜色等
3
- // 后者用于针对每个片段(可以理解为像素)进行处理
4
-
5
- // 着色器采用的语言是:GLSL ES语言
6
-
7
- // 把着色器字符串加载成着色器对象
8
- let loadShader = (painter: WebGLRenderingContext, type: number, source: string) => {
9
-
10
- // 创建着色器对象
11
- let shader = painter.createShader(type)
12
- if (shader == null) throw new Error('Unable to create shader!')
13
-
14
- // 绑定资源
15
- painter.shaderSource(shader, source)
16
-
17
- // 编译着色器
18
- painter.compileShader(shader)
19
-
20
- // 检测着色器编译是否成功
21
- if (!painter.getShaderParameter(shader, painter.COMPILE_STATUS))
22
- throw new Error('Failed to compile shader:' + painter.getShaderInfoLog(shader))
23
-
24
- return shader
25
- }
26
-
27
- // 建立着色器
28
- let useShader = (painter: WebGLRenderingContext, vshaderSource: string, fshaderSource: string) => {
29
-
30
- // 分别加载顶点着色器对象和片段着色器对象
31
- let vertexShader = loadShader(painter, painter.VERTEX_SHADER, vshaderSource)
32
- let fragmentShader = loadShader(painter, painter.FRAGMENT_SHADER, fshaderSource)
33
-
34
- // 创建一个着色器程序
35
- let glProgram = painter.createProgram()
36
-
37
- // 把前面创建的两个着色器对象添加到着色器程序中
38
- painter.attachShader(glProgram, vertexShader)
39
- painter.attachShader(glProgram, fragmentShader)
40
-
41
- // 把着色器程序链接成一个完整的程序
42
- painter.linkProgram(glProgram)
43
-
44
- // 检测着色器程序链接是否成功
45
- if (!painter.getProgramParameter(glProgram, painter.LINK_STATUS))
46
- throw new Error('Failed to link program: ' + painter.getProgramInfoLog(glProgram))
47
-
48
- return glProgram
49
- }
50
-
51
- class ShaderObject {
52
-
53
- private __painter: WebGLRenderingContext
54
-
55
- program: WebGLProgram
56
-
57
- constructor(painter: WebGLRenderingContext) {
58
- this.__painter = painter
59
- }
60
-
61
- // 使用这个程序
62
- // (后于编译)
63
- use() {
64
- this.__painter.useProgram(this.program)
65
- return this
66
- }
67
-
68
- // 编译着色器程序
69
- compile(vshaderSource: string, fshaderSource: string) {
70
- this.program = useShader(this.__painter, vshaderSource, fshaderSource)
71
- return this
72
- }
73
-
74
- }
75
-
1
+ // 着色器分为两类:顶点着色器 + 片段着色器
2
+ // 前者用于定义一个点的特性,比如位置,大小,颜色等
3
+ // 后者用于针对每个片段(可以理解为像素)进行处理
4
+
5
+ // 着色器采用的语言是:GLSL ES语言
6
+
7
+ // 把着色器字符串加载成着色器对象
8
+ let loadShader = (painter: WebGLRenderingContext, type: number, source: string) => {
9
+
10
+ // 创建着色器对象
11
+ let shader = painter.createShader(type)
12
+ if (shader == null) throw new Error('Unable to create shader!')
13
+
14
+ // 绑定资源
15
+ painter.shaderSource(shader, source)
16
+
17
+ // 编译着色器
18
+ painter.compileShader(shader)
19
+
20
+ // 检测着色器编译是否成功
21
+ if (!painter.getShaderParameter(shader, painter.COMPILE_STATUS))
22
+ throw new Error('Failed to compile shader:' + painter.getShaderInfoLog(shader))
23
+
24
+ return shader
25
+ }
26
+
27
+ // 建立着色器
28
+ let useShader = (painter: WebGLRenderingContext, vshaderSource: string, fshaderSource: string) => {
29
+
30
+ // 分别加载顶点着色器对象和片段着色器对象
31
+ let vertexShader = loadShader(painter, painter.VERTEX_SHADER, vshaderSource)
32
+ let fragmentShader = loadShader(painter, painter.FRAGMENT_SHADER, fshaderSource)
33
+
34
+ // 创建一个着色器程序
35
+ let glProgram = painter.createProgram()
36
+
37
+ // 把前面创建的两个着色器对象添加到着色器程序中
38
+ painter.attachShader(glProgram, vertexShader)
39
+ painter.attachShader(glProgram, fragmentShader)
40
+
41
+ // 把着色器程序链接成一个完整的程序
42
+ painter.linkProgram(glProgram)
43
+
44
+ // 检测着色器程序链接是否成功
45
+ if (!painter.getProgramParameter(glProgram, painter.LINK_STATUS))
46
+ throw new Error('Failed to link program: ' + painter.getProgramInfoLog(glProgram))
47
+
48
+ return glProgram
49
+ }
50
+
51
+ class ShaderObject {
52
+
53
+ private __painter: WebGLRenderingContext
54
+
55
+ program: WebGLProgram
56
+
57
+ constructor(painter: WebGLRenderingContext) {
58
+ this.__painter = painter
59
+ }
60
+
61
+ // 使用这个程序
62
+ // (后于编译)
63
+ use() {
64
+ this.__painter.useProgram(this.program)
65
+ return this
66
+ }
67
+
68
+ // 编译着色器程序
69
+ compile(vshaderSource: string, fshaderSource: string) {
70
+ this.program = useShader(this.__painter, vshaderSource, fshaderSource)
71
+ return this
72
+ }
73
+
74
+ }
75
+
76
76
  export default ShaderObject
@@ -1,100 +1,100 @@
1
- // 初始化一个纹理对象
2
- // type = gl.TEXTURE_2D 二维纹理
3
- // type = gl.TEXTURE_CUBE_MAP 立方体纹理
4
- // unit表示开启的纹理单元编号
5
- let initTexture = (painter: WebGLRenderingContext, type: number, unit: number) => {
6
-
7
- // 创建纹理对象
8
- let texture = painter.createTexture()
9
-
10
- if (type == painter.TEXTURE_2D) {
11
-
12
- // 开启纹理单元,unit表示开启的编号
13
- painter.activeTexture(painter['TEXTURE' + unit])
14
- }
15
-
16
- // 绑定纹理对象到目标上
17
- painter.bindTexture(type, texture)
18
-
19
- return texture
20
- }
21
-
22
- // 链接资源图片
23
- // level默认传入0即可,和金字塔纹理有关
24
- // format表示图像的内部格式:
25
- // gl.RGB(红绿蓝)
26
- // gl.RGBA(红绿蓝透明度)
27
- // gl.ALPHA(0.0,0.0,0.0,透明度)
28
- // gl.LUMINANCE(L、L、L、1L:流明)
29
- // gl.LUMINANCE_ALPHA(L、L、L,透明度)
30
- // textureType表示纹理数据的格式:
31
- // gl.UNSIGNED_BYTE: 表示无符号整形,每一个颜色分量占据1字节
32
- // gl.UNSIGNED_SHORT_5_6_5: 表示RGB,每一个分量分别占据占据5, 6, 5比特
33
- // gl.UNSIGNED_SHORT_4_4_4_4: 表示RGBA,每一个分量分别占据占据4, 4, 4, 4比特
34
- // gl.UNSIGNED_SHORT_5_5_5_1: 表示RGBA,每一个分量分别占据占据5比特,A分量占据1比特
35
- let linkImage = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, image: TexImageSource) => {
36
- painter.texImage2D(type, level, format, format, textureType, image)
37
- }
38
-
39
- let linkCube = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, images: TexImageSource[], width: number, height: number, texture: WebGLTexture) => {
40
-
41
- let types = [
42
- painter.TEXTURE_CUBE_MAP_POSITIVE_X, // 右
43
- painter.TEXTURE_CUBE_MAP_NEGATIVE_X, // 左
44
- painter.TEXTURE_CUBE_MAP_POSITIVE_Y, // 上
45
- painter.TEXTURE_CUBE_MAP_NEGATIVE_Y, // 下
46
- painter.TEXTURE_CUBE_MAP_POSITIVE_Z, // 后
47
- painter.TEXTURE_CUBE_MAP_NEGATIVE_Z // 前
48
- ], target: number
49
-
50
- for (let i = 0; i < types.length; i++) {
51
- if (images[i]) {
52
- target = types[i]
53
- painter.texImage2D(target, level, format, width, height, 0, format, textureType, null)
54
- painter.bindTexture(type, texture)
55
- painter.texImage2D(target, level, format, format, textureType, images[i])
56
- }
57
- }
58
-
59
- painter.generateMipmap(type)
60
- }
61
-
62
- class TextureObject {
63
-
64
- private __painter: WebGLRenderingContext
65
- private __type: number
66
-
67
- private __texture: WebGLTexture
68
-
69
- constructor(painter: WebGLRenderingContext, type: string, unit = 0) {
70
- this.__painter = painter
71
- this.__type = {
72
- "2d": painter.TEXTURE_2D,
73
- "cube": painter.TEXTURE_CUBE_MAP
74
- }[type]
75
-
76
- // 创建纹理
77
- this.__texture = initTexture(painter, this.__type, unit)
78
-
79
- // 配置纹理
80
- painter.texParameteri(this.__type, painter.TEXTURE_MIN_FILTER, painter.NEAREST)
81
- painter.texParameteri(this.__type, painter.TEXTURE_MAG_FILTER, painter.NEAREST)
82
- painter.texParameteri(this.__type, painter.TEXTURE_WRAP_S, painter.CLAMP_TO_EDGE)
83
- painter.texParameteri(this.__type, painter.TEXTURE_WRAP_T, painter.CLAMP_TO_EDGE)
84
- }
85
-
86
- // 链接图片资源(单一)
87
- useImage(image: TexImageSource) {
88
- linkImage(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, image)
89
- return this
90
- }
91
-
92
- // 链接图片资源(多张)
93
- useCube(images: TexImageSource[], width: number, height: number) {
94
- linkCube(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, images, width, height, this.__texture)
95
- return this
96
- }
97
-
98
- }
99
-
1
+ // 初始化一个纹理对象
2
+ // type = gl.TEXTURE_2D 二维纹理
3
+ // type = gl.TEXTURE_CUBE_MAP 立方体纹理
4
+ // unit表示开启的纹理单元编号
5
+ let initTexture = (painter: WebGLRenderingContext, type: number, unit: number) => {
6
+
7
+ // 创建纹理对象
8
+ let texture = painter.createTexture()
9
+
10
+ if (type == painter.TEXTURE_2D) {
11
+
12
+ // 开启纹理单元,unit表示开启的编号
13
+ painter.activeTexture(painter['TEXTURE' + unit])
14
+ }
15
+
16
+ // 绑定纹理对象到目标上
17
+ painter.bindTexture(type, texture)
18
+
19
+ return texture
20
+ }
21
+
22
+ // 链接资源图片
23
+ // level默认传入0即可,和金字塔纹理有关
24
+ // format表示图像的内部格式:
25
+ // gl.RGB(红绿蓝)
26
+ // gl.RGBA(红绿蓝透明度)
27
+ // gl.ALPHA(0.0,0.0,0.0,透明度)
28
+ // gl.LUMINANCE(L、L、L、1L:流明)
29
+ // gl.LUMINANCE_ALPHA(L、L、L,透明度)
30
+ // textureType表示纹理数据的格式:
31
+ // gl.UNSIGNED_BYTE: 表示无符号整形,每一个颜色分量占据1字节
32
+ // gl.UNSIGNED_SHORT_5_6_5: 表示RGB,每一个分量分别占据占据5, 6, 5比特
33
+ // gl.UNSIGNED_SHORT_4_4_4_4: 表示RGBA,每一个分量分别占据占据4, 4, 4, 4比特
34
+ // gl.UNSIGNED_SHORT_5_5_5_1: 表示RGBA,每一个分量分别占据占据5比特,A分量占据1比特
35
+ let linkImage = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, image: TexImageSource) => {
36
+ painter.texImage2D(type, level, format, format, textureType, image)
37
+ }
38
+
39
+ let linkCube = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, images: TexImageSource[], width: number, height: number, texture: WebGLTexture) => {
40
+
41
+ let types = [
42
+ painter.TEXTURE_CUBE_MAP_POSITIVE_X, // 右
43
+ painter.TEXTURE_CUBE_MAP_NEGATIVE_X, // 左
44
+ painter.TEXTURE_CUBE_MAP_POSITIVE_Y, // 上
45
+ painter.TEXTURE_CUBE_MAP_NEGATIVE_Y, // 下
46
+ painter.TEXTURE_CUBE_MAP_POSITIVE_Z, // 后
47
+ painter.TEXTURE_CUBE_MAP_NEGATIVE_Z // 前
48
+ ], target: number
49
+
50
+ for (let i = 0; i < types.length; i++) {
51
+ if (images[i]) {
52
+ target = types[i]
53
+ painter.texImage2D(target, level, format, width, height, 0, format, textureType, null)
54
+ painter.bindTexture(type, texture)
55
+ painter.texImage2D(target, level, format, format, textureType, images[i])
56
+ }
57
+ }
58
+
59
+ painter.generateMipmap(type)
60
+ }
61
+
62
+ class TextureObject {
63
+
64
+ private __painter: WebGLRenderingContext
65
+ private __type: number
66
+
67
+ private __texture: WebGLTexture
68
+
69
+ constructor(painter: WebGLRenderingContext, type: string, unit = 0) {
70
+ this.__painter = painter
71
+ this.__type = {
72
+ "2d": painter.TEXTURE_2D,
73
+ "cube": painter.TEXTURE_CUBE_MAP
74
+ }[type]
75
+
76
+ // 创建纹理
77
+ this.__texture = initTexture(painter, this.__type, unit)
78
+
79
+ // 配置纹理
80
+ painter.texParameteri(this.__type, painter.TEXTURE_MIN_FILTER, painter.NEAREST)
81
+ painter.texParameteri(this.__type, painter.TEXTURE_MAG_FILTER, painter.NEAREST)
82
+ painter.texParameteri(this.__type, painter.TEXTURE_WRAP_S, painter.CLAMP_TO_EDGE)
83
+ painter.texParameteri(this.__type, painter.TEXTURE_WRAP_T, painter.CLAMP_TO_EDGE)
84
+ }
85
+
86
+ // 链接图片资源(单一)
87
+ useImage(image: TexImageSource) {
88
+ linkImage(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, image)
89
+ return this
90
+ }
91
+
92
+ // 链接图片资源(多张)
93
+ useCube(images: TexImageSource[], width: number, height: number) {
94
+ linkCube(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, images, width, height, this.__texture)
95
+ return this
96
+ }
97
+
98
+ }
99
+
100
100
  export default TextureObject
@@ -1,42 +1,42 @@
1
- // 获取一组循环色彩
2
- export default function (num: number, alpha: number = 1) {
3
- // 颜色集合
4
- let colorList = [
5
- 'rgba(84,112,198,' + alpha + ")", 'rgba(145,204,117,' + alpha + ")",
6
- 'rgba(250,200,88,' + alpha + ")", 'rgba(238,102,102,' + alpha + ")",
7
- 'rgba(115,192,222,' + alpha + ")", 'rgba(59,162,114,' + alpha + ")",
8
- 'rgba(252,132,82,' + alpha + ")", 'rgba(154,96,180,' + alpha + ")",
9
- 'rgba(234,124,204,' + alpha + ")"
10
- ]
11
-
12
- let colors: string[] = []
13
-
14
- // 根据情况返回颜色数组
15
- if (num <= colorList.length) {
16
- // 这种情况就不需要任何处理
17
- return colorList
18
- } else {
19
- // 如果正好是集合长度的倍数
20
- if (num % colorList.length == 0) {
21
- // 将颜色数组循环加入后再返回
22
- for (let i = 0; i < (num / colorList.length); i++) {
23
- colors = colors.concat(colorList)
24
- }
25
- } else {
26
- for (let j = 1; j < (num / colorList.length); j++) {
27
- colors = colors.concat(colorList)
28
- }
29
- // 防止最后一个颜色和第一个颜色重复
30
- if (num % colorList.length == 1) {
31
- colors = colors.concat(colorList[4])
32
- } else {
33
- for (let k = 0; k < num % colorList.length; k++) {
34
- colors = colors.concat(colorList[k])
35
- }
36
- }
37
- }
38
- }
39
-
40
- // 返回结果
41
- return colors
42
- }
1
+ // 获取一组循环色彩
2
+ export default function (num: number, alpha: number = 1) {
3
+ // 颜色集合
4
+ let colorList = [
5
+ 'rgba(84,112,198,' + alpha + ")", 'rgba(145,204,117,' + alpha + ")",
6
+ 'rgba(250,200,88,' + alpha + ")", 'rgba(238,102,102,' + alpha + ")",
7
+ 'rgba(115,192,222,' + alpha + ")", 'rgba(59,162,114,' + alpha + ")",
8
+ 'rgba(252,132,82,' + alpha + ")", 'rgba(154,96,180,' + alpha + ")",
9
+ 'rgba(234,124,204,' + alpha + ")"
10
+ ]
11
+
12
+ let colors: string[] = []
13
+
14
+ // 根据情况返回颜色数组
15
+ if (num <= colorList.length) {
16
+ // 这种情况就不需要任何处理
17
+ return colorList
18
+ } else {
19
+ // 如果正好是集合长度的倍数
20
+ if (num % colorList.length == 0) {
21
+ // 将颜色数组循环加入后再返回
22
+ for (let i = 0; i < (num / colorList.length); i++) {
23
+ colors = colors.concat(colorList)
24
+ }
25
+ } else {
26
+ for (let j = 1; j < (num / colorList.length); j++) {
27
+ colors = colors.concat(colorList)
28
+ }
29
+ // 防止最后一个颜色和第一个颜色重复
30
+ if (num % colorList.length == 1) {
31
+ colors = colors.concat(colorList[4])
32
+ } else {
33
+ for (let k = 0; k < num % colorList.length; k++) {
34
+ colors = colors.concat(colorList[k])
35
+ }
36
+ }
37
+ }
38
+ }
39
+
40
+ // 返回结果
41
+ return colors
42
+ }
@@ -1,110 +1,110 @@
1
- /**
2
- * Cardinal三次插值
3
- * ----------------------------
4
- * Hermite拟合的计算是,确定两个点和两个点的斜率
5
- * 用一个y=ax(3)+bx(2)+cx+d的三次多项式来求解
6
- * 而Cardinal是建立在此基础上
7
- * 给定需要拟合的两个点和第一个点的前一个点+最后一个点的后一个点
8
- * 第一个点的斜率由第一个点的前一个点和第二个点的斜率确定
9
- * 第二个点的斜率由第一个点和第二个点的后一个点的斜率确定
10
- */
11
-
12
- import CardinalType from '../../types/Cardinal'
13
- import Hermite from './Hermite'
14
-
15
- class Cardinal implements CardinalType {
16
- readonly name: string = 'Cardinal'
17
-
18
- // 该参数用于调整曲线走势,默认数值t=0,分水岭t=-1,|t-(-1)|的值越大,曲线走势调整的越严重
19
- private __t: number
20
-
21
- private __HS: {
22
- x: number[],
23
- h: Hermite[]
24
- }
25
- private __i: number
26
-
27
- constructor(t: number = 0) {
28
- this.__t = t
29
- }
30
-
31
- // 设置点的位置
32
- // 参数格式:[[x1, y1], [x2, y2], ... ]
33
- // 至少两个点
34
- setP(points: number[][]) {
35
-
36
- this.__HS = {
37
- "x": [],
38
- "h": []
39
- };
40
- var flag: number,
41
- slope = (points[1][1] - points[0][1]) / (points[1][0] - points[0][0]),
42
- temp: number
43
- this.__HS.x[0] = points[0][0]
44
- for (flag = 1; flag < points.length; flag++) {
45
- if (points[flag][0] <= points[flag - 1][0]) throw new Error('The point position should be increamented!')
46
- this.__HS.x[flag] = points[flag][0]
47
-
48
- // 求点斜率
49
-
50
- // temp = flag < points.length - 1 ?
51
- // (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0]) :
52
- // (points[flag][1] - points[flag - 1][1]) / (points[flag][0] - points[flag - 1][0])
53
-
54
- // 修复超过界限的值问题
55
- // 2023年6月25日 于南京
56
- if (flag < points.length - 1) {
57
- if (
58
- (points[flag + 1][1] > points[flag][1] && points[flag - 1][1] > points[flag][1]) ||
59
- (points[flag + 1][1] < points[flag][1] && points[flag - 1][1] < points[flag][1]) ||
60
- points[flag + 1][1] == points[flag][1] ||
61
- points[flag - 1][1] == points[flag][1]
62
- ) {
63
- temp = 0
64
- } else {
65
- temp = (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0])
66
- }
67
- } else {
68
- temp = (points[flag][1] - points[flag - 1][1]) / (points[flag][0] - points[flag - 1][0])
69
- }
70
-
71
- // 求解两个点直接的插值方程
72
- // 第一个点的前一个点直接取第一个点
73
- // 最后一个点的后一个点直接取最后一个点
74
- this.__HS.h[flag - 1] = new Hermite((1 - this.__t) * 0.5).setP(points[flag - 1][0], points[flag - 1][1], points[flag][0], points[flag][1], slope, temp)
75
- slope = temp
76
- }
77
- return this
78
-
79
- }
80
-
81
- // 根据x值返回y值
82
- use(x: number) {
83
- if (this.__HS) {
84
- this.__i = -1
85
-
86
- // 寻找记录x所在位置的区间
87
- // 这里就是寻找对应的拟合函数
88
- while (this.__i + 1 < this.__HS.x.length && (x > this.__HS.x[this.__i + 1] || (this.__i == -1 && x >= this.__HS.x[this.__i + 1]))) {
89
- this.__i += 1
90
- }
91
-
92
- // 由于js浮点运算不准确,我们对于越界的情况进行兼容
93
-
94
- if (this.__i < 0) {
95
- return this.__HS.h[0].use(this.__HS.x[0])
96
- }
97
-
98
- else if (this.__i >= this.__HS.h.length) {
99
- return this.__HS.h[this.__HS.h.length - 1].use(this.__HS.x[this.__HS.x.length - 1])
100
- }
101
-
102
- return this.__HS.h[this.__i].use(x)
103
- } else {
104
- throw new Error('You shoud first set the position!')
105
- }
106
- }
107
-
108
- }
109
-
1
+ /**
2
+ * Cardinal三次插值
3
+ * ----------------------------
4
+ * Hermite拟合的计算是,确定两个点和两个点的斜率
5
+ * 用一个y=ax(3)+bx(2)+cx+d的三次多项式来求解
6
+ * 而Cardinal是建立在此基础上
7
+ * 给定需要拟合的两个点和第一个点的前一个点+最后一个点的后一个点
8
+ * 第一个点的斜率由第一个点的前一个点和第二个点的斜率确定
9
+ * 第二个点的斜率由第一个点和第二个点的后一个点的斜率确定
10
+ */
11
+
12
+ import CardinalType from '../../types/Cardinal'
13
+ import Hermite from './Hermite'
14
+
15
+ class Cardinal implements CardinalType {
16
+ readonly name: string = 'Cardinal'
17
+
18
+ // 该参数用于调整曲线走势,默认数值t=0,分水岭t=-1,|t-(-1)|的值越大,曲线走势调整的越严重
19
+ private __t: number
20
+
21
+ private __HS: {
22
+ x: number[],
23
+ h: Hermite[]
24
+ }
25
+ private __i: number
26
+
27
+ constructor(t: number = 0) {
28
+ this.__t = t
29
+ }
30
+
31
+ // 设置点的位置
32
+ // 参数格式:[[x1, y1], [x2, y2], ... ]
33
+ // 至少两个点
34
+ setP(points: number[][]) {
35
+
36
+ this.__HS = {
37
+ "x": [],
38
+ "h": []
39
+ };
40
+ var flag: number,
41
+ slope = (points[1][1] - points[0][1]) / (points[1][0] - points[0][0]),
42
+ temp: number
43
+ this.__HS.x[0] = points[0][0]
44
+ for (flag = 1; flag < points.length; flag++) {
45
+ if (points[flag][0] <= points[flag - 1][0]) throw new Error('The point position should be increamented!')
46
+ this.__HS.x[flag] = points[flag][0]
47
+
48
+ // 求点斜率
49
+
50
+ // temp = flag < points.length - 1 ?
51
+ // (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0]) :
52
+ // (points[flag][1] - points[flag - 1][1]) / (points[flag][0] - points[flag - 1][0])
53
+
54
+ // 修复超过界限的值问题
55
+ // 2023年6月25日 于南京
56
+ if (flag < points.length - 1) {
57
+ if (
58
+ (points[flag + 1][1] > points[flag][1] && points[flag - 1][1] > points[flag][1]) ||
59
+ (points[flag + 1][1] < points[flag][1] && points[flag - 1][1] < points[flag][1]) ||
60
+ points[flag + 1][1] == points[flag][1] ||
61
+ points[flag - 1][1] == points[flag][1]
62
+ ) {
63
+ temp = 0
64
+ } else {
65
+ temp = (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0])
66
+ }
67
+ } else {
68
+ temp = (points[flag][1] - points[flag - 1][1]) / (points[flag][0] - points[flag - 1][0])
69
+ }
70
+
71
+ // 求解两个点直接的插值方程
72
+ // 第一个点的前一个点直接取第一个点
73
+ // 最后一个点的后一个点直接取最后一个点
74
+ this.__HS.h[flag - 1] = new Hermite((1 - this.__t) * 0.5).setP(points[flag - 1][0], points[flag - 1][1], points[flag][0], points[flag][1], slope, temp)
75
+ slope = temp
76
+ }
77
+ return this
78
+
79
+ }
80
+
81
+ // 根据x值返回y值
82
+ use(x: number) {
83
+ if (this.__HS) {
84
+ this.__i = -1
85
+
86
+ // 寻找记录x所在位置的区间
87
+ // 这里就是寻找对应的拟合函数
88
+ while (this.__i + 1 < this.__HS.x.length && (x > this.__HS.x[this.__i + 1] || (this.__i == -1 && x >= this.__HS.x[this.__i + 1]))) {
89
+ this.__i += 1
90
+ }
91
+
92
+ // 由于js浮点运算不准确,我们对于越界的情况进行兼容
93
+
94
+ if (this.__i < 0) {
95
+ return this.__HS.h[0].use(this.__HS.x[0])
96
+ }
97
+
98
+ else if (this.__i >= this.__HS.h.length) {
99
+ return this.__HS.h[this.__HS.h.length - 1].use(this.__HS.x[this.__HS.x.length - 1])
100
+ }
101
+
102
+ return this.__HS.h[this.__i].use(x)
103
+ } else {
104
+ throw new Error('You shoud first set the position!')
105
+ }
106
+ }
107
+
108
+ }
109
+
110
110
  export default Cardinal