vislite 0.7.1 → 0.8.0-alpha.0

package/package/getWebGLContext/index.ts

@@ -1,40 +1,41 @@
-import getWebGLContext from "../../src/common/webgl/getWebGLContext"
-
-export default (el: HTMLElement | null, scale: number = 1) => {
-    if (!el) {
-        throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.")
-    }
-
-    let width = el.clientWidth, height = el.clientHeight
-
-    let ViewCanvas: HTMLCanvasElement
-
-    let _el = el as any
-
-    // 如果已经初始化过了
-    if (_el._vislite_canvas_) {
-        ViewCanvas = _el._vislite_canvas_
-    }
-
-    // 否则就初始化
-    else {
-
-        ViewCanvas = document.createElement('canvas')
-        el.appendChild(ViewCanvas)
-
-        _el._vislite_canvas_ = ViewCanvas
-
-        el.setAttribute('vislite', 'WebGL')
-
-    }
-
-    // 设置画布大小
-
-    ViewCanvas.style.width = width + "px"
-    ViewCanvas.setAttribute('width', width + "")
-
-    ViewCanvas.style.height = height + "px"
-    ViewCanvas.setAttribute('height', height + "")
-
-    return getWebGLContext(ViewCanvas, scale)
+import getWebGLContext from "../../src/common/webgl/getWebGLContext"
+import type { WebGLmodeType } from "../../types/getWebGLContext"
+
+export default (el: HTMLElement | null, scale: number = 1, mode?: WebGLmodeType) => {
+    if (!el) {
+        throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.")
+    }
+
+    let width = el.clientWidth, height = el.clientHeight
+
+    let ViewCanvas: HTMLCanvasElement
+
+    let _el = el as any
+
+    // 如果已经初始化过了
+    if (_el._vislite_canvas_) {
+        ViewCanvas = _el._vislite_canvas_
+    }
+
+    // 否则就初始化
+    else {
+
+        ViewCanvas = document.createElement('canvas')
+        el.appendChild(ViewCanvas)
+
+        _el._vislite_canvas_ = ViewCanvas
+
+        el.setAttribute('vislite', 'WebGL')
+
+    }
+
+    // 设置画布大小
+
+    ViewCanvas.style.width = width + "px"
+    ViewCanvas.setAttribute('width', width + "")
+
+    ViewCanvas.style.height = height + "px"
+    ViewCanvas.setAttribute('height', height + "")
+
+    return getWebGLContext(ViewCanvas, scale, {}, mode)
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vislite",
-  "version": "0.7.1",
+  "version": "0.8.0-alpha.0",
   "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
   "main": "./lib/index.umd.min.js",
   "typings": "./types/index.d.ts",

package/src/Canvas.ts

@@ -43,9 +43,9 @@ class Canvas extends OralCanvas implements CanvasType {
         }
 
         // 设置画布大小
-        const canvasArray = [RegionCanvas, ViewCanvas]
+        let canvasArray = [RegionCanvas, ViewCanvas]
         for (let index = 0; index < canvasArray.length; index++) {
-            const canvas = canvasArray[index]
+            let canvas = canvasArray[index]
             if (canvas) {
                 canvas.style.width = width + "px"
                 canvas.setAttribute('width', (index * width + width) + "")

package/src/Geometry.ts

@@ -30,6 +30,70 @@ class Geometry implements GeometryType {
         return this
     }
 
+    /**
+     * 【1】辅助方法
+     */
+
+    // 计算切割份数
+    splitNum(radius: number, deg?: number) {
+        return splitNum(this.__option.precision as number, radius, deg)
+    }
+
+    // 物体方向转换
+    rotateLine(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number) {
+        let rotateLine = rotateLineFactory(x1, y1, z1, x2, y2, z2)
+        return (x: number, y: number, z: number) => rotateLine(x, y, z, this.__option.normal as boolean)
+    }
+
+    /**
+     * 【2】立方片段
+     */
+
+    // 棱柱水平部分
+    prismHorizontal(x: number, y: number, z: number, radius: number, num: number, d: number, beginDeg?: number, deg?: number) {
+        return prismHorizontal(this.__option.normal as boolean, x, y, z, radius, num, d, beginDeg, deg)
+    }
+
+    // 棱柱垂直部分
+    prismVertical(x: number, y: number, z: number, radius: number, height: number, num: number, beginDeg?: number, deg?: number) {
+        return prismVertical(this.__option.normal as boolean, x, y, z, radius, height, num, beginDeg, deg)
+    }
+
+    // 球体中的一瓣子
+    sphereFragment(cx: number, cy: number, cz: number, radius: number, num: number, index: number) {
+        return sphereFragment(this.__option.normal as boolean, cx, cy, cz, radius, num, index)
+    }
+
+    /**
+     * 【3】立方体
+     */
+
+    // 饼柱体
+    pie(x: number, y: number, z: number, radius: number, height: number, beginDeg: number, deg: number): Array<GeometryResultType> {
+
+        // 求解出需要切割多少份比较合理
+        const num = splitNum(this.__option.precision as number, radius, deg)
+
+        const result = [{
+            name: "bottom",
+            points: prismHorizontal(this.__option.normal as boolean, x, y, z, radius, num as number, height > 0 ? -1 : 1, beginDeg, deg),
+            length: 3 * num,
+            method: "TRIANGLES" as const
+        }, {
+            name: "top",
+            points: prismHorizontal(this.__option.normal as boolean, x, y + height, z, radius, num as number, height > 0 ? 1 : -1, beginDeg, deg),
+            length: 3 * num,
+            method: "TRIANGLES" as const
+        }, {
+            name: "side",
+            points: prismVertical(this.__option.normal as boolean, x, y, z, radius, height, num as number, beginDeg, deg),
+            length: 6 * num,
+            method: "TRIANGLES" as const
+        }]
+
+        return result
+    }
+
     // 圆柱体
     cylinder(x: number, y: number, z: number, radius: number, x2: number, y2?: number, z2?: number): Array<GeometryResultType> {
 
@@ -52,7 +116,7 @@ class Geometry implements GeometryType {
             height = x2
             num = y2
         } else {
-            height = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y) + (z2 as number - z) * (z2 as number - z))
+            height = (y > y2 ? -1 : 1) * Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y) + (z2 as number - z) * (z2 as number - z))
             rotateLine = rotateLineFactory(x, y, z, x2, y2, z2 as number)
         }
 

package/src/WebGL.ts

@@ -1,67 +1,67 @@
-import type WebGLOptionType from '../types/WebGLOption'
-import type WebGLType from '../types/WebGL'
-
-import OralWebGL from './common/webgl/index'
-import mergeOption from './common/mergeOption'
-
-class WebGL extends OralWebGL implements WebGLType {
-    constructor(el: HTMLElement | null, option: WebGLOptionType = {}) {
-        if (!el) {
-            throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.")
-        }
-
-        option = mergeOption(option, {
-            region: true
-        })
-
-        const width = el.clientWidth, height = el.clientHeight
-
-        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null = null
-
-        const _el = el as any
-
-        // 如果已经初始化过了
-        if (_el._vislite_canvas_) {
-            ViewCanvas = _el._vislite_canvas_[0]
-            RegionCanvas = _el._vislite_canvas_[1]
-        }
-
-        // 否则就初始化
-        else {
-
-            if (option.region) {
-
-                RegionCanvas = document.createElement('canvas')
-                el.appendChild(RegionCanvas)
-
-                RegionCanvas.style.position = 'absolute'
-                RegionCanvas.style.zIndex = "-1"
-                RegionCanvas.style.opacity = "0"
-
-            }
-
-            ViewCanvas = document.createElement('canvas')
-            el.appendChild(ViewCanvas)
-
-            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
-
-            el.setAttribute('vislite', 'WebGL')
-        }
-
-        // 设置画布大小
-        for (const canvas of [ViewCanvas, RegionCanvas]) {
-
-            if (canvas) {
-                canvas.style.width = width + "px"
-                canvas.setAttribute('width', width + "")
-
-                canvas.style.height = height + "px"
-                canvas.setAttribute('height', height + "")
-            }
-        }
-
-        super(ViewCanvas, RegionCanvas)
-    }
-}
-
+import type WebGLOptionType from '../types/WebGLOption'
+import type WebGLType from '../types/WebGL'
+
+import OralWebGL from './common/webgl/index'
+import mergeOption from './common/mergeOption'
+
+class WebGL extends OralWebGL implements WebGLType {
+    constructor(el: HTMLElement | null, option: WebGLOptionType = {}) {
+        if (!el) {
+            throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.")
+        }
+
+        option = mergeOption(option, {
+            region: true
+        })
+
+        const width = el.clientWidth, height = el.clientHeight
+
+        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null = null
+
+        const _el = el as any
+
+        // 如果已经初始化过了
+        if (_el._vislite_canvas_) {
+            ViewCanvas = _el._vislite_canvas_[0]
+            RegionCanvas = _el._vislite_canvas_[1]
+        }
+
+        // 否则就初始化
+        else {
+
+            if (option.region) {
+
+                RegionCanvas = document.createElement('canvas')
+                el.appendChild(RegionCanvas)
+
+                RegionCanvas.style.position = 'absolute'
+                RegionCanvas.style.zIndex = "-1"
+                RegionCanvas.style.opacity = "0"
+
+            }
+
+            ViewCanvas = document.createElement('canvas')
+            el.appendChild(ViewCanvas)
+
+            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
+
+            el.setAttribute('vislite', 'WebGL')
+        }
+
+        // 设置画布大小
+        for (const canvas of [ViewCanvas, RegionCanvas]) {
+
+            if (canvas) {
+                canvas.style.width = width + "px"
+                canvas.setAttribute('width', width + "")
+
+                canvas.style.height = height + "px"
+                canvas.setAttribute('height', height + "")
+            }
+        }
+
+        super(ViewCanvas, RegionCanvas, option.mode)
+    }
+}
+
 export default WebGL

package/src/common/canvas/painter.ts

@@ -414,7 +414,33 @@ class Painter {
         return this
     }
 
+    // 渲染绘制（uniapp独有）
     draw() { }
+
+    // 绘制图片
+    drawImage(img: CanvasImageSource | string, x: number, y: number, w: number, h: number, isUniapp: boolean = false) {
+        return new Promise((resolve) => {
+            if (this.__region) {
+                this.__region.fillRect(x, y, w, h)
+                resolve({})
+            }
+
+            if (this.__isPainter && this.__onlyRegion) return this
+
+            if (typeof img == 'string' && !isUniapp) {
+                let imgInstance = new Image()
+                imgInstance.onload = () => {
+                    this.painter.drawImage(imgInstance, x, y, w, h)
+                    resolve({})
+                }
+                imgInstance.src = img
+            } else {
+                this.painter.drawImage(img as CanvasImageSource, x, y, w, h)
+                resolve({})
+            }
+
+        })
+    }
 }
 
 export default Painter

