vislite 1.6.0 → 1.6.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 (176) hide show
  1. package/AUTHORS.txt +6 -6
  2. package/CHANGELOG +8 -1
  3. package/LICENSE +20 -20
  4. package/lib/BarLayout/index.es.js +105 -105
  5. package/lib/BarLayout/index.es.min.js +2 -2
  6. package/lib/Buffer/index.es.js +1 -1
  7. package/lib/Buffer/index.es.min.js +1 -1
  8. package/lib/Canvas/index.es.js +1 -1
  9. package/lib/Canvas/index.es.min.js +1 -1
  10. package/lib/Cardinal/index.es.js +1 -1
  11. package/lib/Cardinal/index.es.min.js +1 -1
  12. package/lib/Eoap/index.es.js +1 -1
  13. package/lib/Eoap/index.es.min.js +1 -1
  14. package/lib/Hermite/index.es.js +1 -1
  15. package/lib/Hermite/index.es.min.js +1 -1
  16. package/lib/MapCoordinate/index.es.js +1 -1
  17. package/lib/MapCoordinate/index.es.min.js +1 -1
  18. package/lib/Matrix4/index.es.js +1 -1
  19. package/lib/Matrix4/index.es.min.js +1 -1
  20. package/lib/Mercator/index.es.js +1 -1
  21. package/lib/Mercator/index.es.min.js +1 -1
  22. package/lib/PieLayout/index.es.js +105 -105
  23. package/lib/PieLayout/index.es.min.js +2 -2
  24. package/lib/RawCanvas/index.es.js +1 -1
  25. package/lib/RawCanvas/index.es.min.js +1 -1
  26. package/lib/SVG/index.es.js +2 -2
  27. package/lib/SVG/index.es.min.js +2 -2
  28. package/lib/Shader/index.es.js +1 -1
  29. package/lib/Shader/index.es.min.js +1 -1
  30. package/lib/Texture/index.es.js +1 -1
  31. package/lib/Texture/index.es.min.js +1 -1
  32. package/lib/TreeLayout/index.es.js +105 -105
  33. package/lib/TreeLayout/index.es.min.js +2 -2
  34. package/lib/animation/index.es.js +105 -105
  35. package/lib/animation/index.es.min.js +2 -2
  36. package/lib/assemble/index.es.js +1 -1
  37. package/lib/assemble/index.es.min.js +1 -1
  38. package/lib/getLoopColors/index.es.js +1 -1
  39. package/lib/getLoopColors/index.es.min.js +1 -1
  40. package/lib/getWebGLContext/index.es.js +1 -1
  41. package/lib/getWebGLContext/index.es.min.js +1 -1
  42. package/lib/index.umd.js +156 -156
  43. package/lib/index.umd.min.js +5 -5
  44. package/lib/initOption/index.es.js +1 -1
  45. package/lib/initOption/index.es.min.js +1 -1
  46. package/lib/mergeOption/index.es.js +1 -1
  47. package/lib/mergeOption/index.es.min.js +1 -1
  48. package/lib/move/index.es.js +1 -1
  49. package/lib/move/index.es.min.js +1 -1
  50. package/lib/rotate/index.es.js +1 -1
  51. package/lib/rotate/index.es.min.js +1 -1
  52. package/lib/ruler/index.es.js +1 -1
  53. package/lib/ruler/index.es.min.js +1 -1
  54. package/lib/scale/index.es.js +1 -1
  55. package/lib/scale/index.es.min.js +1 -1
  56. package/lib/throttle/index.es.js +51 -51
  57. package/lib/throttle/index.es.min.js +2 -2
  58. package/minialipay/ui-canvas/drawImage.js +35 -35
  59. package/minialipay/ui-canvas/index.acss +4 -4
  60. package/minialipay/ui-canvas/index.axml +3 -3
  61. package/minialipay/ui-canvas/index.d.ts +1 -1
  62. package/minialipay/ui-canvas/index.js +100 -100
  63. package/minialipay/ui-canvas/index.json +6 -6
  64. package/miniprogram/ui-canvas/drawImage.js +35 -35
  65. package/miniprogram/ui-canvas/index.js +125 -125
  66. package/miniprogram/ui-canvas/index.json +4 -4
  67. package/miniprogram/ui-canvas/index.wxml +4 -4
  68. package/miniprogram/ui-canvas/index.wxss +5 -5
  69. package/package/BarLayout/index.ts +2 -2
  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/PieLayout/index.ts +2 -2
  79. package/package/RawCanvas/index.ts +2 -2
  80. package/package/SVG/index.ts +2 -2
  81. package/package/Shader/index.ts +2 -2
  82. package/package/Texture/index.ts +2 -2
  83. package/package/TreeLayout/index.ts +2 -2
  84. package/package/animation/index.ts +5 -5
  85. package/package/assemble/index.ts +2 -2
  86. package/package/getLoopColors/index.ts +2 -2
  87. package/package/getWebGLContext/index.ts +40 -40
  88. package/package/index.ts +84 -84
  89. package/package/initOption/index.ts +2 -2
  90. package/package/mergeOption/index.ts +2 -2
  91. package/package/move/index.ts +2 -2
  92. package/package/rotate/index.ts +2 -2
  93. package/package/ruler/index.ts +2 -2
  94. package/package/scale/index.ts +2 -2
  95. package/package/throttle/index.ts +2 -2
  96. package/package.json +2 -2
  97. package/src/Eoap.ts +66 -66
  98. package/src/Matrix4/index.ts +84 -84
  99. package/src/Matrix4/move.ts +12 -12
  100. package/src/Matrix4/rotate.ts +15 -15
  101. package/src/Matrix4/scale.ts +11 -11
  102. package/src/Matrix4/transform.ts +64 -64
  103. package/src/Mercator.ts +27 -27
  104. package/src/common/assemble.ts +22 -22
  105. package/src/common/canvas/arc.ts +51 -51
  106. package/src/common/canvas/config.ts +176 -176
  107. package/src/common/canvas/default.ts +64 -64
  108. package/src/common/canvas/gradient.ts +31 -31
  109. package/src/common/canvas/index.ts +188 -188
  110. package/src/common/canvas/texts.ts +18 -18
  111. package/src/common/map/getBoundary.ts +15 -15
  112. package/src/common/map/tool.ts +29 -29
  113. package/src/common/option.ts +29 -29
  114. package/src/common/setStyle.ts +5 -5
  115. package/src/common/svg/config.ts +213 -213
  116. package/src/common/svg/default.ts +29 -29
  117. package/src/common/svg/gradient.ts +53 -53
  118. package/src/common/svg/index.ts +332 -332
  119. package/src/common/svg/tool.ts +51 -51
  120. package/src/common/tree/index.ts +25 -25
  121. package/src/common/tree/toInnerTree.ts +61 -61
  122. package/src/common/type.ts +26 -26
  123. package/src/common/webgl/buffer.ts +79 -79
  124. package/src/common/webgl/getWebGLContext.ts +45 -45
  125. package/src/common/webgl/shader.ts +75 -75
  126. package/src/coordinate/MapCoordinate.ts +80 -80
  127. package/src/getLoopColors.ts +42 -42
  128. package/src/interpolation/Cardinal.ts +110 -110
  129. package/src/interpolation/Hermite.ts +65 -65
  130. package/src/move.ts +7 -7
  131. package/src/rotate.ts +7 -7
  132. package/src/ruler.ts +209 -209
  133. package/src/scale.ts +6 -6
  134. package/types/Bar.d.ts +91 -91
  135. package/types/BarConfig.d.ts +4 -4
  136. package/types/BarLayout.d.ts +48 -48
  137. package/types/BarOption.d.ts +31 -31
  138. package/types/Buffer.d.ts +23 -23
  139. package/types/CanvasConfig.d.ts +88 -88
  140. package/types/CanvasOption.d.ts +13 -13
  141. package/types/CanvasOpts.d.ts +9 -9
  142. package/types/Cardinal.d.ts +13 -13
  143. package/types/Gradient.d.ts +14 -14
  144. package/types/Hermite.d.ts +18 -18
  145. package/types/Map.d.ts +9 -9
  146. package/types/MapConfig.d.ts +27 -27
  147. package/types/MapCoordinate.d.ts +22 -22
  148. package/types/Matrix4.d.ts +47 -47
  149. package/types/Pie.d.ts +73 -73
  150. package/types/PieConfig.d.ts +26 -26
  151. package/types/PieLayout.d.ts +40 -40
  152. package/types/PieOption.d.ts +21 -21
  153. package/types/SVG.d.ts +247 -247
  154. package/types/SVGConfig.d.ts +71 -71
  155. package/types/Shader.d.ts +16 -16
  156. package/types/Texture.d.ts +16 -16
  157. package/types/Tree.d.ts +74 -74
  158. package/types/TreeConfig.d.ts +36 -36
  159. package/types/TreeLayout.d.ts +59 -59
  160. package/types/TreeOption.d.ts +48 -48
  161. package/types/animation.d.ts +11 -11
  162. package/types/assemble.d.ts +5 -5
  163. package/types/getLoopColors.d.ts +5 -5
  164. package/types/getWebGLContext.d.ts +7 -7
  165. package/types/index.d.ts +195 -195
  166. package/types/move.d.ts +5 -5
  167. package/types/option.d.ts +12 -12
  168. package/types/painterConfig.d.ts +4 -4
  169. package/types/rotate.d.ts +5 -5
  170. package/types/ruler.d.ts +10 -10
  171. package/types/scale.d.ts +5 -5
  172. package/types/throttle.d.ts +5 -5
  173. package/types/ui-canvas.d.ts +4 -4
  174. package/types/uni-canvas.d.ts +3 -3
  175. package/uni-app/drawImage.js +19 -19
  176. package/uni-app/ui-canvas.vue +295 -295
