tmui-cli 2.0.0 → 2.0.2

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/25./345/212/250/347/224/273/347/263/273/347/273/237/01./345/210/233/345/273/272/345/212/250/347/224/273/345/256/236/344/276/213.md

@@ -0,0 +1,57 @@
+---
+outline: deep
+---
+
+# ICanvas - 动画系统
+
+::: warning 注意
+
+动画的添加一定要在图形被添加到render后再执行动画的创建。
+
+:::
+
+## 创建动画实例
+
+::: code-group
+
+```ts [uts]
+import { ICanvas } from '@/uni_modules/tmx-ui';
+import { CanvasEventType, ICanvasEvent } from '@/uni_modules/tmx-ui';
+// 导入动画库
+import { Tween } from '@/uni_modules/tmx-ui';
+// 导入一个矩形图形
+import { IRect } from '@/uni_modules/tmx-ui';
+
+const proxy = getCurrentInstance()?.proxy ?? null;
+const canvasId = "xCanvas-" + Math.random().toString(16).substring(4)
+// render 就是画布实例
+const render = ref<ICanvas>(new ICanvas({ canvasId: canvasId,component: proxy as any | null }));
+
+// 创建矩形
+const rect = new IRect({
+	draggable: true,
+	x: 100, y: 100, width: 100, height: 50, fill: "#572cff", rotation: 45, opacity: 0.6,rotateCenter:'center'
+}, render)
+
+render.addShape(rect)
+
+// 为矩形添加一个圆角循环变动的动画。
+// tw就是动画实例
+const tw = new Tween(rect, render)
+	.to({ radius: 24 })
+	.setYoyo(true)
+	.setLoop(-1)
+	.start()
+
+
+```
+
+```vue [vue]
+
+<canvas :id="canvasId"  style="width: 100%;height: 350px;" ref="canvasDom">
+</canvas>
+
+```
+
+:::
+

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/25./345/212/250/347/224/273/347/263/273/347/273/237/02./345/212/250/347/224/273/345/261/236/346/200/247/345/217/212/346/226/271/346/263/225.md

