vislite 1.12.0 → 2.0.0-next.0

package/skills/vislite-lib/uniapp/ui-canvas.md

@@ -1,114 +1,114 @@
-# uni-app Canvas
-
-uni-app 是一个跨平台框架，VISLite Canvas 可以直接用于 uni-app 项目。
-
-## 安装
-
-```bash
-npm install vislite
-```
-
-## Web 平台使用
-
-```js
-import { Canvas } from 'vislite';
-
-export default {
-    onReady() {
-        this.painter = new Canvas(this.$refs.canvas);
-        this.painter.config({
-            fillStyle: 'red'
-        }).fillCircle(150, 75, 50);
-    }
-}
-```
-
-```html
-<template>
-    <view ref="canvas" style="width: 300px; height: 150px;"></view>
-</template>
-```
-
-## 小程序平台使用
-
-### 方式一：使用原生 Canvas
-
-uni-app 编译到微信/支付宝小程序时，可以获取原生 canvas 上下文：
-
-```js
-import { RawCanvas } from 'vislite';
-
-onLoad() {
-    uni.createSelectorQuery()
-        .select('#canvas')
-        .node()
-        .exec((res) => {
-            const canvas = res[0].node;
-            const ctx = canvas.getContext('2d');
-            const dpr = uni.getSystemInfoSync().pixelRatio;
-
-            canvas.width = 300 * dpr;
-            canvas.height = 150 * dpr;
-            ctx.scale(dpr, dpr);
-
-            this.painter = new RawCanvas({
-                getContext() { return ctx; }
-            });
-        });
-}
-```
-
-### 方式二：使用各平台组件
-
-各小程序平台也可以使用对应的 ui-canvas 组件：
-
-#### 微信小程序
-
-```json
-{
-    "usingComponents": {
-        "ui-canvas": "vislite/miniprogram/ui-canvas/index"
-    }
-}
-```
-
-#### 支付宝小程序
-
-```json
-{
-    "usingComponents": {
-        "ui-canvas": "vislite/minialipay/ui-canvas/index"
-    }
-}
-```
-
-## 跨平台注意事项
-
-### 平台差异
-
-| 功能 | H5 | 微信 | 支付宝 |
-|------|-----|------|--------|
-| new Canvas() | ✅ | ⚠️ 需用组件 | ⚠️ 需用组件 |
-| region检测 | ✅ | ⚠️ 性能差 | ⚠️ 性能差 |
-| toDataURL() | ✅ | ⚠️ 需转换 | ⚠️ 需转换 |
-
-### 建议
-
-1. **H5 优先**：核心逻辑使用 H5 Canvas 实现
-2. **平台检测**：使用 `uni.getSystemInfo()` 判断平台
-3. **降级处理**：小程序平台可关闭 region 功能提升性能
-
-```js
-import { Canvas } from 'vislite';
-
-onReady() {
-    const systemInfo = uni.getSystemInfoSync();
-
-    if (systemInfo.platform === 'h5') {
-        this.painter = new Canvas(this.$refs.canvas);
-    } else {
-        // 小程序平台使用组件
-        // ...
-    }
-}
+# uni-app Canvas
+
+uni-app 是一个跨平台框架，VISLite Canvas 可以直接用于 uni-app 项目。
+
+## 安装
+
+```bash
+npm install vislite
+```
+
+## Web 平台使用
+
+```js
+import { Canvas } from 'vislite';
+
+export default {
+    onReady() {
+        this.painter = new Canvas(this.$refs.canvas);
+        this.painter.config({
+            fillStyle: 'red'
+        }).fillCircle(150, 75, 50);
+    }
+}
+```
+
+```html
+<template>
+    <view ref="canvas" style="width: 300px; height: 150px;"></view>
+</template>
+```
+
+## 小程序平台使用
+
+### 方式一：使用原生 Canvas
+
+uni-app 编译到微信/支付宝小程序时，可以获取原生 canvas 上下文：
+
+```js
+import { RawCanvas } from 'vislite';
+
+onLoad() {
+    uni.createSelectorQuery()
+        .select('#canvas')
+        .node()
+        .exec((res) => {
+            const canvas = res[0].node;
+            const ctx = canvas.getContext('2d');
+            const dpr = uni.getSystemInfoSync().pixelRatio;
+
+            canvas.width = 300 * dpr;
+            canvas.height = 150 * dpr;
+            ctx.scale(dpr, dpr);
+
+            this.painter = new RawCanvas({
+                getContext() { return ctx; }
+            });
+        });
+}
+```
+
+### 方式二：使用各平台组件
+
+各小程序平台也可以使用对应的 ui-canvas 组件：
+
+#### 微信小程序
+
+```json
+{
+    "usingComponents": {
+        "ui-canvas": "vislite/miniprogram/ui-canvas/index"
+    }
+}
+```
+
+#### 支付宝小程序
+
+```json
+{
+    "usingComponents": {
+        "ui-canvas": "vislite/minialipay/ui-canvas/index"
+    }
+}
+```
+
+## 跨平台注意事项
+
+### 平台差异
+
+| 功能 | H5 | 微信 | 支付宝 |
+|------|-----|------|--------|
+| new Canvas() | ✅ | ⚠️ 需用组件 | ⚠️ 需用组件 |
+| region检测 | ✅ | ⚠️ 性能差 | ⚠️ 性能差 |
+| toDataURL() | ✅ | ⚠️ 需转换 | ⚠️ 需转换 |
+
+### 建议
+
+1. **H5 优先**：核心逻辑使用 H5 Canvas 实现
+2. **平台检测**：使用 `uni.getSystemInfo()` 判断平台
+3. **降级处理**：小程序平台可关闭 region 功能提升性能
+
+```js
+import { Canvas } from 'vislite';
+
+onReady() {
+    const systemInfo = uni.getSystemInfoSync();
+
+    if (systemInfo.platform === 'h5') {
+        this.painter = new Canvas(this.$refs.canvas);
+    } else {
+        // 小程序平台使用组件
+        // ...
+    }
+}
 ```

package/src/Canvas.ts

@@ -1,90 +1,90 @@
-import type CanvasType from '../types/Canvas'
-import type CanvasOptionType from '../types/CanvasOption'
-
-import OralCanvas from './common/canvas/index'
-import { initOption } from './common/option'
-
-class Canvas extends OralCanvas implements CanvasType {
-    private __canvas: HTMLCanvasElement
-    private __el: HTMLElement
-    constructor(el: HTMLElement | null, option: CanvasOptionType = {}, width: number = 0, height: number = 0) {
-        if (!el) {
-            throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
-        }
-
-        option = initOption(option, {
-
-            // 对外暴露自定义缩放倍率（为满足特殊场景，以简化使用）
-            // 2025年7月25日 于秦皇岛
-            scale: 2,
-
-            region: true,
-            willReadFrequently: false
-        })
-
-        width = width || el.clientWidth
-        height = 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 {
-            ViewCanvas = document.createElement('canvas')
-            el.appendChild(ViewCanvas)
-
-            if (option.region) {
-                RegionCanvas = document.createElement('canvas')
-            }
-
-            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
-
-            el.setAttribute('vislite', 'Canvas')
-        }
-
-        // 设置画布大小
-        const canvasArray = [RegionCanvas, ViewCanvas]
-        for (let index = 0; index < canvasArray.length; index++) {
-            const canvas = canvasArray[index]
-            if (canvas) {
-                canvas.style.width = width + "px"
-                canvas.setAttribute('width', ((index === 1 ? option.scale as number : 1) * width) + "")
-
-                canvas.style.height = height + "px"
-                canvas.setAttribute('height', ((index === 1 ? option.scale as number : 1) * height) + "")
-            }
-        }
-
-        super(ViewCanvas, RegionCanvas, {
-            willReadFrequently: option.willReadFrequently,
-        }, option.scale)
-
-        this.__canvas = ViewCanvas
-        this.__el = el
-        this.painter.scale(option.scale as number, option.scale as number)
-    }
-
-    toDataURL(type: string = "image/png", encoderOptions: number = 0.92): Promise<string> {
-        return new Promise(resolve => {
-            resolve(this.__canvas.toDataURL(type, encoderOptions))
-        })
-    }
-
-    bind(eventName: string, callback: (regionName: string, x: number, y: number) => void) {
-        this.__el.addEventListener(eventName, (event: any) => {
-            this.getRegion(event.offsetX, event.offsetY).then(regionName => {
-                callback(regionName, event.offsetX, event.offsetY)
-            })
-        })
-        return this
-    }
-}
-
+import type CanvasType from '../types/Canvas'
+import type CanvasOptionType from '../types/CanvasOption'
+
+import OralCanvas from './common/canvas/index'
+import { initOption } from './common/option'
+
+class Canvas extends OralCanvas implements CanvasType {
+    private __canvas: HTMLCanvasElement
+    private __el: HTMLElement
+    constructor(el: HTMLElement | null, option: CanvasOptionType = {}, width: number = 0, height: number = 0) {
+        if (!el) {
+            throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
+        }
+
+        option = initOption(option, {
+
+            // 对外暴露自定义缩放倍率（为满足特殊场景，以简化使用）
+            // 2025年7月25日 于秦皇岛
+            scale: 2,
+
+            region: true,
+            willReadFrequently: false
+        })
+
+        width = width || el.clientWidth
+        height = 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 {
+            ViewCanvas = document.createElement('canvas')
+            el.appendChild(ViewCanvas)
+
+            if (option.region) {
+                RegionCanvas = document.createElement('canvas')
+            }
+
+            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
+
+            el.setAttribute('vislite', 'Canvas')
+        }
+
+        // 设置画布大小
+        const canvasArray = [RegionCanvas, ViewCanvas]
+        for (let index = 0; index < canvasArray.length; index++) {
+            const canvas = canvasArray[index]
+            if (canvas) {
+                canvas.style.width = width + "px"
+                canvas.setAttribute('width', ((index === 1 ? option.scale as number : 1) * width) + "")
+
+                canvas.style.height = height + "px"
+                canvas.setAttribute('height', ((index === 1 ? option.scale as number : 1) * height) + "")
+            }
+        }
+
+        super(ViewCanvas, RegionCanvas, {
+            willReadFrequently: option.willReadFrequently,
+        }, option.scale)
+
+        this.__canvas = ViewCanvas
+        this.__el = el
+        this.painter.scale(option.scale as number, option.scale as number)
+    }
+
+    toDataURL(type: string = "image/png", encoderOptions: number = 0.92): Promise<string> {
+        return new Promise(resolve => {
+            resolve(this.__canvas.toDataURL(type, encoderOptions))
+        })
+    }
+
+    bind(eventName: string, callback: (regionName: string, x: number, y: number) => void) {
+        this.__el.addEventListener(eventName, (event: any) => {
+            this.getRegion(event.offsetX, event.offsetY).then(regionName => {
+                callback(regionName, event.offsetX, event.offsetY)
+            })
+        })
+        return this
+    }
+}
+
 export default Canvas

package/src/Eoap.ts

@@ -1,66 +1,66 @@
-import type MapType from '../types/Map'
-
-// 围绕X轴旋转
-const rotateX = function (deg: number, x: number, y: number, z: number) {
-    const cos = Math.cos(deg), sin = Math.sin(deg)
-    return [x, y * cos - z * sin, y * sin + z * cos]
-}
-
-// 围绕Y轴旋转
-const rotateY = function (deg: number, x: number, y: number, z: number) {
-    const cos = Math.cos(deg), sin = Math.sin(deg)
-    return [z * sin + x * cos, y, z * cos - x * sin]
-}
-
-// 围绕Z轴旋转
-const rotateZ = function (deg: number, x: number, y: number, z: number) {
-    const cos = Math.cos(deg), sin = Math.sin(deg)
-    return [x * cos - y * sin, x * sin + y * cos, z]
-}
-
-/* 等角斜方位投影 */
-class Eoap implements MapType {
-    readonly name: string = 'Eoap'
-
-    private __scale: number // 缩放比例
-    private __center: number[] // 投影中心经纬度
-
-    constructor(scale: number = 7, center: number[] = [107, 36]) {
-        this.__scale = scale
-        this.__center = center
-    }
-
-    use(λ: number, φ: number): [number, number, number] {
-        /**
-         * 通过旋转的方法
-         * 先旋转出点的位置
-         * 然后根据把地心到旋转中心的这条射线变成OZ这条射线的变换应用到初始化点上
-         * 这样求的的点的x,y就是最终结果
-         *
-         *  计算过程：
-         *  1.初始化点的位置是p（x,0,0）,其中x的值是地球半径除以缩放倍速
-         *  2.根据点的纬度对p进行旋转，旋转后得到的p的坐标纬度就是目标纬度
-         *  3.同样的对此刻的p进行经度的旋转，这样就获取了极点作为中心点的坐标
-         *  4.接着想象一下为了让旋转中心移动到极点需要进行旋转的经纬度是多少，记为lo和la
-         *  5.然后再对p进行经度度旋转lo获得新的p
-         *  6.然后再对p进行纬度旋转la获得新的p
-         *  7.旋转结束
-         *
-         * 特别注意：第5和第6步顺序一定不可以调换，原因来自经纬度定义上
-         * 【除了经度为0的位置，不然纬度的旋转会改变原来的经度值，反过来不会】
-         *
-         */
-        let p = rotateY((360 - φ) / 180 * Math.PI, 100 * this.__scale, 0, 0)
-        p = rotateZ(λ / 180 * Math.PI, p[0], p[1], p[2])
-        p = rotateZ((90 - this.__center[0]) / 180 * Math.PI, p[0], p[1], p[2])
-        p = rotateX((90 - this.__center[1]) / 180 * Math.PI, p[0], p[1], p[2])
-
-        return [
-            -p[0], // 加负号是因为浏览器坐标和地图不一样
-            p[1],
-            p[2]
-        ]
-    }
-}
-
-export default Eoap
+import type MapType from '../types/Map'
+
+// 围绕X轴旋转
+const rotateX = function (deg: number, x: number, y: number, z: number) {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
+    return [x, y * cos - z * sin, y * sin + z * cos]
+}
+
+// 围绕Y轴旋转
+const rotateY = function (deg: number, x: number, y: number, z: number) {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
+    return [z * sin + x * cos, y, z * cos - x * sin]
+}
+
+// 围绕Z轴旋转
+const rotateZ = function (deg: number, x: number, y: number, z: number) {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
+    return [x * cos - y * sin, x * sin + y * cos, z]
+}
+
+/* 等角斜方位投影 */
+class Eoap implements MapType {
+    readonly name: string = 'Eoap'
+
+    private __scale: number // 缩放比例
+    private __center: number[] // 投影中心经纬度
+
+    constructor(scale: number = 7, center: number[] = [107, 36]) {
+        this.__scale = scale
+        this.__center = center
+    }
+
+    use(λ: number, φ: number): [number, number, number] {
+        /**
+         * 通过旋转的方法
+         * 先旋转出点的位置
+         * 然后根据把地心到旋转中心的这条射线变成OZ这条射线的变换应用到初始化点上
+         * 这样求的的点的x,y就是最终结果
+         *
+         *  计算过程：
+         *  1.初始化点的位置是p（x,0,0）,其中x的值是地球半径除以缩放倍速
+         *  2.根据点的纬度对p进行旋转，旋转后得到的p的坐标纬度就是目标纬度
+         *  3.同样的对此刻的p进行经度的旋转，这样就获取了极点作为中心点的坐标
+         *  4.接着想象一下为了让旋转中心移动到极点需要进行旋转的经纬度是多少，记为lo和la
+         *  5.然后再对p进行经度度旋转lo获得新的p
+         *  6.然后再对p进行纬度旋转la获得新的p
+         *  7.旋转结束
+         *
+         * 特别注意：第5和第6步顺序一定不可以调换，原因来自经纬度定义上
+         * 【除了经度为0的位置，不然纬度的旋转会改变原来的经度值，反过来不会】
+         *
+         */
+        let p = rotateY((360 - φ) / 180 * Math.PI, 100 * this.__scale, 0, 0)
+        p = rotateZ(λ / 180 * Math.PI, p[0], p[1], p[2])
+        p = rotateZ((90 - this.__center[0]) / 180 * Math.PI, p[0], p[1], p[2])
+        p = rotateX((90 - this.__center[1]) / 180 * Math.PI, p[0], p[1], p[2])
+
+        return [
+            -p[0], // 加负号是因为浏览器坐标和地图不一样
+            p[1],
+            p[2]
+        ]
+    }
+}
+
+export default Eoap