@@ -1,52 +1,52 @@
1
- import type SVGConfigType from '../../../types/SVGConfig'
2
-
3
- import { XLINK_ATTRIBUTE } from "./dictionary"
4
-
5
- const setLineAttr = (el: SVGElement, config: SVGConfigType) => {
6
- setAttribute(el, "stroke-dasharray", (config.lineDash as Array<number>).join(','))
7
- setAttribute(el, "stroke-width", config.lineWidth + "")
8
- setAttribute(el, "stroke-linecap", config.lineCap + "")
9
- setAttribute(el, "stroke-linejoin", config.lineJoin + "")
10
- }
11
-
12
- // 新建节点
13
- export function toNode(tagname: string) {
14
- return document.createElementNS('http://www.w3.org/2000/svg', tagname)
15
- }
16
-
17
- // 设置属性
18
- const _setAttribute = function (el: SVGElement, key: string, value: string | number) {
19
-
20
- // 需要使用xlink命名空间的xml属性
21
- if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
22
- el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
23
- }
24
-
25
- // 否则
26
- else {
27
- el.setAttribute(key, value + "")
28
- }
29
- }
30
- export const setAttribute = _setAttribute
31
-
32
- // 获取属性
33
- export function getAttribute(el: SVGElement, key: string) {
34
- if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
35
- return el.getAttribute(key)
36
- }
37
-
38
- export function full(el: SVGElement, config: SVGConfigType) {
39
- setLineAttr(el, config)
40
- _setAttribute(el, "stroke", config.strokeStyle as string)
41
- _setAttribute(el, "fill", config.fillStyle as string)
42
- }
43
-
44
- export function fill(el: SVGElement, config: SVGConfigType) {
45
- _setAttribute(el, "fill", config.fillStyle as string)
46
- }
47
-
48
- export function stroke(el: SVGElement, config: SVGConfigType) {
49
- setLineAttr(el, config)
50
- _setAttribute(el, "stroke", config.strokeStyle as string)
51
- _setAttribute(el, "fill", "none")
1
+ import type SVGConfigType from '../../../types/SVGConfig'
2
+
3
+ import { XLINK_ATTRIBUTE } from "./dictionary"
4
+
5
+ const setLineAttr = (el: SVGElement, config: SVGConfigType) => {
6
+ setAttribute(el, "stroke-dasharray", (config.lineDash as Array<number>).join(','))
7
+ setAttribute(el, "stroke-width", config.lineWidth + "")
8
+ setAttribute(el, "stroke-linecap", config.lineCap + "")
9
+ setAttribute(el, "stroke-linejoin", config.lineJoin + "")
10
+ }
11
+
12
+ // 新建节点
13
+ export function toNode(tagname: string) {
14
+ return document.createElementNS('http://www.w3.org/2000/svg', tagname)
15
+ }
16
+
17
+ // 设置属性
18
+ const _setAttribute = function (el: SVGElement, key: string, value: string | number) {
19
+
20
+ // 需要使用xlink命名空间的xml属性
21
+ if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
22
+ el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
23
+ }
24
+
25
+ // 否则
26
+ else {
27
+ el.setAttribute(key, value + "")
28
+ }
29
+ }
30
+ export const setAttribute = _setAttribute
31
+
32
+ // 获取属性
33
+ export function getAttribute(el: SVGElement, key: string) {
34
+ if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
35
+ return el.getAttribute(key)
36
+ }
37
+
38
+ export function full(el: SVGElement, config: SVGConfigType) {
39
+ setLineAttr(el, config)
40
+ _setAttribute(el, "stroke", config.strokeStyle as string)
41
+ _setAttribute(el, "fill", config.fillStyle as string)
42
+ }
43
+
44
+ export function fill(el: SVGElement, config: SVGConfigType) {
45
+ _setAttribute(el, "fill", config.fillStyle as string)
46
+ }
47
+
48
+ export function stroke(el: SVGElement, config: SVGConfigType) {
49
+ setLineAttr(el, config)
50
+ _setAttribute(el, "stroke", config.strokeStyle as string)
51
+ _setAttribute(el, "fill", "none")
52
52
  }
