tmui-cli 2.0.1 → 2.0.2

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/50./345/233/276/345/275/242/347/263/273/347/273/237/06.ILine.md

@@ -0,0 +1,115 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## ILine
+
+线条图形类，用于绘制直线。
+
+```mermaid
+flowchart LR
+ILine --> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `pointStart` | IShapeVector2d | `{x: 0, y: 0}` | 线条起点坐标 |
+| `pointEnd` | IShapeVector2d | `{x: 0, y: 0}` | 线条终点坐标 |
+| `type` | string | "ILine" | 图形类型标识 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 设置方法
+
+#### `setStart(x: number, y: number): ILine`
+设置线条起点
+- `x`: 起点X坐标
+- `y`: 起点Y坐标
+- 返回值: 当前ILine实例
+
+#### `setEnd(x: number, y: number): ILine`
+设置线条终点
+- `x`: 终点X坐标
+- `y`: 终点Y坐标
+- 返回值: 当前ILine实例
+
+#### `rotateByPoint(isStartPoint: boolean, angle: number): ILine`
+根据参考点旋转线条
+- `isStartPoint`: 是否以起点为基准旋转
+- `angle`: 旋转角度（度）
+- 返回值: 当前ILine实例
+
+#### `getAngle(): number`
+获取线条角度
+- 返回值: 角度值（度）
+
+#### `getAngleByPoints(start: IShapeVector2d, end: IShapeVector2d): number`
+根据两点计算角度
+- `start`: 起点坐标
+- `end`: 终点坐标
+- 返回值: 角度值（度）
+
+#### `getAngleByAnchor(anchorX: number, anchorY: number, startX: number, startY: number, endX: number, endY: number): number`
+计算线条绕指定锚点的旋转角度
+- `anchorX`: 锚点X坐标
+- `anchorY`: 锚点Y坐标
+- `startX`: 起点X坐标
+- `startY`: 起点Y坐标
+- `endX`: 终点X坐标
+- `endY`: 终点Y坐标
+- 返回值: 角度值（度）
+
+### 继承方法
+
+继承自 `Shape` 的所有方法，包括：
+- `draw(ctx: CanvasRenderingContext2D)`: 绘制线条
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`: 检测点是否在线条上
+- `getBoundRect(): IShapeBoundRect`: 获取边界矩形
+
+## 使用示例
+
+```typescript
+// 创建一条线条
+const line = new ILine({
+    pointStart: {x: 100, y: 100},
+    pointEnd: {x: 200, y: 200},
+    stroke: "#000000",
+    strokeWidth: 2
+}, canvas);
+
+// 添加到画布
+canvas.addShape(line);
+
+// 修改线条属性
+line.setStart(50, 50)
+    .setEnd(250, 250)
+    .setStroke("#ff0000")
+    .setStrokeWidth(3);
+
+// 旋转线条
+line.rotateByPoint(true, 45);
+
+// 获取线条角度
+const angle = line.getAngle();
+```
+
+## 注意事项
+
+1. 线条只有描边模式，不支持填充
+2. 点击检测基于点到线段的距离计算
+3. 支持线条旋转功能
+4. 边界矩形会根据起点和终点自动计算
+5. 线条的宽度和高度设置会调整起点和终点位置

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/50./345/233/276/345/275/242/347/263/273/347/273/237/07.ILinePolygon.md

