tmui-cli 2.0.1 → 2.0.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/01.Shape.md

@@ -0,0 +1,244 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+::: danger 警告
+
+此图形是所有图形的继承类，不能创建和使用，只能继承本图形使用（即自定义图形）
+
+:::
+
+## Shape
+
+这是所有图形的基类，所有的元素都会继承本元素属性及方法。
+其中```IShape```为底层图形接口，外部实际使用不到。如果你要自定义图形，只要继承Shape即可。
+
+```mermaid
+flowchart LR
+Shape --> IShape
+```
+
+## 属性
+
+::: danger 警告
+
+下面除了基础属性，其它所有特定的属性只有对应的图形才会起效，每一个图形有它特定对应指定相同下面的属性。
+
+:::
+
+### 基础属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `x` | number | 0 | X坐标位置 |
+| `y` | number | 0 | Y坐标位置 |
+| `width` | number | 0 | 图形宽度 |
+| `height` | number | 0 | 图形高度 |
+| `fill` | string | "" | 填充颜色 |
+| `stroke` | string | "" | 描边颜色 |
+| `strokeWidth` | number | 0 | 描边宽度 |
+| `opacity` | number | 1 | 透明度 (0-1) |
+| `visible` | boolean | true | 是否可见 |
+| `rotation` | number | 0 | 旋转角度（度） |
+| `scaleX` | number | 1 | X轴缩放比例 |
+| `scaleY` | number | 1 | Y轴缩放比例 |
+| `offsetX` | number | 0 | X轴偏移量 |
+| `offsetY` | number | 0 | Y轴偏移量 |
+| `draggable` | boolean | false | 是否可拖拽 |
+| `draggableing` | boolean | false | 是否正在拖拽 |
+| `bubbleEvent` | boolean | false | 是否允许事件冒泡 |
+| `toggleStatus` | boolean | false | 切换状态 |
+| `zIndex` | number | 0 | 层级索引 |
+| `clip` | boolean | false | 是否裁剪 |
+| `id` | string | "shape-" + random | 唯一标识符 |
+| `type` | string | "" | 图形类型 |
+| `rotateCenter` | string | "topLeft" | 旋转中心点 |
+| `needsUpdate` | boolean | false | 是否需要更新 |
+
+### 线条样式属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `lineJoin` | string | "round" | 线条连接方式 |
+| `lineDashOffset` | number | 0 | 虚线偏移量 |
+| `lineDash` | number[] | [] | 虚线样式数组 |
+| `lineCap` | string | "butt" | 线条端点样式 |
+
+### 文本属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `text` | string | "" | 文本内容 |
+| `fontSize` | number | 12 | 字体大小 |
+| `fontFamily` | string | "Arial" | 字体族 |
+| `textAlign` | string | "left" | 文本对齐方式 |
+| `textBaseline` | string | "top" | 文本基线 |
+| `padding` | number | 0 | 内边距 |
+| `lineHeight` | number | 1.2 | 行高 |
+| `textBgColor` | string | "" | 文本背景色 |
+
+### 图形特定属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `radius` | number | 0 | 半径 |
+| `radiusX` | number | 20 | 水平半径 |
+| `radiusY` | number | 80 | 垂直半径 |
+| `innerRadius` | number | 10 | 内圆半径 |
+| `outerRadius` | number | 20 | 外圆半径 |
+| `startAngle` | number | 0 | 起始角度 |
+| `endAngle` | number | 360 | 结束角度 |
+| `sides` | number | 3 | 边数 |
+| `numPoints` | number | 5 | 星形角数 |
+| `points` | number[] | [] | 点坐标数组 |
+| `closed` | boolean | true | 是否闭合 |
+| `tension` | number | 0 | 线条张力 |
+| `bezier` | boolean | false | 是否使用贝塞尔曲线 |
+| `pointStart` | object | `{x: 0, y: 0}` | 起点坐标 |
+| `pointEnd` | object | `{x: 0, y: 0}` | 终点坐标 |
+| `strokeGradient` | string[] | [] | 描边渐变色数组 |
+| `fillGradient` | string[] | [] | 填充渐变色数组 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 绘制方法
+
+#### `draw(ctx: CanvasRenderingContext2D): void`
+绘制图形到画布上下文
+- `ctx`: Canvas 2D 渲染上下文
+
+#### `isPointInPath(x: number, y: number, shapeId: string): boolean`
+检测点是否在图形内
+- `x`: 点的X坐标
+- `y`: 点的Y坐标
+- `shapeId`: 图形ID（可选）
+- 返回值: 是否在图形内
+
+### 设置方法
+
+#### 元素迭代
+- `clone(count: number,actions:null|(el:Shape,index:number) => void): Shape[]`
+
+#### 位置和尺寸
+- `setX(value: number): Shape`
+- `setY(value: number): Shape`
+- `setWidth(value: number): Shape`
+- `setHeight(value: number): Shape`
+
+#### 样式设置
+- `setFill(value: string): Shape`
+- `setStroke(value: string): Shape`
+- `setStrokeWidth(value: number): Shape`
+- `setOpacity(value: number): Shape`
+- `setVisible(value: boolean): Shape`
+
+#### 变换设置
+- `setRotation(value: number): Shape`
+- `setScaleX(value: number): Shape`
+- `setScaleY(value: number): Shape`
+- `setOffsetX(value: number): Shape`
+- `setOffsetY(value: number): Shape`
+- `setRotateCenter(center: CanvasRotateCenter): Shape`
+
+#### 交互设置
+- `setDraggable(value: boolean): Shape`
+- `setBubbleEvent(value: boolean): Shape`
+- `setZindex(value: number): Shape`
+- `setClip(value: boolean): Shape`
+
+#### 线条样式
+- `setLineDash(value: number[]): Shape`
+
+### 事件方法
+
+#### `addEventListener(eventName: CanvasEventType, listener: IEventShapeListener): Shape`
+添加事件监听器
+- `eventName`: 事件类型
+- `listener`: 事件处理函数
+- 返回值: 当前Shape实例
+
+#### `removeEventListener(eventName: CanvasEventType, listener: IEventShapeListener): Shape`
+移除事件监听器
+- `eventName`: 事件类型
+- `listener`: 事件处理函数
+- 返回值: 当前Shape实例
+
+#### `toggle(call: (status: boolean, target: any) => void): void`
+设置切换回调函数
+- `call`: 切换状态回调函数
+
+### 工具方法
+
+#### `setAttr(key: string, value: any): void`
+设置属性值
+- `key`: 属性名
+- `value`: 属性值
+
+#### `getAttr(key: string): any | null`
+获取属性值
+- `key`: 属性名
+- 返回值: 属性值
+
+#### `getBoundRect(): IShapeBoundRect`
+获取边界矩形
+- 返回值: 边界矩形对象
+
+#### `update(): Shape`
+更新图形状态
+- 返回值: 当前Shape实例
+
+## 使用示例
+
+```typescript
+// 创建基础图形配置
+const config = {
+    x: 100,
+    y: 100,
+    width: 200,
+    height: 150,
+    fill: "#ff0000",
+    stroke: "#000000",
+    strokeWidth: 2,
+    opacity: 0.8,
+    rotation: 45,
+    draggable: true
+};
+
+// 创建图形实例
+const shape = new Shape(config, canvas);
+
+// 添加事件监听
+shape.addEventListener('click', (event) => {
+    console.log('图形被点击了', event);
+});
+
+// 设置切换回调
+shape.toggle((status, target) => {
+    console.log('图形状态切换:', status);
+});
+
+// 修改图形属性
+shape.setFill("#00ff00")
+    .setRotation(90)
+    .setOpacity(0.5);
+```
+
+## 注意事项
+
+1. 所有图形类都继承自Shape基类
+2. 支持链式调用设置属性
+3. 事件系统支持冒泡机制
+4. 支持多种变换操作（旋转、缩放、偏移）
+5. 渐变效果通过数组配置
+6. 自定义图形需要继承Shape并实现draw方法
+7. 点击检测需要考虑旋转和缩放变换
+8. 边界矩形计算基于实际绘制区域

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/02.IArc.md

