vislite 1.12.0-alpha.0 → 1.12.0

package/skills/vislite-lib/WebGL.md

@@ -1,107 +1,107 @@
-# WebGL API
-
-WebGL 相关模块，用于 3D 图形渲染。**仅支持 H5 端**。
-
-## 获取 WebGL 上下文
-
-```js
-import { getWebGLContext } from 'vislite';
-
-var canvas = document.getElementById('canvas');
-var gl = getWebGLContext(canvas, scale, {
-    preserveDrawingBuffer: true
-}, 'scaleToFill');
-```
-
-### 参数说明
-
-- **canvas**: HTMLCanvasElement
-- **scale**: 缩放比例，默认1
-- **opts**: 配置项
-  - `preserveDrawingBuffer`: 是否保留绘制缓冲区
-- **mode**: 缩放模式
-  - `scaleToFill`: 拉伸填充
-  - `aspectFit`: 适应（保持比例）
-  - `aspectFill`: 覆盖（保持比例）
-
-### 返回值
-
-返回 `WebGL2RenderingContext` 对象。
-
-## Shader (着色器)
-
-```js
-import { Shader } from 'vislite';
-
-var shader = new Shader(gl, {
-    vertexShader: '...',      // 顶点着色器源码
-    fragmentShader: '...'      // 片元着色器源码
-});
-
-shader.use();
-```
-
-### 方法
-
-- `use()`: 使用该着色器程序
-- `setAttribute(name, data)`: 设置顶点属性
-- `setUniform(name, type, value)`: 设置 uniform 变量
-
-## Buffer (缓冲区)
-
-```js
-import { Buffer } from 'vislite';
-
-var buffer = new Buffer(gl);
-buffer.setAttribute('position', data);
-buffer.bind();
-```
-
-## Texture (纹理)
-
-```js
-import { Texture } from 'vislite';
-
-var texture = new Texture(gl);
-texture.bind();
-texture.setImage(image);
-texture.setParameter(params);
-```
-
-## 使用示例
-
-```js
-import { getWebGLContext, Shader, Buffer, Texture } from 'vislite';
-
-var gl = getWebGLContext(canvas, 1);
-
-// 创建着色器
-var shader = new Shader(gl, {
-    vertexShader: `
-        attribute vec4 position;
-        void main() {
-            gl_Position = position;
-        }
-    `,
-    fragmentShader: `
-        precision mediump float;
-        void main() {
-            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
-        }
-    `
-});
-
-shader.use();
-
-// 创建缓冲区
-var buffer = new Buffer(gl);
-buffer.setAttribute('position', new Float32Array([
-    0, 0.5, 0,
-    -0.5, -0.5, 0,
-    0.5, -0.5, 0
-]));
-buffer.bind();
-
-// 绘制
-gl.drawArrays(gl.TRIANGLES, 0, 3);
+# WebGL API
+
+WebGL 相关模块，用于 3D 图形渲染。**仅支持 H5 端**。
+
+## 获取 WebGL 上下文
+
+```js
+import { getWebGLContext } from 'vislite';
+
+var canvas = document.getElementById('canvas');
+var gl = getWebGLContext(canvas, scale, {
+    preserveDrawingBuffer: true
+}, 'scaleToFill');
+```
+
+### 参数说明
+
+- **canvas**: HTMLCanvasElement
+- **scale**: 缩放比例，默认1
+- **opts**: 配置项
+  - `preserveDrawingBuffer`: 是否保留绘制缓冲区
+- **mode**: 缩放模式
+  - `scaleToFill`: 拉伸填充
+  - `aspectFit`: 适应（保持比例）
+  - `aspectFill`: 覆盖（保持比例）
+
+### 返回值
+
+返回 `WebGL2RenderingContext` 对象。
+
+## Shader (着色器)
+
+```js
+import { Shader } from 'vislite';
+
+var shader = new Shader(gl, {
+    vertexShader: '...',      // 顶点着色器源码
+    fragmentShader: '...'      // 片元着色器源码
+});
+
+shader.use();
+```
+
+### 方法
+
+- `use()`: 使用该着色器程序
+- `setAttribute(name, data)`: 设置顶点属性
+- `setUniform(name, type, value)`: 设置 uniform 变量
+
+## Buffer (缓冲区)
+
+```js
+import { Buffer } from 'vislite';
+
+var buffer = new Buffer(gl);
+buffer.setAttribute('position', data);
+buffer.bind();
+```
+
+## Texture (纹理)
+
+```js
+import { Texture } from 'vislite';
+
+var texture = new Texture(gl);
+texture.bind();
+texture.setImage(image);
+texture.setParameter(params);
+```
+
+## 使用示例
+
+```js
+import { getWebGLContext, Shader, Buffer, Texture } from 'vislite';
+
+var gl = getWebGLContext(canvas, 1);
+
+// 创建着色器
+var shader = new Shader(gl, {
+    vertexShader: `
+        attribute vec4 position;
+        void main() {
+            gl_Position = position;
+        }
+    `,
+    fragmentShader: `
+        precision mediump float;
+        void main() {
+            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+        }
+    `
+});
+
+shader.use();
+
+// 创建缓冲区
+var buffer = new Buffer(gl);
+buffer.setAttribute('position', new Float32Array([
+    0, 0.5, 0,
+    -0.5, -0.5, 0,
+    0.5, -0.5, 0
+]));
+buffer.bind();
+
+// 绘制
+gl.drawArrays(gl.TRIANGLES, 0, 3);
 ```

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

@@ -1,96 +1,96 @@
-# 支付宝小程序 Canvas
-
-支付宝小程序使用自定义组件方式接入 VISLite Canvas。
-
-## 安装
-
-在支付宝小程序项目中引入 vislite：
-
-```bash
-npm install vislite
-```
-
-## 使用方式
-
-### 在小程序配置中引入
-
-```json
-{
-  "usingComponents": {
-    "ui-canvas": "vislite/minialipay/ui-canvas/index"
-  }
-}
-```
-
-### 在页面中使用
-
-```xml
-<ui-canvas
-  id="canvas"
-  width="300"
-  height="150"
-  region="{{true}}"
-  onDoTouchstart="onTouchstart"
-/>
-```
-
-### 在 JS 中获取画笔
-
-```js
-Page({
-    onLoad() {
-        this.selectComponent('#canvas').fetch().then(painter => {
-            this.painter = painter;
-
-            // 使用画笔
-            this.painter.config({
-                fillStyle: 'red'
-            }).fillCircle(150, 75, 50);
-        });
-    },
-
-    onTouchstart(e) {
-        console.log('区域:', e.detail.name);
-        console.log('坐标:', e.detail.x, e.detail.y);
-    }
-});
-```
-
-## 组件属性
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| width | Number | 300 | 画布宽度 |
-| height | Number | 150 | 画布高度 |
-| region | Boolean | true | 是否启用区域检测 |
-| onDoTouchstart | Function | - | 点击事件回调 |
-
-## 事件详情
-
-### onDoTouchstart
-
-当用户点击画布时触发，返回对象包含：
-
-```js
-{
-    name: '区域名称',  // 通过 setRegion 设置的区域名
-    x: 100,          // 点击x坐标
-    y: 50            // 点击y坐标
-}
-```
-
-## 注意事项
-
-1. 支付宝小程序的 Canvas 上下文获取方式与 Web 不同
-2. 需要使用 `my.createSelectorQuery()` 获取 canvas 节点
-3. 区域检测功能依赖透明度拾取，可能影响性能
-4. 导出图片使用 `toDataURL()` 方法会返回临时文件路径
-
-## 与 Web 版的差异
-
-| 功能 | Web版 | 支付宝小程序版 |
-|------|-------|---------------|
-| 初始化 | `new Canvas(el)` | 组件 + `fetch()` |
-| 事件绑定 | `bind('click', cb)` | 组件 `onDoTouchstart` |
-| 导出 | `toDataURL()` base64 | `toDataURL()` 临时路径 |
+# 支付宝小程序 Canvas
+
+支付宝小程序使用自定义组件方式接入 VISLite Canvas。
+
+## 安装
+
+在支付宝小程序项目中引入 vislite：
+
+```bash
+npm install vislite
+```
+
+## 使用方式
+
+### 在小程序配置中引入
+
+```json
+{
+  "usingComponents": {
+    "ui-canvas": "vislite/minialipay/ui-canvas/index"
+  }
+}
+```
+
+### 在页面中使用
+
+```xml
+<ui-canvas
+  id="canvas"
+  width="300"
+  height="150"
+  region="{{true}}"
+  onDoTouchstart="onTouchstart"
+/>
+```
+
+### 在 JS 中获取画笔
+
+```js
+Page({
+    onLoad() {
+        this.selectComponent('#canvas').fetch().then(painter => {
+            this.painter = painter;
+
+            // 使用画笔
+            this.painter.config({
+                fillStyle: 'red'
+            }).fillCircle(150, 75, 50);
+        });
+    },
+
+    onTouchstart(e) {
+        console.log('区域:', e.detail.name);
+        console.log('坐标:', e.detail.x, e.detail.y);
+    }
+});
+```
+
+## 组件属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| width | Number | 300 | 画布宽度 |
+| height | Number | 150 | 画布高度 |
+| region | Boolean | true | 是否启用区域检测 |
+| onDoTouchstart | Function | - | 点击事件回调 |
+
+## 事件详情
+
+### onDoTouchstart
+
+当用户点击画布时触发，返回对象包含：
+
+```js
+{
+    name: '区域名称',  // 通过 setRegion 设置的区域名
+    x: 100,          // 点击x坐标
+    y: 50            // 点击y坐标
+}
+```
+
+## 注意事项
+
+1. 支付宝小程序的 Canvas 上下文获取方式与 Web 不同
+2. 需要使用 `my.createSelectorQuery()` 获取 canvas 节点
+3. 区域检测功能依赖透明度拾取，可能影响性能
+4. 导出图片使用 `toDataURL()` 方法会返回临时文件路径
+
+## 与 Web 版的差异
+
+| 功能 | Web版 | 支付宝小程序版 |
+|------|-------|---------------|
+| 初始化 | `new Canvas(el)` | 组件 + `fetch()` |
+| 事件绑定 | `bind('click', cb)` | 组件 `onDoTouchstart` |
+| 导出 | `toDataURL()` base64 | `toDataURL()` 临时路径 |
 | 区域检测 | 自动绑定 | 需要组件属性开启 |

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

@@ -1,99 +1,99 @@
-# 微信小程序 Canvas
-
-微信小程序使用自定义组件方式接入 VISLite Canvas。
-
-## 安装
-
-在微信小程序项目中引入 vislite：
-
-```bash
-npm install vislite
-```
-
-## 使用方式
-
-### 在小程序配置中引入
-
-```json
-{
-  "usingComponents": {
-    "ui-canvas": "vislite/miniprogram/ui-canvas/index"
-  }
-}
-```
-
-### 在页面中使用
-
-```xml
-<ui-canvas
-  id="canvas"
-  width="300"
-  height="150"
-  region="{{true}}"
-  bind:dotouchstart="onTouchstart"
-/>
-```
-
-### 在 JS 中获取画笔
-
-```js
-Component({
-    lifetimes: {
-        ready() {
-            this.selectComponent('#canvas').fetch().then(painter => {
-                this.painter = painter;
-
-                // 使用画笔
-                this.painter.config({
-                    fillStyle: 'red'
-                }).fillCircle(150, 75, 50);
-            });
-        }
-    },
-
-    methods: {
-        onTouchstart(e) {
-            console.log('区域:', e.detail.name);
-            console.log('坐标:', e.detail.x, e.detail.y);
-        }
-    }
-});
-```
-
-## 组件属性
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| width | Number | 300 | 画布宽度 |
-| height | Number | 150 | 画布高度 |
-| region | Boolean | true | 是否启用区域检测 |
-
-## 事件
-
-### dotouchstart
-
-当用户点击画布时触发，返回对象包含：
-
-```js
-{
-    name: '区域名称',  // 通过 setRegion 设置的区域名
-    x: 100,          // 点击x坐标
-    y: 50            // 点击y坐标
-}
-```
-
-## 注意事项
-
-1. 微信小程序使用 `wx.createSelectorQuery()` 获取 canvas 节点
-2. 需要处理高清屏的 dpr（设备像素比）缩放
-3. 导出图片需要使用 `wx.canvasToTempFilePath` 转换
-4. 区域检测依赖 `getImageData`，可能存在性能问题
-
-## 与 Web 版的差异
-
-| 功能 | Web版 | 微信小程序版 |
-|------|-------|------------|
-| 初始化 | `new Canvas(el)` | 组件 + `fetch()` |
-| 事件绑定 | `bind('click', cb)` | 组件 `bind:dotouchstart` |
-| 导出 | `toDataURL()` base64 | `toDataURL()` 需转换 |
+# 微信小程序 Canvas
+
+微信小程序使用自定义组件方式接入 VISLite Canvas。
+
+## 安装
+
+在微信小程序项目中引入 vislite：
+
+```bash
+npm install vislite
+```
+
+## 使用方式
+
+### 在小程序配置中引入
+
+```json
+{
+  "usingComponents": {
+    "ui-canvas": "vislite/miniprogram/ui-canvas/index"
+  }
+}
+```
+
+### 在页面中使用
+
+```xml
+<ui-canvas
+  id="canvas"
+  width="300"
+  height="150"
+  region="{{true}}"
+  bind:dotouchstart="onTouchstart"
+/>
+```
+
+### 在 JS 中获取画笔
+
+```js
+Component({
+    lifetimes: {
+        ready() {
+            this.selectComponent('#canvas').fetch().then(painter => {
+                this.painter = painter;
+
+                // 使用画笔
+                this.painter.config({
+                    fillStyle: 'red'
+                }).fillCircle(150, 75, 50);
+            });
+        }
+    },
+
+    methods: {
+        onTouchstart(e) {
+            console.log('区域:', e.detail.name);
+            console.log('坐标:', e.detail.x, e.detail.y);
+        }
+    }
+});
+```
+
+## 组件属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| width | Number | 300 | 画布宽度 |
+| height | Number | 150 | 画布高度 |
+| region | Boolean | true | 是否启用区域检测 |
+
+## 事件
+
+### dotouchstart
+
+当用户点击画布时触发，返回对象包含：
+
+```js
+{
+    name: '区域名称',  // 通过 setRegion 设置的区域名
+    x: 100,          // 点击x坐标
+    y: 50            // 点击y坐标
+}
+```
+
+## 注意事项
+
+1. 微信小程序使用 `wx.createSelectorQuery()` 获取 canvas 节点
+2. 需要处理高清屏的 dpr（设备像素比）缩放
+3. 导出图片需要使用 `wx.canvasToTempFilePath` 转换
+4. 区域检测依赖 `getImageData`，可能存在性能问题
+
+## 与 Web 版的差异
+
+| 功能 | Web版 | 微信小程序版 |
+|------|-------|------------|
+| 初始化 | `new Canvas(el)` | 组件 + `fetch()` |
+| 事件绑定 | `bind('click', cb)` | 组件 `bind:dotouchstart` |
+| 导出 | `toDataURL()` base64 | `toDataURL()` 需转换 |
 | dpr处理 | 需手动处理 | 组件自动处理 |