@@ -1,26 +1,26 @@
1
- import type TreeConfigType from '../../../types/TreeConfig'
2
- import type { TreeResultType } from '../../../types/Tree'
3
-
4
- import toPlainTree from './toPlainTree'
5
- import { initOption } from '../option'
6
-
7
- class Tree {
8
- readonly name: string = 'Tree'
9
-
10
- private __config: TreeConfigType
11
-
12
- constructor(config: TreeConfigType = {}) {
13
- this.__config = initOption(config, {
14
- root: (initTree: any) => initTree,
15
- children: (parentTree: any) => parentTree.children,
16
- id: (treedata: any) => treedata.name
17
- })
18
- }
19
-
20
- use(initTree: any, noOpens = {}): TreeResultType {
21
- return toPlainTree(initTree, this.__config, noOpens)
22
- }
23
-
24
- }
25
-
1
+ import type TreeConfigType from '../../../types/TreeConfig'
2
+ import type { TreeResultType } from '../../../types/Tree'
3
+
4
+ import toPlainTree from './toPlainTree'
5
+ import { initOption } from '../option'
6
+
7
+ class Tree {
8
+ readonly name: string = 'Tree'
9
+
10
+ private __config: TreeConfigType
11
+
12
+ constructor(config: TreeConfigType = {}) {
13
+ this.__config = initOption(config, {
14
+ root: (initTree: any) => initTree,
15
+ children: (parentTree: any) => parentTree.children,
16
+ id: (treedata: any) => treedata.name
17
+ })
18
+ }
19
+
20
+ use(initTree: any, noOpens = {}): TreeResultType {
21
+ return toPlainTree(initTree, this.__config, noOpens)
22
+ }
23
+
24
+ }
25
+
26
26
  export default Tree