package/src/common/geometry/prism-horizontal.ts

@@ -1,35 +1,50 @@
-import rotate from '../../rotate'
-
-// 棱柱水平部分
-
-export default function (normal: boolean, x: number, y: number, z: number, radius: number, num: number, d: number) {
-
-    let beginX: number, beginZ: number
-    if (num == 4) {
-        const temp = radius / 1.414
-        beginX = x + temp
-        beginZ = z + temp
-
-    } else {
-        beginX = x + radius
-        beginZ = z
-    }
-
-    let point = [beginX, beginZ]
-    const points = []
-    const deg = Math.PI * 2 / num
-    for (let i = 0; i < num; i++) {
-
-        points.push(x, y, z)
-        if (normal) points.push(0, d, 0)
-
-        points.push(point[0], y, point[1])
-        if (normal) points.push(0, d, 0)
-
-        point = rotate(x, z, deg * (i + 1), beginX, beginZ)
-        points.push(point[0], y, point[1])
-        if (normal) points.push(0, d, 0)
-    }
-
-    return points
-}
+import rotate from '../../rotate'
+
+/**
+ * 棱柱水平部分
+ * @param normal 是否需要法向量
+ * @param x 中心
+ * @param y
+ * @param z
+ * @param radius 半径
+ * @param num 份数
+ * @param d 方向（用于 表示是底还是顶，方便计算法向量）
+ * @param beginDeg 开始弧度，默认0
+ * @param deg 跨越弧度，默认2pi
+ * @returns 点数组
+ */
+export default function (normal: boolean, x: number, y: number, z: number, radius: number, num: number, d: number, beginDeg: number = 0, deg: number = Math.PI * 2) {
+
+    let beginX: number, beginZ: number
+    if (num == 4) {
+        const temp = radius / 1.414
+        beginX = x + temp
+        beginZ = z + temp
+
+    } else {
+        beginX = x + radius
+        beginZ = z
+    }
+
+    let point = [beginX, beginZ]
+    if (beginDeg != 0) {
+        point = rotate(x, z, beginDeg, beginX, beginZ)
+    }
+
+    const points = []
+    const perDeg = deg / num
+    for (let i = 0; i < num; i++) {
+
+        points.push(x, y, z)
+        if (normal) points.push(0, d, 0)
+
+        points.push(point[0], y, point[1])
+        if (normal) points.push(0, d, 0)
+
+        point = rotate(x, z, perDeg * (i + 1), beginX, beginZ)
+        points.push(point[0], y, point[1])
+        if (normal) points.push(0, d, 0)
+    }
+
+    return points
+}