@@ -0,0 +1,100 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## IArc
+
+圆弧图形类，用于绘制指定起始角度和结束角度的圆弧。
+
+```mermaid
+flowchart LR
+IArc--> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `radius` | number | 30 | 圆弧半径 |
+| `startAngle` | number | 0 | 起始角度（度） |
+| `endAngle` | number | 90 | 结束角度（度） |
+| `type` | string | "IArc" | 图形类型标识 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 设置方法
+
+#### `setRadius(value: number): IArc`
+设置圆弧半径
+- `value`: 半径值
+- 返回值: 当前IArc实例
+
+#### `setStartAngle(angle: number): IArc`
+设置起始角度
+- `angle`: 起始角度（度）
+- 返回值: 当前IArc实例
+
+#### `setEndAngle(angle: number): IArc`
+设置结束角度
+- `angle`: 结束角度（度）
+- 返回值: 当前IArc实例
+
+#### `setWidth(value: number): IArc`
+设置宽度（会同时更新半径）
+- `value`: 宽度值
+- 返回值: 当前IArc实例
+
+#### `setHeight(value: number): IArc`
+设置高度（会同时更新半径）
+- `value`: 高度值
+- 返回值: 当前IArc实例
+
+### 继承方法
+
+继承自 `Shape` 的所有方法，包括：
+- `draw(ctx: CanvasRenderingContext2D)`: 绘制圆弧
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`: 检测点是否在圆弧内
+- `getBoundRect(): IShapeBoundRect`: 获取边界矩形
+
+## 使用示例
+
+```typescript
+// 创建一个圆弧
+const arc = new IArc({
+    x: 100,
+    y: 100,
+    radius: 50,
+    startAngle: 0,
+    endAngle: 180,
+    fill: "#ff0000",
+    stroke: "#000000",
+    strokeWidth: 2
+}, canvas);
+
+// 添加到画布
+canvas.addShape(arc);
+
+// 修改圆弧属性
+arc.setRadius(60)
+    .setStartAngle(45)
+    .setEndAngle(270)
+    .setFill("#00ff00");
+```
+
+## 注意事项
+
+1. 角度以度为单位，0度表示水平向右，顺时针为正
+2. 如果设置了填充色，圆弧会从圆心绘制扇形
+3. 如果没有填充色，只绘制圆弧线条
+4. 点击检测会根据是否有填充来区分检测范围

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/03.ICircle.md