@@ -1,62 +1,62 @@
1
- import type { default as TreeConfigType, rootType, childrenType, idType } from '../../../types/TreeConfig'
2
-
3
- /**
4
- * 根据配置的层次关系(配置的id,child,root)把原始数据变成内部结构,方便后期位置计算
5
- *
6
- * tempTree[id] = {
7
- * "data": 原始数据,
8
- * "pid": 父亲ID,
9
- * "id": 唯一标识ID,
10
- * "show": boolean,
11
- * "isOpen": boolean,
12
- * "children": [cid1、cid2、...]
13
- * }
14
- */
15
- export default (initTree: any, config: TreeConfigType) => {
16
- const tempTree: {
17
- [key: string]: any
18
- } = {}
19
-
20
- // 根结点
21
- const temp = (config.root as rootType)(initTree)
22
- let id: number | string, rid: number | string
23
- id = rid = (config.id as idType)(temp)
24
- tempTree[id] = {
25
- "data": temp,
26
- "pid": null,
27
- "id": id,
28
- "isOpen": true,
29
- "show": true,
30
- "deg": 0,
31
- "children": []
32
- }
33
-
34
- let num: number = 1
35
-
36
- // 根据传递的原始数据,生成内部统一结构
37
- ; (function createTree(pdata: any, pid: number | string) {
38
- const children = (config.children as childrenType)(pdata, initTree)
39
- num += children ? children.length : 0
40
- for (let flag = 0; children && flag < children.length; flag++) {
41
- id = (config.id as idType)(children[flag])
42
- tempTree[pid].children.push(id);
43
- tempTree[id] = {
44
- "data": children[flag],
45
- "pid": pid,
46
- "id": id,
47
- "isOpen": true,
48
- "show": true,
49
- "deg": 0,
50
- "children": []
51
- }
52
- createTree(children[flag], id)
53
- }
54
- })(temp, id)
55
-
56
- return {
57
- rid,
58
- value: tempTree,
59
- num
60
- }
61
-
1
+ import type { default as TreeConfigType, rootType, childrenType, idType } from '../../../types/TreeConfig'
2
+
3
+ /**
4
+ * 根据配置的层次关系(配置的id,child,root)把原始数据变成内部结构,方便后期位置计算
5
+ *
6
+ * tempTree[id] = {
7
+ * "data": 原始数据,
8
+ * "pid": 父亲ID,
9
+ * "id": 唯一标识ID,
10
+ * "show": boolean,
11
+ * "isOpen": boolean,
12
+ * "children": [cid1、cid2、...]
13
+ * }
14
+ */
15
+ export default (initTree: any, config: TreeConfigType) => {
16
+ const tempTree: {
17
+ [key: string]: any
18
+ } = {}
19
+
20
+ // 根结点
21
+ const temp = (config.root as rootType)(initTree)
22
+ let id: number | string, rid: number | string
23
+ id = rid = (config.id as idType)(temp)
24
+ tempTree[id] = {
25
+ "data": temp,
26
+ "pid": null,
27
+ "id": id,
28
+ "isOpen": true,
29
+ "show": true,
30
+ "deg": 0,
31
+ "children": []
32
+ }
33
+
34
+ let num: number = 1
35
+
36
+ // 根据传递的原始数据,生成内部统一结构
37
+ ; (function createTree(pdata: any, pid: number | string) {
38
+ const children = (config.children as childrenType)(pdata, initTree)
39
+ num += children ? children.length : 0
40
+ for (let flag = 0; children && flag < children.length; flag++) {
41
+ id = (config.id as idType)(children[flag])
42
+ tempTree[pid].children.push(id);
43
+ tempTree[id] = {
44
+ "data": children[flag],
45
+ "pid": pid,
46
+ "id": id,
47
+ "isOpen": true,
48
+ "show": true,
49
+ "deg": 0,
50
+ "children": []
51
+ }
52
+ createTree(children[flag], id)
53
+ }
54
+ })(temp, id)
55
+
56
+ return {
57
+ rid,
58
+ value: tempTree,
59
+ num
60
+ }
61
+
62
62
  }
@@ -1,27 +1,27 @@
1
- const toString = Object.prototype.toString
2
-
3
- // 获取一个值的类型字符串[object type]
4
- export function getType(value: any) {
5
- if (value == null) {
6
- return value === undefined ? '[object Undefined]' : '[object Null]'
7
- }
8
- return toString.call(value)
9
- }
10
-
11
- // 判断一个值是不是一个朴素的'对象'
12
- export function isPlainObject(value: any) {
13
- if (value === null || typeof value !== 'object' || getType(value) != '[object Object]') {
14
- return false
15
- }
16
-
17
- // 如果原型为null
18
- if (Object.getPrototypeOf(value) === null) {
19
- return true
20
- }
21
-
22
- let proto = value
23
- while (Object.getPrototypeOf(proto) !== null) {
24
- proto = Object.getPrototypeOf(proto)
25
- }
26
- return Object.getPrototypeOf(value) === proto
1
+ const toString = Object.prototype.toString
2
+
3
+ // 获取一个值的类型字符串[object type]
4
+ export function getType(value: any) {
5
+ if (value == null) {
6
+ return value === undefined ? '[object Undefined]' : '[object Null]'
7
+ }
8
+ return toString.call(value)
9
+ }
10
+
11
+ // 判断一个值是不是一个朴素的'对象'
12
+ export function isPlainObject(value: any) {
13
+ if (value === null || typeof value !== 'object' || getType(value) != '[object Object]') {
14
+ return false
15
+ }
16
+
17
+ // 如果原型为null
18
+ if (Object.getPrototypeOf(value) === null) {
19
+ return true
20
+ }
21
+
22
+ let proto = value
23
+ while (Object.getPrototypeOf(proto) !== null) {
24
+ proto = Object.getPrototypeOf(proto)
25
+ }
26
+ return Object.getPrototypeOf(value) === proto
27
27
  }
@@ -1,80 +1,80 @@
1
- // 缓冲区分为两种:
2
- // 1.缓冲区中保存了包含顶点的数据
3
- // 2.缓冲区保存了包含顶点的索引值
4
-
5
- // 获取一个新的缓冲区
6
- // isElement默认false,创建第一种缓冲区,为true创建第二种
7
- const newBuffer = (painter: WebGLRenderingContext) => {
8
- return painter.createBuffer()
9
- }
10
-
11
- // 数据写入缓冲区
12
- // data是一个类型化数组,表示写入的数据
13
- // usage表示程序如何使用存储在缓冲区的数据
14
- const writeBuffer = (painter: WebGLRenderingContext, data: ArrayBuffer, isElement: boolean, usage: number) => {
15
- const TYPE = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
16
- painter.bufferData(TYPE, data, usage)
17
- }
18
-
19
- // 使用缓冲区数据
20
- // location指定待分配的attribute变量的存储位置
21
- // size每个分量个数
22
- // type数据类型,应该是以下的某个:
23
- // gl.UNSIGNED_BYTE Uint8Array
24
- // gl.SHORT Int16Array
25
- // gl.UNSIGNED_SHORT Uint16Array
26
- // gl.INT Int32Array
27
- // gl.UNSIGNED_INT Uint32Array
28
- // gl.FLOAT Float32Array
29
- // stride相邻两个数据项的字节数
30
- // offset数据的起点字节位置
31
- // normalized是否把非浮点型的数据归一化到[0,1]或[-1,1]区间
32
- const useBuffer = (painter: WebGLRenderingContext, location: number, size: number, type: number, stride: number, offset: number, normalized: boolean) => {
33
-
34
- // 把缓冲区对象分配给目标变量
35
- painter.vertexAttribPointer(location, size, type, normalized, stride, offset)
36
-
37
- // 连接目标对象和缓冲区对象
38
- painter.enableVertexAttribArray(location)
39
- }
40
-
41
- class BufferObject {
42
-
43
- private __painter: WebGLRenderingContext
44
- private __isElement: boolean
45
-
46
- private __buffer: WebGLBuffer
47
- private __type: number
48
- private __fsize: number
49
-
50
- constructor(painter: WebGLRenderingContext, isElement: boolean = false) {
51
- this.__painter = painter
52
- this.__isElement = isElement
53
-
54
- this.__buffer = newBuffer(painter) as WebGLBuffer
55
- this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
56
- }
57
-
58
- // 使用这个缓冲区对象
59
- // (先于写入和分配)
60
- use() {
61
- this.__painter.bindBuffer(this.__type, this.__buffer) // 绑定到目标
62
- return this
63
- }
64
-
65
- // 写入数据
66
- write(data: Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array) {
67
- writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW)
68
- this.__fsize = data.BYTES_PER_ELEMENT
69
- return this
70
- }
71
-
72
- // 分配使用
73
- // 第2~4位参数分别表示:一个完整数据的长度、一组数据的长度、读取位置偏移
74
- divide(location: number, size: number, stride: number, offset: number = 0) {
75
- useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false)
76
- return this
77
- }
78
- }
79
-
1
+ // 缓冲区分为两种:
2
+ // 1.缓冲区中保存了包含顶点的数据
3
+ // 2.缓冲区保存了包含顶点的索引值
4
+
5
+ // 获取一个新的缓冲区
6
+ // isElement默认false,创建第一种缓冲区,为true创建第二种
7
+ const newBuffer = (painter: WebGLRenderingContext) => {
8
+ return painter.createBuffer()
9
+ }
10
+
11
+ // 数据写入缓冲区
12
+ // data是一个类型化数组,表示写入的数据
13
+ // usage表示程序如何使用存储在缓冲区的数据
14
+ const writeBuffer = (painter: WebGLRenderingContext, data: ArrayBuffer, isElement: boolean, usage: number) => {
15
+ const TYPE = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
16
+ painter.bufferData(TYPE, data, usage)
17
+ }
18
+
19
+ // 使用缓冲区数据
20
+ // location指定待分配的attribute变量的存储位置
21
+ // size每个分量个数
22
+ // type数据类型,应该是以下的某个:
23
+ // gl.UNSIGNED_BYTE Uint8Array
24
+ // gl.SHORT Int16Array
25
+ // gl.UNSIGNED_SHORT Uint16Array
26
+ // gl.INT Int32Array
27
+ // gl.UNSIGNED_INT Uint32Array
28
+ // gl.FLOAT Float32Array
29
+ // stride相邻两个数据项的字节数
30
+ // offset数据的起点字节位置
31
+ // normalized是否把非浮点型的数据归一化到[0,1]或[-1,1]区间
32
+ const useBuffer = (painter: WebGLRenderingContext, location: number, size: number, type: number, stride: number, offset: number, normalized: boolean) => {
33
+
34
+ // 把缓冲区对象分配给目标变量
35
+ painter.vertexAttribPointer(location, size, type, normalized, stride, offset)
36
+
37
+ // 连接目标对象和缓冲区对象
38
+ painter.enableVertexAttribArray(location)
39
+ }
40
+
41
+ class BufferObject {
42
+
43
+ private __painter: WebGLRenderingContext
44
+ private __isElement: boolean
45
+
46
+ private __buffer: WebGLBuffer
47
+ private __type: number
48
+ private __fsize: number
49
+
50
+ constructor(painter: WebGLRenderingContext, isElement: boolean = false) {
51
+ this.__painter = painter
52
+ this.__isElement = isElement
53
+
54
+ this.__buffer = newBuffer(painter) as WebGLBuffer
55
+ this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
56
+ }
57
+
58
+ // 使用这个缓冲区对象
59
+ // (先于写入和分配)
60
+ use() {
61
+ this.__painter.bindBuffer(this.__type, this.__buffer) // 绑定到目标
62
+ return this
63
+ }
64
+
65
+ // 写入数据
66
+ write(data: Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array) {
67
+ writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW)
68
+ this.__fsize = data.BYTES_PER_ELEMENT
69
+ return this
70
+ }
71
+
72
+ // 分配使用
73
+ // 第2~4位参数分别表示:一个完整数据的长度、一组数据的长度、读取位置偏移
74
+ divide(location: number, size: number, stride: number, offset: number = 0) {
75
+ useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false)
76
+ return this
77
+ }
78
+ }
79
+
80
80
  export default BufferObject