@@ -0,0 +1,221 @@
+---
+outline: deep
+---
+
+# ICanvas - 动画系统
+
+## Tween 动画类
+
+Tween是画布动画系统的核心类，提供强大的补间动画功能，支持动画队列、缓动函数、循环播放等高级特性。
+
+## 属性
+
+Tween类内部管理动画状态，开发者无需直接访问这些属性。
+
+## 方法
+
+### 构造函数
+
+#### `constructor(target: Shape, canvas: ICanvas)`
+创建Tween动画实例
+- `target`: 要执行动画的图形对象
+- `canvas`: 画布实例
+
+### 动画控制方法
+
+#### `to(props: UTSJSONObject, duration: number = 1000): Tween`
+设置动画目标属性值
+- `props`: 目标属性对象
+- `duration`: 动画持续时间（毫秒）
+- 返回值: 当前Tween实例
+
+#### `addTo(props: UTSJSONObject, duration: number = 1000, easing: EasingFunction = this.easing): Tween`
+添加动画到队列
+- `props`: 目标属性对象
+- `duration`: 动画持续时间（毫秒）
+- `easing`: 缓动函数
+- 返回值: 当前Tween实例
+
+#### `delay(ms: number): Tween`
+添加延时到动画队列
+- `ms`: 延时时间（毫秒）
+- 返回值: 当前Tween实例
+
+#### `start(): Tween`
+开始播放动画
+- 返回值: 当前Tween实例
+
+#### `stop(): Tween`
+停止播放动画
+- 返回值: 当前Tween实例
+
+#### `clearAnimations(): Tween`
+清除所有动画和队列
+- 返回值: 当前Tween实例
+
+### 配置方法
+
+#### `setEasing(easingFunction: EasingFunction): Tween`
+设置缓动函数
+- `easingFunction`: 缓动函数
+- 返回值: 当前Tween实例
+
+#### `setLoop(count: number): Tween`
+设置循环次数
+- `count`: 循环次数（0=不循环，-1=无限循环）
+- 返回值: 当前Tween实例
+
+#### `setYoyo(value: boolean): Tween`
+设置是否往返播放
+- `value`: 是否往返播放
+- 返回值: 当前Tween实例
+
+### 回调方法
+
+#### `onUpdate(callback: (progress: number) => void): Tween`
+设置动画更新回调
+- `callback`: 更新回调函数
+- 返回值: 当前Tween实例
+
+#### `onComplete(callback: () => void): Tween`
+设置动画完成回调
+- `callback`: 完成回调函数
+- 返回值: 当前Tween实例
+
+### 销毁方法
+
+#### `destroy(): void`
+销毁动画实例，清理所有资源
+
+## 缓动函数 (Easing)
+
+内置的缓动函数库，提供多种动画效果：
+
+| 函数名 | 说明 | 效果 |
+|--------|------|------|
+| `Easing.linear` | 线性缓动 | 匀速变化 |
+| `Easing.easeInQuad` | 二次方缓入 | 慢开始 |
+| `Easing.easeOutQuad` | 二次方缓出 | 慢结束 |
+| `Easing.easeInOutQuad` | 二次方缓入缓出 | 慢开始和结束 |
+| `Easing.easeInCubic` | 三次方缓入 | 更慢开始 |
+| `Easing.easeOutCubic` | 三次方缓出 | 更慢结束 |
+| `Easing.easeInOutCubic` | 三次方缓入缓出 | 更慢开始和结束 |
+| `Easing.easeInElastic` | 弹性缓入 | 弹性效果开始 |
+| `Easing.easeOutElastic` | 弹性缓出 | 弹性效果结束 |
+| `Easing.easeInOutElastic` | 弹性缓入缓出 | 弹性效果开始和结束 |
+
+## 使用示例
+
+### 基础动画
+
+```typescript
+// 创建图形
+const circle = new ICircle({
+    x: 100,
+    y: 100,
+    radius: 50,
+    fill: '#ff0000'
+}, canvas);
+
+// 创建动画
+const tween = new Tween(circle, canvas);
+
+// 移动到新位置
+tween.to({ x: 200, y: 200 }, 1000)
+    .start();
+```
+
+### 动画队列
+
+```typescript
+// 创建复杂的动画序列
+tween.to({ x: 200 }, 500)           // 向右移动
+    .to({ y: 200 }, 500)            // 向下移动
+    .delay(200)                     // 延时200ms
+    .to({ rotation: 360 }, 1000)    // 旋转360度
+    .to({ scaleX: 2, scaleY: 2 }, 500)  // 放大2倍
+    .start();
+```
+
+### 缓动函数
+
+```typescript
+// 使用不同的缓动效果
+tween.to({ x: 300 }, 1000)
+    .setEasing(Easing.easeOutElastic)  // 弹性效果
+    .start();
+
+// 或者链式调用
+tween.to({ y: 300 }, 1000, Easing.easeInOutCubic)
+    .start();
+```
+
+### 循环和往返
+
+```typescript
+// 无限循环
+tween.to({ rotation: 360 }, 1000)
+    .setLoop(-1)        // 无限循环
+    .start();
+
+// 往返播放
+tween.to({ x: 200 }, 1000)
+    .setLoop(3)         // 循环3次
+    .setYoyo(true)      // 往返播放
+    .start();
+```
+
+### 回调函数
+
+```typescript
+tween.to({ x: 200 }, 1000)
+    .onUpdate((progress) => {
+        console.log('动画进度:', progress);
+    })
+    .onComplete(() => {
+        console.log('动画完成!');
+    })
+    .start();
+```
+
+### 复杂动画组合
+
+```typescript
+// 创建一个复杂的动画序列
+const complexTween = new Tween(shape, canvas);
+
+complexTween.to({ x: 100 }, 500, Easing.easeOutQuad)
+    .to({ y: 100 }, 500, Easing.easeInQuad)
+    .delay(300)
+    .to({ rotation: 180, scaleX: 1.5 }, 800, Easing.easeInOutElastic)
+    .to({ opacity: 0.5 }, 400)
+    .setLoop(2)
+    .setYoyo(true)
+    .onUpdate((progress) => {
+        console.log(`动画进度: ${(progress * 100).toFixed(1)}%`);
+    })
+    .onComplete(() => {
+        console.log('复杂动画完成!');
+    })
+    .start();
+```
+
+## 动画队列机制
+
+Tween支持动画队列，可以按顺序执行多个动画：
+
+1. **顺序执行**: 动画按添加顺序依次执行
+2. **延时支持**: 可以在队列中插入延时
+3. **循环播放**: 整个队列可以循环播放
+4. **往返播放**: 支持往返播放效果
+
+## 注意事项
+
+1. 动画会自动处理图形属性的插值计算
+2. 只有数字类型的属性才能进行动画
+3. 动画队列会按顺序执行，支持延时
+4. 循环和往返功能会影响整个动画队列
+5. 记得在组件销毁时调用`destroy()`清理资源
+6. 缓动函数可以自定义，只需实现`(t: number) => number`接口
+7. 动画会自动更新画布，无需手动调用渲染方法
+

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/30./350/207/252/345/212/250/346/216/222/347/211/210/01./345/210/233/345/273/272/346/216/222/347/211/210.md