@@ -0,0 +1,89 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## ICircle
+
+圆形图形类，用于绘制完美的圆形。
+
+```mermaid
+flowchart LR
+ICircle --> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `radius` | number | 30 | 圆形半径 |
+| `type` | string | "ICircle" | 图形类型标识 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 设置方法
+
+#### `setRadius(value: number): ICircle`
+设置圆形半径
+- `value`: 半径值
+- 返回值: 当前ICircle实例
+
+#### `setWidth(value: number): ICircle`
+设置宽度（会同时更新半径和高度）
+- `value`: 宽度值
+- 返回值: 当前ICircle实例
+
+#### `setHeight(value: number): ICircle`
+设置高度（会同时更新半径和宽度）
+- `value`: 高度值
+- 返回值: 当前ICircle实例
+
+### 继承方法
+
+继承自 `Shape` 的所有方法，包括：
+- `draw(ctx: CanvasRenderingContext2D)`: 绘制圆形
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`: 检测点是否在圆形内
+- `getBoundRect(): IShapeBoundRect`: 获取边界矩形
+
+## 使用示例
+
+```typescript
+// 创建一个圆形
+const circle = new ICircle({
+    x: 100,
+    y: 100,
+    radius: 50,
+    fill: "#ff0000",
+    stroke: "#000000",
+    strokeWidth: 2
+}, canvas);
+
+// 添加到画布
+canvas.addShape(circle);
+
+// 修改圆形属性
+circle.setRadius(60)
+    .setFill("#00ff00")
+    .setStroke("#ff0000")
+    .setStrokeWidth(3);
+
+// 设置圆形为可拖拽
+circle.setDraggable(true);
+```
+
+## 注意事项
+
+1. 圆形始终保持完美的圆形，设置宽度或高度会自动更新半径
+2. 支持填充和描边两种渲染模式
+3. 点击检测会考虑旋转和缩放变换
+4. 边界矩形计算基于直径（半径 × 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/04.IEllipse.md