@@ -0,0 +1,73 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## ILinePolygon
+
+线条多边形图形类，用于绘制由多个点连接而成的线条多边形。
+
+```mermaid
+flowchart LR
+ILinePolygon --> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `points` | number[] | [] | 多边形顶点坐标数组 [x1, y1, x2, y2, ...] |
+| `closed` | boolean | true | 多边形是否自动闭合 |
+| `tension` | number | 0 | 线条张力，用于平滑曲线 |
+| `bezier` | boolean | false | 是否使用贝塞尔曲线 |
+| `type` | string | "ILinePolygon" | 图形类型标识 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 继承方法
+
+继承自 `Shape` 的所有方法，包括：
+- `draw(ctx: CanvasRenderingContext2D)`: 绘制线条多边形
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`: 检测点是否在多边形内
+- `getBoundRect(): IShapeBoundRect`: 获取边界矩形
+
+## 使用示例
+
+```typescript
+// 创建一个线条多边形
+const linePolygon = new ILinePolygon({
+    points: [0, 0, 100, 50, 80, 150, 20, 150],
+    closed: true,
+    tension: 0.3,
+    stroke: "#000000",
+    strokeWidth: 2,
+    fill: "#ff0000"
+}, canvas);
+
+// 添加到画布
+canvas.addShape(linePolygon);
+
+// 修改多边形属性
+linePolygon.setAttr('points', [0, 0, 120, 60, 100, 180, 10, 180])
+    .setAttr('tension', 0.5)
+    .setFill("#00ff00");
+```
+
+## 注意事项
+
+1. `points` 数组必须包含偶数个数值，每两个数值表示一个点的坐标
+2. 支持平滑曲线绘制（通过 `tension` 参数）
+3. 支持贝塞尔曲线绘制（通过 `bezier` 参数）
+4. 可以设置为开放或闭合的多边形
+5. 点击检测基于边界矩形范围
+6. 支持填充和描边两种渲染模式

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/50./345/233/276/345/275/242/347/263/273/347/273/237/08.Path2DShape.md

@@ -0,0 +1,81 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## Path2DShape
+
+Path2D图形类，用于绘制复杂的路径图形，支持SVG路径语法。
+
+```mermaid
+flowchart LR
+Path2DShape --> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `pathData` | string | "" | SVG路径数据字符串 |
+| `type` | string | "Path2DShape" | 图形类型标识 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 设置方法
+
+#### `setPathData(pathData: string): Path2DShape`
+设置路径数据
+- `pathData`: SVG路径数据字符串
+- 返回值: 当前Path2DShape实例
+
+### 继承方法
+
+继承自 `Shape` 的所有方法，包括：
+- `draw(ctx: CanvasRenderingContext2D)`: 绘制路径
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`: 检测点是否在路径内
+- `getBoundRect(): IShapeBoundRect`: 获取边界矩形
+
+## 使用示例
+
+```typescript
+// 创建一个路径图形
+const path2D = new Path2DShape({
+    pathData: "M 10 10 L 100 10 L 100 100 L 10 100 Z",
+    fill: "#ff0000",
+    stroke: "#000000",
+    strokeWidth: 2
+}, canvas);
+
+// 添加到画布
+canvas.addShape(path2D);
+
+// 修改路径数据
+path2D.setPathData("M 20 20 Q 50 10 80 20 T 140 20");
+
+// 复杂路径示例
+const complexPath = new Path2DShape({
+    pathData: "M 10 10 C 20 0, 40 0, 50 10 S 70 20, 80 10",
+    fill: "#00ff00",
+    stroke: "#ff0000",
+    strokeWidth: 3
+}, canvas);
+```
+
+## 注意事项
+
+1. 支持完整的SVG路径语法
+2. 路径命令包括：M、L、H、V、C、S、Q、T、A、Z等
+3. 支持填充和描边两种渲染模式
+4. 点击检测基于路径的几何形状
+5. 边界矩形会根据路径自动计算
+6. 适合绘制复杂的自定义图形

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/50./345/233/276/345/275/242/347/263/273/347/273/237/09.IRect.md

@@ -0,0 +1,91 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## IRect
+
+矩形图形类，用于绘制矩形，支持圆角矩形。
+
+```mermaid
+flowchart LR
+IRect --> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `radius` | number | 0 | 圆角半径 |
+| `type` | string | "IRect" | 图形类型标识 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 设置方法
+
+#### `setRadius(value: number): IRect`
+设置圆角半径
+- `value`: 圆角半径值
+- 返回值: 当前IRect实例
+
+### 继承方法
+
+继承自 `Shape` 的所有方法，包括：
+- `draw(ctx: CanvasRenderingContext2D)`: 绘制矩形
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`: 检测点是否在矩形内
+- `getBoundRect(): IShapeBoundRect`: 获取边界矩形
+
+## 使用示例
+
+```typescript
+// 创建一个矩形
+const rect = new IRect({
+    x: 100,
+    y: 100,
+    width: 200,
+    height: 150,
+    fill: "#ff0000",
+    stroke: "#000000",
+    strokeWidth: 2
+}, canvas);
+
+// 添加到画布
+canvas.addShape(rect);
+
+// 修改矩形属性
+rect.setRadius(10)
+    .setFill("#00ff00")
+    .setStroke("#ff0000")
+    .setStrokeWidth(3);
+
+// 创建圆角矩形
+const roundedRect = new IRect({
+    x: 50,
+    y: 50,
+    width: 100,
+    height: 80,
+    radius: 20,
+    fill: "#0000ff",
+    stroke: "#ffffff",
+    strokeWidth: 1
+}, canvas);
+```
+
+## 注意事项
+
+1. 支持圆角矩形绘制
+2. 圆角半径不会超过矩形宽度或高度的一半
+3. 支持填充和描边两种渲染模式
+4. 点击检测基于矩形区域
+5. 支持旋转和缩放变换
+6. 边界矩形计算基于实际绘制区域

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/50./345/233/276/345/275/242/347/263/273/347/273/237/10.IRegularPolygon.md

