vislite 1.12.0 → 1.12.1

package/skills/vislite-lib/BarLayout.md

@@ -1,118 +1,118 @@
-# BarLayout 柱状图布局
-
-BarLayout 用于绘制柱状图/条形图。
-
-## 引入
-
-```js
-import { BarLayout } from 'vislite';
-```
-
-## 初始化
-
-```js
-var barLayout = new BarLayout();
-```
-
-## setOption 设置布局行为
-
-```js
-barLayout.setOption({
-    x: 50,              // 左上角x坐标
-    y: 350,             // 左上角y坐标
-    width: 400,         // 宽度
-    height: 300,        // 高度
-    category: 'xAxis',  // 分类轴：xAxis|yAxis
-    duration: 200       // 动画时长(ms)
-});
-```
-
-### category 方向
-
-- **xAxis**: 分类在x轴，柱状图从下往上
-- **yAxis**: 分类在y轴，条形图从左往右
-
-## use 坐标计算
-
-### 一维数据
-
-```js
-var data = {
-    category: ['HTML', 'CSS', 'JS'],
-    data: [30, 20, 50]
-};
-var bar = barLayout.use(data);
-```
-
-### 二维数据（分组柱状图）
-
-```js
-var data = {
-    category: ['HTML', 'CSS', 'JS'],
-    value: [
-        { name: '男生', data: [30, 20, 50] },
-        { name: '女生', data: [25, 30, 40] }
-    ]
-};
-var bar = barLayout.use(data);
-```
-
-### 返回值 bar 结构
-
-```js
-{
-    coordinate: {
-        x, y, width, height,    // 坐标系位置
-        xAxis: { type: 'category' | 'value', data: [...] },
-        yAxis: { type: 'category' | 'value', data: [...] }
-    },
-    node: [
-        {
-            name: '分组名称',     // 分组柱状图时有效
-            bar: [
-                {
-                    x, y, width, height,  // 矩形位置
-                    value: 数值
-                }
-            ]
-        }
-    ]
-}
-```
-
-## 使用示例
-
-```js
-var barLayout = new BarLayout();
-
-barLayout.setOption({
-    x: 50,
-    y: 350,
-    width: 400,
-    height: 300,
-    category: 'xAxis'
-});
-
-var data = {
-    category: ['HTML', 'CSS', 'JavaScript'],
-    data: [30, 20, 50]
-};
-
-var bar = barLayout.use(data);
-
-// 绘制坐标系
-painter.config({ strokeStyle: 'black' })
-    .beginPath()
-    .moveTo(bar.coordinate.x, bar.coordinate.y)
-    .lineTo(bar.coordinate.x + bar.coordinate.width, bar.coordinate.y)
-    .lineTo(bar.coordinate.x + bar.coordinate.width, bar.coordinate.y - bar.coordinate.height)
-    .stroke();
-
-// 绘制柱状图
-var colors = ['red', 'green', 'blue'];
-for (var i = 0; i < bar.node[0].bar.length; i++) {
-    var rect = bar.node[0].bar[i];
-    painter.config({ fillStyle: colors[i] })
-        .fillRect(rect.x, rect.y, rect.width, rect.height);
-}
+# BarLayout 柱状图布局
+
+BarLayout 用于绘制柱状图/条形图。
+
+## 引入
+
+```js
+import { BarLayout } from 'vislite';
+```
+
+## 初始化
+
+```js
+var barLayout = new BarLayout();
+```
+
+## setOption 设置布局行为
+
+```js
+barLayout.setOption({
+    x: 50,              // 左上角x坐标
+    y: 350,             // 左上角y坐标
+    width: 400,         // 宽度
+    height: 300,        // 高度
+    category: 'xAxis',  // 分类轴：xAxis|yAxis
+    duration: 200       // 动画时长(ms)
+});
+```
+
+### category 方向
+
+- **xAxis**: 分类在x轴，柱状图从下往上
+- **yAxis**: 分类在y轴，条形图从左往右
+
+## use 坐标计算
+
+### 一维数据
+
+```js
+var data = {
+    category: ['HTML', 'CSS', 'JS'],
+    data: [30, 20, 50]
+};
+var bar = barLayout.use(data);
+```
+
+### 二维数据（分组柱状图）
+
+```js
+var data = {
+    category: ['HTML', 'CSS', 'JS'],
+    value: [
+        { name: '男生', data: [30, 20, 50] },
+        { name: '女生', data: [25, 30, 40] }
+    ]
+};
+var bar = barLayout.use(data);
+```
+
+### 返回值 bar 结构
+
+```js
+{
+    coordinate: {
+        x, y, width, height,    // 坐标系位置
+        xAxis: { type: 'category' | 'value', data: [...] },
+        yAxis: { type: 'category' | 'value', data: [...] }
+    },
+    node: [
+        {
+            name: '分组名称',     // 分组柱状图时有效
+            bar: [
+                {
+                    x, y, width, height,  // 矩形位置
+                    value: 数值
+                }
+            ]
+        }
+    ]
+}
+```
+
+## 使用示例
+
+```js
+var barLayout = new BarLayout();
+
+barLayout.setOption({
+    x: 50,
+    y: 350,
+    width: 400,
+    height: 300,
+    category: 'xAxis'
+});
+
+var data = {
+    category: ['HTML', 'CSS', 'JavaScript'],
+    data: [30, 20, 50]
+};
+
+var bar = barLayout.use(data);
+
+// 绘制坐标系
+painter.config({ strokeStyle: 'black' })
+    .beginPath()
+    .moveTo(bar.coordinate.x, bar.coordinate.y)
+    .lineTo(bar.coordinate.x + bar.coordinate.width, bar.coordinate.y)
+    .lineTo(bar.coordinate.x + bar.coordinate.width, bar.coordinate.y - bar.coordinate.height)
+    .stroke();
+
+// 绘制柱状图
+var colors = ['red', 'green', 'blue'];
+for (var i = 0; i < bar.node[0].bar.length; i++) {
+    var rect = bar.node[0].bar[i];
+    painter.config({ fillStyle: colors[i] })
+        .fillRect(rect.x, rect.y, rect.width, rect.height);
+}
 ```

package/skills/vislite-lib/Canvas.md

@@ -1,184 +1,184 @@
-# Canvas 画笔 API
-
-Canvas 是 VISLite 的核心画笔之一，**绘制 API 完全一致**，但初始化方式因平台而异。
-
-## 平台初始化方式
-
-### H5 端
-
-```js
-import { Canvas } from 'vislite';
-
-var painter = new Canvas(document.getElementById('root'), {
-    scale: 2,              // 缩放倍率，默认2
-    region: true,          // 是否启用区域检测，默认true
-    willReadFrequently: false
-}, width, height);
-```
-
-### 微信/支付宝小程序
-
-小程序端需要使用 ui-canvas 组件，详见：
-- [微信小程序 Canvas](miniprogram/ui-canvas.md)
-- [支付宝小程序 Canvas](minialipay/ui-canvas.md)
-
-### uni-app
-
-uni-app 根据编译目标平台选择上述方式，详见：
-- [uni-app Canvas](uniapp/ui-canvas.md)
-
-## 配置项 (config)
-
-```js
-painter.config({
-    fillStyle: 'red',           // 填充色
-    strokeStyle: 'black',       // 轮廓色
-    lineWidth: 1,               // 线宽
-    lineCap: 'butt',            // 线端点类型：butt|round|square
-    lineJoin: 'miter',          // 线拐角：miter|bevel|round
-    lineDash: [],               // 虚线样式
-    textAlign: 'left',          // 文字水平对齐：left|center|right
-    textBaseline: 'middle',     // 文字垂直对齐：middle|top|bottom
-    shadowBlur: 0,              // 阴影模糊
-    shadowColor: 'black',       // 阴影颜色
-    fontSize: 16,               // 字体大小
-    fontFamily: 'sans-serif',   // 字体
-    fontWeight: 400,            // 字重
-    fontStyle: 'normal',        // 字类型
-    arcStartCap: 'butt',       // 圆弧开始端闭合：butt|round|-round
-    arcEndCap: 'butt',          // 圆弧结束端闭合
-    rectRadius: [10, 10, 10, 10] // 矩形圆角
-});
-```
-
-### 渐变色
-
-```js
-// 线性渐变
-var gradient = painter.createLinearGradient(x1, y1, x2, y2);
-gradient.setColor(0, 'red').setColor(1, 'blue');
-painter.config({ fillStyle: gradient.value() });
-
-// 环形渐变
-var gradient = painter.createRadialGradient(cx, cy, r1, r2);
-gradient.setColor(0, 'red').setColor(1, 'blue');
-
-// 角度渐变 (1.2.0+)
-var gradient = painter.createConicGradient(cx, cy, beginDeg, deg);
-gradient.setColor(0, 'red').setColor(1, 'blue');
-```
-
-## 文字绘制
-
-```js
-painter.fillText(text, x, y, deg);       // 填充文字
-painter.strokeText(text, x, y, deg);     // 轮廓文字
-painter.fullText(text, x, y, deg);        // 填充+轮廓文字
-
-// 多行文字
-painter.fillTexts(contents, x, y, width, lineHeight, deg);
-painter.strokeTexts(contents, x, y, width, lineHeight, deg);
-painter.fullTexts(contents, x, y, width, lineHeight, deg);
-
-// 计算文字宽度
-painter.textWidth(text);
-```
-
-## 路径操作
-
-```js
-painter.beginPath();    // 开始路径
-painter.closePath();    // 闭合路径
-painter.moveTo(x, y);   // 移动起点
-painter.lineTo(x, y);   // 画线
-painter.arc(x, y, r, beginDeg, deg);  // 圆弧
-painter.quadraticCurveTo(cpx, cpy, x, y);  // 二次贝塞尔
-painter.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);  // 三次贝塞尔
-painter.fill();         // 填充
-painter.stroke();       // 描边
-painter.full();         // 填充+描边
-painter.clip();         // 裁剪
-```
-
-## 画布操作
-
-```js
-painter.save();         // 保存状态
-painter.restore();      // 恢复状态
-painter.clearRect(x, y, w, h);  // 清除矩形区域
-painter.clearCircle(cx, cy, r); // 清除圆形区域
-
-// 缩放
-painter.scale(x, y);
-
-// 获取画布信息
-painter.getInfo();  // { width, height }
-
-// 获取原始画布上下文
-painter.getContext();  // CanvasRenderingContext2D
-```
-
-## 区域交互
-
-```js
-// 设置当前绑定的区域名称
-painter.setRegion('regionName');
-
-// 获取点击所在的区域名称
-painter.getRegion(x, y).then(regionName => {
-    console.log(regionName);
-});
-
-// 绑定点击事件
-painter.bind('click', (regionName, x, y) => {
-    console.log(regionName, x, y);
-});
-
-// 只绘制区域（用于交互检测）
-painter.onlyRegion(true);
-
-// 只绘制视图
-painter.onlyView(true);
-```
-
-## 图形绘制（便捷方法）
-
-```js
-// 圆
-painter.fillCircle(x, y, r);      // 填充圆
-painter.strokeCircle(x, y, r);    // 描边圆
-painter.fullCircle(x, y, r);      // 填充+描边圆
-
-// 矩形
-painter.fillRect(x, y, w, h);
-painter.strokeRect(x, y, w, h);
-painter.fullRect(x, y, w, h);
-
-// 圆环 (1.1.0+)
-painter.fillRing(x, y, r1, r2);
-painter.strokeRing(x, y, r1, r2);
-painter.fullRing(x, y, r1, r2);
-
-// 椭圆 (1.1.0+)
-painter.fillEllipse(x, y, r1, r2, deg);
-painter.strokeEllipse(x, y, r1, r2, deg);
-```
-
-## 导出
-
-```js
-// 导出为图片
-painter.toDataURL(type, encoderOptions).then(dataUrl => {
-    // dataUrl 即为 base64 图片
-});
-```
-
-## 重置
-
-```js
-// 重置为默认配置
-painter.reset();
-
-// 带自定义配置重置
-painter.reset({ fillStyle: 'blue', fontSize: 20 });
+# Canvas 画笔 API
+
+Canvas 是 VISLite 的核心画笔之一，**绘制 API 完全一致**，但初始化方式因平台而异。
+
+## 平台初始化方式
+
+### H5 端
+
+```js
+import { Canvas } from 'vislite';
+
+var painter = new Canvas(document.getElementById('root'), {
+    scale: 2,              // 缩放倍率，默认2
+    region: true,          // 是否启用区域检测，默认true
+    willReadFrequently: false
+}, width, height);
+```
+
+### 微信/支付宝小程序
+
+小程序端需要使用 ui-canvas 组件，详见：
+- [微信小程序 Canvas](miniprogram/ui-canvas.md)
+- [支付宝小程序 Canvas](minialipay/ui-canvas.md)
+
+### uni-app
+
+uni-app 根据编译目标平台选择上述方式，详见：
+- [uni-app Canvas](uniapp/ui-canvas.md)
+
+## 配置项 (config)
+
+```js
+painter.config({
+    fillStyle: 'red',           // 填充色
+    strokeStyle: 'black',       // 轮廓色
+    lineWidth: 1,               // 线宽
+    lineCap: 'butt',            // 线端点类型：butt|round|square
+    lineJoin: 'miter',          // 线拐角：miter|bevel|round
+    lineDash: [],               // 虚线样式
+    textAlign: 'left',          // 文字水平对齐：left|center|right
+    textBaseline: 'middle',     // 文字垂直对齐：middle|top|bottom
+    shadowBlur: 0,              // 阴影模糊
+    shadowColor: 'black',       // 阴影颜色
+    fontSize: 16,               // 字体大小
+    fontFamily: 'sans-serif',   // 字体
+    fontWeight: 400,            // 字重
+    fontStyle: 'normal',        // 字类型
+    arcStartCap: 'butt',       // 圆弧开始端闭合：butt|round|-round
+    arcEndCap: 'butt',          // 圆弧结束端闭合
+    rectRadius: [10, 10, 10, 10] // 矩形圆角
+});
+```
+
+### 渐变色
+
+```js
+// 线性渐变
+var gradient = painter.createLinearGradient(x1, y1, x2, y2);
+gradient.setColor(0, 'red').setColor(1, 'blue');
+painter.config({ fillStyle: gradient.value() });
+
+// 环形渐变
+var gradient = painter.createRadialGradient(cx, cy, r1, r2);
+gradient.setColor(0, 'red').setColor(1, 'blue');
+
+// 角度渐变 (1.2.0+)
+var gradient = painter.createConicGradient(cx, cy, beginDeg, deg);
+gradient.setColor(0, 'red').setColor(1, 'blue');
+```
+
+## 文字绘制
+
+```js
+painter.fillText(text, x, y, deg);       // 填充文字
+painter.strokeText(text, x, y, deg);     // 轮廓文字
+painter.fullText(text, x, y, deg);        // 填充+轮廓文字
+
+// 多行文字
+painter.fillTexts(contents, x, y, width, lineHeight, deg);
+painter.strokeTexts(contents, x, y, width, lineHeight, deg);
+painter.fullTexts(contents, x, y, width, lineHeight, deg);
+
+// 计算文字宽度
+painter.textWidth(text);
+```
+
+## 路径操作
+
+```js
+painter.beginPath();    // 开始路径
+painter.closePath();    // 闭合路径
+painter.moveTo(x, y);   // 移动起点
+painter.lineTo(x, y);   // 画线
+painter.arc(x, y, r, beginDeg, deg);  // 圆弧
+painter.quadraticCurveTo(cpx, cpy, x, y);  // 二次贝塞尔
+painter.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);  // 三次贝塞尔
+painter.fill();         // 填充
+painter.stroke();       // 描边
+painter.full();         // 填充+描边
+painter.clip();         // 裁剪
+```
+
+## 画布操作
+
+```js
+painter.save();         // 保存状态
+painter.restore();      // 恢复状态
+painter.clearRect(x, y, w, h);  // 清除矩形区域
+painter.clearCircle(cx, cy, r); // 清除圆形区域
+
+// 缩放
+painter.scale(x, y);
+
+// 获取画布信息
+painter.getInfo();  // { width, height }
+
+// 获取原始画布上下文
+painter.getContext();  // CanvasRenderingContext2D
+```
+
+## 区域交互
+
+```js
+// 设置当前绑定的区域名称
+painter.setRegion('regionName');
+
+// 获取点击所在的区域名称
+painter.getRegion(x, y).then(regionName => {
+    console.log(regionName);
+});
+
+// 绑定点击事件
+painter.bind('click', (regionName, x, y) => {
+    console.log(regionName, x, y);
+});
+
+// 只绘制区域（用于交互检测）
+painter.onlyRegion(true);
+
+// 只绘制视图
+painter.onlyView(true);
+```
+
+## 图形绘制（便捷方法）
+
+```js
+// 圆
+painter.fillCircle(x, y, r);      // 填充圆
+painter.strokeCircle(x, y, r);    // 描边圆
+painter.fullCircle(x, y, r);      // 填充+描边圆
+
+// 矩形
+painter.fillRect(x, y, w, h);
+painter.strokeRect(x, y, w, h);
+painter.fullRect(x, y, w, h);
+
+// 圆环 (1.1.0+)
+painter.fillRing(x, y, r1, r2);
+painter.strokeRing(x, y, r1, r2);
+painter.fullRing(x, y, r1, r2);
+
+// 椭圆 (1.1.0+)
+painter.fillEllipse(x, y, r1, r2, deg);
+painter.strokeEllipse(x, y, r1, r2, deg);
+```
+
+## 导出
+
+```js
+// 导出为图片
+painter.toDataURL(type, encoderOptions).then(dataUrl => {
+    // dataUrl 即为 base64 图片
+});
+```
+
+## 重置
+
+```js
+// 重置为默认配置
+painter.reset();
+
+// 带自定义配置重置
+painter.reset({ fillStyle: 'blue', fontSize: 20 });
 ```