@@ -0,0 +1,74 @@
+---
+outline: deep
+---
+
+# ICanvas - 自动排版
+
+::: warning 注意
+
+自动排版有一定的局限性，如果你对部分元素排版出现了问题建议移除。它对规则类图形会比较友好比如矩形，文本;
+如果像圆，圆弧，扇形等，它排版时会减去它的radius，从而让x,y向左/右偏移，排版时要注意这些。
+
+:::
+
+## 创建排版
+
+::: code-group
+
+```ts [uts]
+import { ICanvas } from '@/uni_modules/tmx-ui';
+import { CanvasEventType, ICanvasEvent } from '@/uni_modules/tmx-ui';
+// 导入动画库
+import { Tween } from '@/uni_modules/tmx-ui';
+// 导入一个矩形图形
+import { IRect } from '@/uni_modules/tmx-ui';
+
+const proxy = getCurrentInstance()?.proxy ?? null;
+const canvasId = "xCanvas-" + Math.random().toString(16).substring(4)
+// render 就是画布实例
+const render = ref<ICanvas>(new ICanvas({ canvasId: canvasId,component: proxy as any | null }));
+
+function draw(){
+	const recttest = new IRect({
+		x: 0,
+		y: 0,
+		width: 50,
+		height: 50,
+		fill: '#00ccff'
+	}, render)
+
+	const shapesList = recttest.clone(24)
+	render.addShape(shapesList)
+
+	//创建排版
+	let layout = new ILayout(render)
+
+	layout.setsPosition(50, 50)
+	layout.setsSize(layout.width - 100, layout.height - 100)
+	// 左右两边对齐
+	layout.setsMode('between')
+	layout.addShape(shapesList)
+
+	//排版
+	layout.render()
+
+	// 渲染
+	render.render()
+}
+
+
+onReady(()=>{
+	draw()
+})
+
+```
+
+```vue [vue]
+
+<canvas :id="canvasId"  style="width: 100%;height: 350px;" ref="canvasDom">
+</canvas>
+
+```
+
+:::
+

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/30./350/207/252/345/212/250/346/216/222/347/211/210/02./346/216/222/347/211/210/345/261/236/346/200/247.md