@@ -1,46 +1,46 @@
1
- import type { WebGLmodeType } from "../../../types/getWebGLContext"
2
-
3
- interface OptsType {
4
- preserveDrawingBuffer?: boolean
5
- }
6
- export default function (canvas: HTMLCanvasElement, scale: number, opts: OptsType = {}, mode: WebGLmodeType = "scaleToFill") {
7
- const names = ["experimental-webgl", "webkit-3d", "moz-webgl"]
8
- let painter = canvas.getContext("webgl", opts) as WebGL2RenderingContext
9
- for (let i = 0; i < names.length; i++) {
10
- try {
11
- painter = canvas.getContext(names[i], opts) as WebGL2RenderingContext
12
- } catch (e) { }
13
- if (painter) break
14
- }
15
- if (!painter) throw new Error('Non canvas or browser does not support webgl.')
16
-
17
- const width = painter.canvas.width, height = painter.canvas.height
18
-
19
- let scaleX = scale, scaleY = scale
20
- if (mode == "aspectFit") {
21
- if (width > height) {
22
- scaleX *= height / width
23
- } else if (height > width) {
24
- scaleY *= width / height
25
- }
26
- } else if (mode == "aspectFill") {
27
- if (width > height) {
28
- scaleY *= width / height
29
- } else if (height > width) {
30
- scaleX *= height / width
31
- }
32
- }
33
-
34
- const viewWidth = width * scaleX
35
- const viewHeight = height * scaleY
36
-
37
- painter.viewport((width - viewWidth) * 0.5, (height - viewHeight) * 0.5, viewWidth, viewHeight)
38
-
39
- // https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/depthFunc
40
- painter.depthFunc(painter.LEQUAL)
41
-
42
- // 开启深度计算
43
- painter.enable(painter.DEPTH_TEST)
44
-
45
- return painter
1
+ import type { WebGLmodeType } from "../../../types/getWebGLContext"
2
+
3
+ interface OptsType {
4
+ preserveDrawingBuffer?: boolean
5
+ }
6
+ export default function (canvas: HTMLCanvasElement, scale: number, opts: OptsType = {}, mode: WebGLmodeType = "scaleToFill") {
7
+ const names = ["experimental-webgl", "webkit-3d", "moz-webgl"]
8
+ let painter = canvas.getContext("webgl", opts) as WebGL2RenderingContext
9
+ for (let i = 0; i < names.length; i++) {
10
+ try {
11
+ painter = canvas.getContext(names[i], opts) as WebGL2RenderingContext
12
+ } catch (e) { }
13
+ if (painter) break
14
+ }
15
+ if (!painter) throw new Error('Non canvas or browser does not support webgl.')
16
+
17
+ const width = painter.canvas.width, height = painter.canvas.height
18
+
19
+ let scaleX = scale, scaleY = scale
20
+ if (mode == "aspectFit") {
21
+ if (width > height) {
22
+ scaleX *= height / width
23
+ } else if (height > width) {
24
+ scaleY *= width / height
25
+ }
26
+ } else if (mode == "aspectFill") {
27
+ if (width > height) {
28
+ scaleY *= width / height
29
+ } else if (height > width) {
30
+ scaleX *= height / width
31
+ }
32
+ }
33
+
34
+ const viewWidth = width * scaleX
35
+ const viewHeight = height * scaleY
36
+
37
+ painter.viewport((width - viewWidth) * 0.5, (height - viewHeight) * 0.5, viewWidth, viewHeight)
38
+
39
+ // https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/depthFunc
40
+ painter.depthFunc(painter.LEQUAL)
41
+
42
+ // 开启深度计算
43
+ painter.enable(painter.DEPTH_TEST)
44
+
45
+ return painter
46
46
  }