package/src/common/geometry/prism-vertical.ts

@@ -1,40 +1,55 @@
-import rotate from '../../rotate'
-
-// 棱柱垂直部分
-
-export default function (normal: boolean, x: number, y: number, z: number, radius: number, height: number, num: number) {
-    const points = []
-    let beginPosition: [number, number]
-
-    if (num == 4) {
-        beginPosition = rotate(x, z, Math.PI * 0.25, x - radius, z)
-    } else {
-        beginPosition = [x + radius, z]
-    }
-
-    const deg = Math.PI * 2 / num, degHalf = Math.PI * 2 / (num * 2)
-
-    let endPosition: [number, number], normalPosition: [number, number, number] | [] = []
-    for (let i = 0; i < num; i++) {
-
-        endPosition = rotate(x, z, deg, ...beginPosition)
-
-        if (normal) {
-            const halfPosition = rotate(x, z, degHalf, ...beginPosition)
-            normalPosition = [halfPosition[0], 0, halfPosition[1]]
-        }
-
-        points.push(beginPosition[0], y, beginPosition[1], ...normalPosition)
-        points.push(beginPosition[0], y + height, beginPosition[1], ...normalPosition)
-        points.push(endPosition[0], y + height, endPosition[1], ...normalPosition)
-
-        points.push(beginPosition[0], y, beginPosition[1], ...normalPosition)
-        points.push(endPosition[0], y, endPosition[1], ...normalPosition)
-        points.push(endPosition[0], y + height, endPosition[1], ...normalPosition)
-
-
-        beginPosition = endPosition
-    }
-
-    return points
-}
+import rotate from '../../rotate'
+
+/**
+ * 棱柱垂直部分
+ * @param normal 是否需要法向量
+ * @param x 中心
+ * @param y
+ * @param z
+ * @param radius 半径
+ * @param height 高
+ * @param num 份数
+ * @param beginDeg 开始弧度，默认0
+ * @param deg 跨越弧度，默认2pi
+ * @returns 点数组
+ */
+export default function (normal: boolean, x: number, y: number, z: number, radius: number, height: number, num: number, beginDeg: number = 0, deg: number = Math.PI * 2) {
+    const points = []
+    let beginPosition: [number, number]
+
+    if (num == 4) {
+        beginPosition = rotate(x, z, Math.PI * 0.25, x - radius, z)
+    } else {
+        beginPosition = [x + radius, z]
+    }
+
+    if (beginDeg != 0) {
+        beginPosition = rotate(x, z, beginDeg, ...beginPosition)
+    }
+
+    const perDeg = deg / num, degHalf = deg / (num * 2)
+
+    let endPosition: [number, number], normalPosition: [number, number, number] | [] = []
+    for (let i = 0; i < num; i++) {
+
+        endPosition = rotate(x, z, perDeg, ...beginPosition)
+
+        if (normal) {
+            const halfPosition = rotate(x, z, degHalf, ...beginPosition)
+            normalPosition = [halfPosition[0], 0, halfPosition[1]]
+        }
+
+        points.push(beginPosition[0], y, beginPosition[1], ...normalPosition)
+        points.push(beginPosition[0], y + height, beginPosition[1], ...normalPosition)
+        points.push(endPosition[0], y + height, endPosition[1], ...normalPosition)
+
+        points.push(beginPosition[0], y, beginPosition[1], ...normalPosition)
+        points.push(endPosition[0], y, endPosition[1], ...normalPosition)
+        points.push(endPosition[0], y + height, endPosition[1], ...normalPosition)
+
+
+        beginPosition = endPosition
+    }
+
+    return points
+}

