vislite 0.7.0 → 0.7.1

package/src/Matrix4/transform.ts

@@ -1,64 +1,64 @@
-/**
- * 针对任意射线(a1,b1,c1)->(a2,b2,c2)
- * 计算出两个变换矩阵
- * 分别为：任意射线变成OZ轴变换矩阵 + OZ轴变回原来的射线的变换矩阵
- */
-export default function (a1: number, b1: number, c1?: number, a2?: number, b2?: number, c2?: number) {
-
-    if (typeof a1 === 'number' && typeof b1 === 'number') {
-
-        // 如果设置两个点
-        // 表示二维上围绕某个点旋转
-        if (typeof c1 !== 'number') {
-            c1 = 0
-            a2 = a1
-            b2 = b1
-            c2 = 1
-        }
-        // 只设置三个点(设置不足六个点都认为只设置了三个点)
-        // 表示围绕从原点出发的射线旋转
-        else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
-            a2 = a1
-            b2 = b1
-            c2 = c1
-            a1 = 0
-            b1 = 0
-            c1 = 0
-        }
-
-        if (a1 == a2 && b1 == b2 && c1 == c2) throw new Error('It\'s not a legitimate ray!')
-
-        const sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)),
-            cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1,
-            sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0,
-
-            b = (a2 - a1) * sin1 + (b2 - b1) * cos1,
-            c = c2 - c1,
-
-            sqrt2 = Math.sqrt(b * b + c * c),
-            cos2 = sqrt2 != 0 ? c / sqrt2 : 1,
-            sin2 = sqrt2 != 0 ? b / sqrt2 : 0
-
-        return [
-
-            // 任意射线变成OZ轴变换矩阵
-            [
-                cos1, cos2 * sin1, sin1 * sin2, 0,
-                -sin1, cos1 * cos2, cos1 * sin2, 0,
-                0, -sin2, cos2, 0,
-                b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
-            ],
-
-            // OZ轴变回原来的射线的变换矩阵
-            [
-                cos1, -sin1, 0, 0,
-                cos2 * sin1, cos2 * cos1, -sin2, 0,
-                sin1 * sin2, cos1 * sin2, cos2, 0,
-                a1, b1, c1, 1
-            ]
-
-        ]
-    } else {
-        throw new Error('a1 and b1 is required!')
-    }
-}
+/**
+ * 针对任意射线(a1,b1,c1)->(a2,b2,c2)
+ * 计算出两个变换矩阵
+ * 分别为：任意射线变成OZ轴变换矩阵 + OZ轴变回原来的射线的变换矩阵
+ */
+export default function (a1: number, b1: number, c1?: number, a2?: number, b2?: number, c2?: number) {
+
+    if (typeof a1 === 'number' && typeof b1 === 'number') {
+
+        // 如果设置两个点
+        // 表示二维上围绕某个点旋转
+        if (typeof c1 !== 'number') {
+            c1 = 0
+            a2 = a1
+            b2 = b1
+            c2 = 1
+        }
+        // 只设置三个点(设置不足六个点都认为只设置了三个点)
+        // 表示围绕从原点出发的射线旋转
+        else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
+            a2 = a1
+            b2 = b1
+            c2 = c1
+            a1 = 0
+            b1 = 0
+            c1 = 0
+        }
+
+        if (a1 == a2 && b1 == b2 && c1 == c2) throw new Error('It\'s not a legitimate ray!')
+
+        const sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)),
+            cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1,
+            sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0,
+
+            b = (a2 - a1) * sin1 + (b2 - b1) * cos1,
+            c = c2 - c1,
+
+            sqrt2 = Math.sqrt(b * b + c * c),
+            cos2 = sqrt2 != 0 ? c / sqrt2 : 1,
+            sin2 = sqrt2 != 0 ? b / sqrt2 : 0
+
+        return [
+
+            // 任意射线变成OZ轴变换矩阵
+            [
+                cos1, cos2 * sin1, sin1 * sin2, 0,
+                -sin1, cos1 * cos2, cos1 * sin2, 0,
+                0, -sin2, cos2, 0,
+                b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
+            ],
+
+            // OZ轴变回原来的射线的变换矩阵
+            [
+                cos1, -sin1, 0, 0,
+                cos2 * sin1, cos2 * cos1, -sin2, 0,
+                sin1 * sin2, cos1 * sin2, cos2, 0,
+                a1, b1, c1, 1
+            ]
+
+        ]
+    } else {
+        throw new Error('a1 and b1 is required!')
+    }
+}

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)
+    }
+}
+
 export default WebGL