@@ -0,0 +1,94 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## IEllipse
+
+椭圆图形类，用于绘制椭圆形状。
+
+```mermaid
+flowchart LR
+IEllipse --> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `radiusX` | number | 80 | 椭圆水平半径 |
+| `radiusY` | number | 20 | 椭圆垂直半径 |
+| `type` | string | "IEllipse" | 图形类型标识 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 设置方法
+
+#### `setRadiusX(value: number): IEllipse`
+设置椭圆水平半径
+- `value`: 水平半径值
+- 返回值: 当前IEllipse实例
+
+#### `setRadiusY(value: number): IEllipse`
+设置椭圆垂直半径
+- `value`: 垂直半径值
+- 返回值: 当前IEllipse实例
+
+#### `setWidth(value: number): IEllipse`
+设置宽度（会同时更新水平半径）
+- `value`: 宽度值
+- 返回值: 当前IEllipse实例
+
+#### `setHeight(value: number): IEllipse`
+设置高度（会同时更新垂直半径）
+- `value`: 高度值
+- 返回值: 当前IEllipse实例
+
+### 继承方法
+
+继承自 `Shape` 的所有方法，包括：
+- `draw(ctx: CanvasRenderingContext2D)`: 绘制椭圆
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`: 检测点是否在椭圆内
+- `getBoundRect(): IShapeBoundRect`: 获取边界矩形
+
+## 使用示例
+
+```typescript
+// 创建一个椭圆
+const ellipse = new IEllipse({
+    x: 100,
+    y: 100,
+    radiusX: 60,
+    radiusY: 30,
+    fill: "#ff0000",
+    stroke: "#000000",
+    strokeWidth: 2
+}, canvas);
+
+// 添加到画布
+canvas.addShape(ellipse);
+
+// 修改椭圆属性
+ellipse.setRadiusX(80)
+    .setRadiusY(40)
+    .setFill("#00ff00")
+    .setStroke("#ff0000");
+```
+
+## 注意事项
+
+1. 椭圆由水平半径和垂直半径控制形状
+2. 支持填充和描边两种渲染模式
+3. 点击检测基于椭圆的标准方程
+4. 边界矩形计算基于直径（半径 × 2）
+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/05.ImageShape.md

@@ -0,0 +1,92 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## ImageShape
+
+图像图形类，用于在画布上显示图片。
+
+```mermaid
+flowchart LR
+ImageShape --> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `src` | string | "" | 图片源路径 |
+| `loaded` | boolean | false | 图片是否已加载完成 |
+| `type` | string | "ImageShape" | 图形类型标识 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 设置方法
+
+#### `setSrc(src: string): ImageShape`
+设置图片源路径并加载图片
+- `src`: 图片源路径
+- 返回值: 当前ImageShape实例
+
+#### `crop(x: number, y: number, width: number, height: number): ImageShape`
+设置图片裁剪区域
+- `x`: 裁剪起始X坐标
+- `y`: 裁剪起始Y坐标
+- `width`: 裁剪宽度
+- `height`: 裁剪高度
+- 返回值: 当前ImageShape实例
+
+#### `resetCrop(): ImageShape`
+重置裁剪设置，显示完整图片
+- 返回值: 当前ImageShape实例
+
+### 继承方法
+
+继承自 `Shape` 的所有方法，包括：
+- `draw(ctx: CanvasRenderingContext2D)`: 绘制图片
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`: 检测点是否在图片内
+- `getAttr(key: string)`: 获取属性值
+
+## 使用示例
+
+```typescript
+// 创建一个图片图形
+const imageShape = new ImageShape({
+	src:"path/to/image.jpg",
+    x: 100,
+    y: 100,
+    width: 200,
+    height: 150
+}, canvas);
+
+// 添加到画布
+canvas.addShape(imageShape);
+
+// 设置新的图片源
+imageShape.setSrc("path/to/new-image.jpg");
+
+// 裁剪图片
+imageShape.crop(10, 10, 100, 100);
+
+// 重置裁剪
+imageShape.resetCrop();
+```
+
+## 注意事项
+
+1. 图片加载是异步的，需要等待 `loaded` 属性为 `true` 后才能正确显示
+2. 支持图片裁剪功能，可以显示图片的指定区域
+3. 支持所有平台（APP、WEB、小程序）
+4. 图片加载完成后会自动更新画布
+5. 点击检测基于图片的显示区域