@@ -0,0 +1,160 @@
+---
+outline: deep
+---
+
+# ILayout - 自动排版容器
+
+`ILayout` 是画布图形的自动排版容器。它根据主轴方向、对齐模式、锚点、间距和是否换行等配置，自动计算并设置子元素的位置。
+
+底层会使用每个元素自身实现的 `getBoundRect()` 来获取参与排版的真实尺寸（宽高），并在定位时叠加容器的 `x,y` 偏移。
+
+## 类型
+
+- `LayoutDirection`: `horizontal` | `vertical`
+- `LayoutMode`: `left` | `right` | `between` | `center`
+- `LayoutAnchor`: `top` | `bottom`
+
+## 属性
+
+| 名称 | 类型 | 说明 |
+|------|------|------|
+| `x` | `number` | 容器 X 偏移（所有子元素最终坐标会叠加该偏移） |
+| `y` | `number` | 容器 Y 偏移（所有子元素最终坐标会叠加该偏移） |
+| `width` | `number` | 容器宽度（用于布局计算与对齐） |
+| `height` | `number` | 容器高度（用于布局计算与对齐） |
+| `colSpace` | `number` | 列间距（横向相邻元素的水平间距） |
+| `rowSpace` | `number` | 行间距（纵向相邻元素的垂直间距） |
+| `direction` | `LayoutDirection` | 主轴方向：`horizontal` 横排；`vertical` 竖排 |
+| `mode` | `LayoutMode` | 主轴对齐：`left` 左对齐、`right` 右对齐、`center` 居中、`between` 两端对齐（均分间距） |
+| `anchor` | `LayoutAnchor` | 交叉轴锚点：`top` 顶部对齐、`bottom` 底部对齐 |
+| `wrap` | `boolean` | 是否自动换行/换列（主轴空间不足时） |
+
+> 注：元素尺寸来自自身 `getBoundRect()` 的 `width/height`；排版后容器会将计算位置写入每个图形的 `x,y`，并标记 `needsUpdate = true`。
+
+## 方法
+
+### 构造函数
+
+#### `constructor(canvas: ICanvas)`
+创建布局容器实例，并以画布宽高作为默认的容器宽高。
+- `canvas`: 画布实例
+
+### 基础设置
+
+#### `addShape(shapes: Shape[]): void`
+添加参与布局的图形（按 `id` 去重）。
+
+#### `setsX(x: number): void`
+设置容器 X 偏移。
+
+#### `setsY(y: number): void`
+设置容器 Y 偏移。
+
+#### `setsPosition(x: number, y: number): void`
+同时设置容器 X/Y 偏移。
+
+#### `setsSize(w: number, h: number): void`
+设置容器尺寸。
+
+#### `setsWidth(w: number): void`
+设置容器宽度。
+
+#### `setsHeight(h: number): void`
+设置容器高度。
+
+### 布局配置
+
+#### `setsSpaceCol(space: number): void`
+设置列间距（横向相邻元素的水平间距）。
+
+#### `setsSpaceRow(space: number): void`
+设置行间距（纵向相邻元素的垂直间距）。
+
+#### `setsSpace(col: number, row: number): void`
+同时设置列/行间距。
+
+#### `setsLayoutDirection(direction: LayoutDirection): void`
+设置主轴方向（`horizontal`/`vertical`）。
+
+#### `setsMode(mode: LayoutMode): void`
+设置主轴对齐模式（`left`/`right`/`between`/`center`）。
+
+#### `setsAnchor(anchor: LayoutAnchor): void`
+设置交叉轴锚点（`top`/`bottom`）。
+
+#### `setsWrap(value: boolean): void`
+设置是否自动换行/换列。
+
+### 执行布局
+
+#### `render(): void`
+根据当前配置计算并写入每个子元素的 `x,y`。规则：
+- 使用元素 `getBoundRect()` 的 `width/height` 参与计算；
+- 横向布局（`horizontal`）：
+  - `left` 从左开始排布；`right` 从右对齐；`center` 居中；`between` 两端对齐均分间距；
+  - `anchor = top` 行内元素顶部对齐；`anchor = bottom` 行内元素底部对齐；
+  - `wrap = true` 时，主轴不足自动换到下一行；行间距用 `rowSpace`；
+- 纵向布局（`vertical`）：
+  - `left/center/right/between` 用于列内的水平对齐/分布；
+  - `anchor = top` 从上向下；`anchor = bottom` 从下向上对齐；
+  - `wrap = true` 时，主轴不足自动换到下一列；列间距用 `colSpace`；
+- 最终位置会叠加容器 `x,y` 偏移；
+- 执行后会为所有子元素设置 `needsUpdate = true`。
+
+## 使用示例
+
+### 横向排布（不换行）
+
+```typescript
+const layout = new ILayout(canvas)
+layout.setsPosition(50, 40)
+layout.setsSize(600, 120)
+layout.setsLayoutDirection('horizontal')
+layout.setsMode('between')
+layout.setsAnchor('top')
+layout.setsSpace(20, 12)
+
+layout.addShape([rect1, rect2, rect3])
+layout.render()
+```
+
+### 横向排布（自动换行）
+
+```typescript
+layout.setsLayoutDirection('horizontal')
+layout.setsWrap(true)
+layout.setsSpace(16, 10)
+layout.setsMode('left')
+layout.setsAnchor('bottom')
+
+layout.addShape(cards) // 多个不同尺寸的元素
+layout.render()
+```
+
+### 纵向排布（不换列，居中对齐）
+
+```typescript
+layout.setsLayoutDirection('vertical')
+layout.setsWrap(false)
+layout.setsMode('center')
+layout.setsAnchor('top')
+layout.setsSpace(24, 12)
+
+layout.addShape([img1, img2, img3])
+layout.render()
+```
+
+## 对齐与分布策略说明
+
+- `left/right/center`：控制主轴方向上的整体对齐；
+- `between`：在可用主轴空间内均分相邻元素间距；
+- `top/bottom`（anchor）：控制交叉轴内元素在行/列中的垂直（横向布局）或水平（纵向布局）对齐；
+- `wrap`：主轴空间不足时换到下一行/列。
+
+## 注意事项
+
+1. 排版尺寸基于各元素 `getBoundRect()` 的 `width/height`，不同图形实现可能包含描边等 padding 修正。
+2. 容器 `x,y` 作为整体偏移叠加在最终坐标上，不会改变元素自身的包围盒尺寸计算。
+3. `between` 在仅有一个元素时等效于 `left`/`top` 对齐。
+4. 执行 `render()` 后，元素会标记 `needsUpdate = true`，以触发画布更新。
+5. 如需更复杂的交叉轴对齐（如每行垂直居中/拉伸），可在后续版本扩展。