package/src/common/assemble.ts

@@ -1,23 +1,23 @@
-export default function (begin: number, end: number, step: number, count: number) {
-    const val: Array<number> = []
-    for (let index = 0; index < count; index++) val[index] = begin
-
-    // 非常类似进制数，每次调用都+1
-    return function () {
-        for (let i = 0; i < count; i++) {
-
-            // 如果当前位可以进1
-            if (val[i] + step < end) {
-                val[i] = +(val[i] + step).toFixed(7)
-                break
-            }
-
-            // 如果当前位不可以，那当前位归0，尝试下一位
-            else if (i < count - 1) {
-                val[i] = begin
-            }
-        }
-
-        return val
-    }
+export default function (begin: number, end: number, step: number, count: number) {
+    const val: Array<number> = []
+    for (let index = 0; index < count; index++) val[index] = begin
+
+    // 非常类似进制数，每次调用都+1
+    return function () {
+        for (let i = 0; i < count; i++) {
+
+            // 如果当前位可以进1
+            if (val[i] + step < end) {
+                val[i] = +(val[i] + step).toFixed(7)
+                break
+            }
+
+            // 如果当前位不可以，那当前位归0，尝试下一位
+            else if (i < count - 1) {
+                val[i] = begin
+            }
+        }
+
+        return val
+    }
 }

package/src/common/canvas/index.ts

@@ -20,20 +20,24 @@ class Canvas extends PainterRender {
     readonly name: string = "Canvas"
 
     private __regionList = {} //区域映射表
+    private __scaleSize
 
     // 步长由1改为10是为了优化区域计算有时候出错问题
     // 2023年7月6日 于南京
     private __regionAssemble = assemble(0, 255, 10, 3)
 
-    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null, opts: CanvasOptsType = {}) {
+    // 添加scaleSize参数是为了适配画布缩放后的处理
+    // 2024年1月17日 于南京
+    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null, opts: CanvasOptsType = {}, scaleSize = 1) {
         super(
             ViewCanvas,
             opts,
             RegionCanvas ? new PainterRender(RegionCanvas, {
                 willReadFrequently: true,
-            }) : undefined, true
+            }) : undefined, true, scaleSize
         )
 
+        this.__scaleSize = scaleSize
         this.setRegion("")
     }
 
@@ -142,8 +146,8 @@ class Canvas extends PainterRender {
     // 获取画布信息
     getInfo() {
         return {
-            width: this.painter.canvas.width,
-            height: this.painter.canvas.height
+            width: this.painter.canvas.width / this.__scaleSize,
+            height: this.painter.canvas.height / this.__scaleSize
         }
     }
 
@@ -159,6 +163,8 @@ class Canvas extends PainterRender {
 
     // 获取指定位置颜色
     getColor(x: number, y: number) {
+        x *= this.__scaleSize
+        y *= this.__scaleSize
         const currentRGBA = this.painter.getImageData(x - 0.5, y - 0.5, 1, 1).data
         return (
             "rgba(" +

package/src/common/canvas/painter.ts

@@ -65,7 +65,7 @@ class Painter {
 
     }
 
-    constructor(canvas: HTMLCanvasElement, opts: CanvasOptsType = {}, region?: Painter, isPainter = false) {
+    constructor(canvas: HTMLCanvasElement, opts: CanvasOptsType = {}, region?: Painter, isPainter = false, scaleSize = 1) {
         this.painter = canvas.getContext("2d", opts) as CanvasRenderingContext2D
         this.__region = region
         this.__isPainter = isPainter

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

@@ -1,40 +1,40 @@
-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'
+
+// 棱柱垂直部分
+
+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
+}

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

@@ -1,36 +1,36 @@
-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)]
-    }
+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)]
+    }
 }

package/src/common/setStyle.ts

@@ -1,6 +1,6 @@
-// 修改样式
-export default function (el: HTMLElement | SVGElement, styles: any) {
-    for (const key in styles) {
-        el.style[key as any] = styles[key]
-    }
+// 修改样式
+export default function (el: HTMLElement | SVGElement, styles: any) {
+    for (const key in styles) {
+        el.style[key as any] = styles[key]
+    }
 }