package/src/common/geometry/tool/circle.ts

@@ -1,12 +1,18 @@
-// 计算切割份数
-export const splitNum = function (precision: number, radius: number) {
-
-    // 根据切割弧度得出切割块数目
-    const num = Math.ceil(Math.PI * 2 /
-
-        // 为了满足最小精度而得出的切割弧度
-        Math.asin(precision / radius) * 2)
-
-    return (isNaN(num) || num < 12) ? 12 : num
-
+/**
+ * 计算切割份数
+ * @param precision 精度
+ * @param radius 半径
+ * @param deg 需要跨越的弧度，默认圆（2pi）
+ * @returns 切割份数
+ */
+export const splitNum = function (precision: number, radius: number, deg: number = Math.PI * 2) {
+
+    // 根据切割弧度得出切割块数目
+    const num = Math.ceil(deg /
+
+        // 为了满足最小精度而得出的切割弧度
+        Math.asin(precision / radius) * 2)
+
+    return (isNaN(num) || num < 12) ? 12 : num
+
 }

package/src/common/geometry/tool/rotateLine.ts

@@ -1,36 +1,49 @@
-export default function (x: number, y: number, z: number, x2: number, y2: number, z2: number) {
-    return (x0: number, y0: number, z0: number, isNormal: boolean) => {
-        let sin: number, cos: number, temp: Array<number>
-
-        // 第一步：归零化
-        let _x0 = x0 - (isNormal ? 0 : x), _y0 = y0 - (isNormal ? 0 : y), _z0 = z0 - (isNormal ? 0 : z)  // 法向量起点本来就是原点
-        const _x2 = x2 - x, _y2 = y2 - y, _z2 = z2 - z
-
-        // 第二步：围绕OZ轴旋转
-
-        const __d = Math.sqrt(_x2 * _x2 + _z2 * _z2)
-        cos = _x2 / __d
-        sin = _z2 / __d
-
-        const _x2N = _z2 * sin + _x2 * cos
-
-        const d = Math.sqrt(_y2 * _y2 + _x2N * _x2N)
-        cos = _y2 / d
-        sin = _x2N / d
-
-        temp = [_y0, _x0]
-        _y0 = temp[0] * cos - temp[1] * sin
-        _x0 = temp[0] * sin + temp[1] * cos
-
-        // 第三步：围绕0Y轴旋转
-        cos = _x2 / __d
-        sin = _z2 / __d
-
-        temp = [_x0, _z0]
-        _x0 = temp[0] * cos - temp[1] * sin
-        _z0 = temp[0] * sin + temp[1] * cos
-
-        // 第四步：去零化（直接返回）
-        return [_x0 + (isNormal ? 0 : x), _y0 + (isNormal ? 0 : y), _z0 + (isNormal ? 0 : z)]
-    }
+/**
+ * 物体方向转换
+ * 由（x,y,z）转换成（x2-x,y2-y,z2-z）
+ * @param x
+ * @param y
+ * @param z
+ * @param x2
+ * @param y2
+ * @param z2
+ * @returns 点转换函数
+ */
+export default function (x: number, y: number, z: number, x2: number, y2: number, z2: number) {
+    return (x0: number, y0: number, z0: number, isNormal: boolean) => {
+        if (x == x2 && z == z2) return [x0, y0, z0]
+
+        let sin: number, cos: number, temp: Array<number>
+
+        // 第一步：归零化
+        let _x0 = x0 - (isNormal ? 0 : x), _y0 = y0 - (isNormal ? 0 : y), _z0 = z0 - (isNormal ? 0 : z)  // 法向量起点本来就是原点
+        const _x2 = x2 - x, _y2 = y2 - y, _z2 = z2 - z
+
+        // 第二步：围绕OZ轴旋转
+
+        const __d = Math.sqrt(_x2 * _x2 + _z2 * _z2)
+        cos = _x2 / __d
+        sin = _z2 / __d
+
+        const _x2N = _z2 * sin + _x2 * cos
+
+        const d = Math.sqrt(_y2 * _y2 + _x2N * _x2N)
+        cos = _y2 / d
+        sin = _x2N / d
+
+        temp = [_y0, _x0]
+        _y0 = temp[0] * cos - temp[1] * sin
+        _x0 = temp[0] * sin + temp[1] * cos
+
+        // 第三步：围绕0Y轴旋转
+        cos = _x2 / __d
+        sin = _z2 / __d
+
+        temp = [_x0, _z0]
+        _x0 = temp[0] * cos - temp[1] * sin
+        _z0 = temp[0] * sin + temp[1] * cos
+
+        // 第四步：去零化（直接返回）
+        return [_x0 + (isNormal ? 0 : x), _y0 + (isNormal ? 0 : y), _z0 + (isNormal ? 0 : z)]
+    }
 }