@@ -0,0 +1,106 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## IRegularPolygon
+
+正多边形图形类，用于绘制规则的正多边形。
+
+```mermaid
+flowchart LR
+IRegularPolygon --> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `radius` | number | 30 | 外接圆半径 |
+| `sides` | number | 3 | 多边形边数 |
+| `type` | string | "IRegularPolygon" | 图形类型标识 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 设置方法
+
+#### `setRadius(value: number): IRegularPolygon`
+设置外接圆半径
+- `value`: 半径值
+- 返回值: 当前IRegularPolygon实例
+
+#### `setSides(value: number): IRegularPolygon`
+设置多边形边数
+- `value`: 边数
+- 返回值: 当前IRegularPolygon实例
+
+#### `setWidth(value: number): IRegularPolygon`
+设置宽度（会同时更新半径和高度）
+- `value`: 宽度值
+- 返回值: 当前IRegularPolygon实例
+
+#### `setHeight(value: number): IRegularPolygon`
+设置高度（会同时更新半径和宽度）
+- `value`: 高度值
+- 返回值: 当前IRegularPolygon实例
+
+### 继承方法
+
+继承自 `Shape` 的所有方法，包括：
+- `draw(ctx: CanvasRenderingContext2D)`: 绘制正多边形
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`: 检测点是否在多边形内
+- `getBoundRect(): IShapeBoundRect`: 获取边界矩形
+
+## 使用示例
+
+```typescript
+// 创建一个正三角形
+const triangle = new IRegularPolygon({
+    x: 100,
+    y: 100,
+    radius: 50,
+    sides: 3,
+    fill: "#ff0000",
+    stroke: "#000000",
+    strokeWidth: 2
+}, canvas);
+
+// 添加到画布
+canvas.addShape(triangle);
+
+// 修改多边形属性
+triangle.setRadius(60)
+    .setSides(6)
+    .setFill("#00ff00")
+    .setStroke("#ff0000");
+
+// 创建正六边形
+const hexagon = new IRegularPolygon({
+    x: 200,
+    y: 100,
+    radius: 40,
+    sides: 6,
+    fill: "#0000ff",
+    stroke: "#ffffff",
+    strokeWidth: 1
+}, canvas);
+```
+
+## 注意事项
+
+1. 正多边形从垂直向上开始绘制
+2. 支持填充和描边两种渲染模式
+3. 点击检测基于多边形内部区域和描边范围
+4. 边界矩形会根据所有顶点自动计算
+5. 支持旋转和缩放变换
+6. 边数必须大于等于3

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/50./345/233/276/345/275/242/347/263/273/347/273/237/11.IRing.md

@@ -0,0 +1,110 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## IRing
+
+圆环图形类，用于绘制圆环形状。
+
+```mermaid
+flowchart LR
+IRing --> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `innerRadius` | number | 10 | 内圆半径 |
+| `outerRadius` | number | 20 | 外圆半径 |
+| `startAngle` | number | 0 | 起始角度（度） |
+| `endAngle` | number | 360 | 结束角度（度） |
+| `type` | string | "IRing" | 图形类型标识 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 设置方法
+
+#### `setInnerRadius(value: number): IRing`
+设置内圆半径
+- `value`: 内圆半径值
+- 返回值: 当前IRing实例
+
+#### `setOuterRadius(value: number): IRing`
+设置外圆半径
+- `value`: 外圆半径值
+- 返回值: 当前IRing实例
+
+#### `setWidth(value: number): IRing`
+设置宽度（会同时更新外圆半径和高度）
+- `value`: 宽度值
+- 返回值: 当前IRing实例
+
+#### `setHeight(value: number): IRing`
+设置高度（会同时更新外圆半径和宽度）
+- `value`: 高度值
+- 返回值: 当前IRing实例
+
+### 继承方法
+
+继承自 `Shape` 的所有方法，包括：
+- `draw(ctx: CanvasRenderingContext2D)`: 绘制圆环
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`: 检测点是否在圆环内
+- `getBoundRect(): IShapeBoundRect`: 获取边界矩形
+
+## 使用示例
+
+```typescript
+// 创建一个完整圆环
+const ring = new IRing({
+    x: 100,
+    y: 100,
+    innerRadius: 30,
+    outerRadius: 60,
+    fill: "#ff0000",
+    stroke: "#000000",
+    strokeWidth: 2
+}, canvas);
+
+// 添加到画布
+canvas.addShape(ring);
+
+// 修改圆环属性
+ring.setInnerRadius(20)
+    .setOuterRadius(80)
+    .setFill("#00ff00")
+    .setStroke("#ff0000");
+
+// 创建部分圆环
+const partialRing = new IRing({
+    x: 200,
+    y: 100,
+    innerRadius: 25,
+    outerRadius: 50,
+    startAngle: 0,
+    endAngle: 180,
+    fill: "#0000ff",
+    stroke: "#ffffff",
+    strokeWidth: 1
+}, canvas);
+```
+
+## 注意事项
+
+1. 内圆半径必须小于外圆半径
+2. 支持填充和描边两种渲染模式
+3. 可以绘制完整的圆环或部分圆环
+4. 点击检测基于角度范围和半径范围
+5. 支持旋转和缩放变换
+6. 边界矩形基于外圆半径计算

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/50./345/233/276/345/275/242/347/263/273/347/273/237/12.ISector.md

@@ -0,0 +1,103 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## ISector
+
+扇形图形类，用于绘制扇形（从圆心到圆弧的封闭区域）。
+
+```mermaid
+flowchart LR
+ISector --> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `radius` | number | 30 | 扇形半径 |
+| `startAngle` | number | 0 | 起始角度（度） |
+| `endAngle` | number | 90 | 结束角度（度） |
+| `type` | string | "ISector" | 图形类型标识 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 设置方法
+
+#### `setRadius(value: number): ISector`
+设置扇形半径
+- `value`: 半径值
+- 返回值: 当前ISector实例
+
+#### `setWidth(value: number): ISector`
+设置宽度（会同时更新半径和高度）
+- `value`: 宽度值
+- 返回值: 当前ISector实例
+
+#### `setHeight(value: number): ISector`
+设置高度（会同时更新半径和宽度）
+- `value`: 高度值
+- 返回值: 当前ISector实例
+
+### 继承方法
+
+继承自 `Shape` 的所有方法，包括：
+- `draw(ctx: CanvasRenderingContext2D)`: 绘制扇形
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`: 检测点是否在扇形内
+- `getBoundRect(): IShapeBoundRect`: 获取边界矩形
+
+## 使用示例
+
+```typescript
+// 创建一个扇形
+const sector = new ISector({
+    x: 100,
+    y: 100,
+    radius: 50,
+    startAngle: 0,
+    endAngle: 90,
+    fill: "#ff0000",
+    stroke: "#000000",
+    strokeWidth: 2
+}, canvas);
+
+// 添加到画布
+canvas.addShape(sector);
+
+// 修改扇形属性
+sector.setRadius(60)
+    .setFill("#00ff00")
+    .setStroke("#ff0000");
+
+// 创建半圆扇形
+const halfCircle = new ISector({
+    x: 200,
+    y: 100,
+    radius: 40,
+    startAngle: 0,
+    endAngle: 180,
+    fill: "#0000ff",
+    stroke: "#ffffff",
+    strokeWidth: 1
+}, canvas);
+```
+
+## 注意事项
+
+1. 扇形始终从圆心开始绘制
+2. 支持填充和描边两种渲染模式
+3. 角度以度为单位，0度表示水平向右
+4. 点击检测基于角度范围和半径范围
+5. 支持旋转和缩放变换
+6. 边界矩形基于半径计算