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/02./347/224/273/345/270/203/347/261/273/345/236/213.md

@@ -0,0 +1,266 @@
+---
+outline: deep
+---
+
+# ICanvas - Library
+
+```ts
+
+import { ICanvas } from '@/uni_modules/tmx-ui';
+export type ShapeType = any;
+/** 旋转元素时的中心点,默认是topLeft左顶,center表示元素的中间 */
+export type ITextAlignType = 'left' | 'center' | 'right';
+export type ITextBaselineType = 'top' | 'middle' | 'bottom';
+export type ILineJoinType = "round" | "bevel" | "miter";
+export type ILineCapType = "butt" | "round" | "square";
+export type CanvasRotateCenter = "topLeft"|"center"|"topRight"|"bottomLeft"|"bottomRight"
+export type DirectionEventType = 'down' | 'move' | 'up';
+
+export type InteractionEventType = 'click' | 'longpress' | 'dbclick' | 'cancel';
+export type CanvasEventType = DirectionEventType | InteractionEventType;
+export type ShapeSetAttrType = string | number | boolean | Array<string>
+export type IShapeVector2d = {
+	x:number,
+	y:number
+}
+export type ICanvasEvent = {
+    type: CanvasEventType;
+	/** 在画布上的坐标X */
+    x: number;
+	/** 在画布上的坐标Y */
+    y: number;
+	detail:IcanvasDomEventDetail[],
+	touches:ICanvasEvent[];
+    target: ShapeType[];
+}
+export type IcanvasDomEventDetail = {
+	startX:number,
+	startY:number,
+	endX:number,
+	endY:number,
+	moveX:number,
+	moveY:number,
+	/** 相对上一次移动的距离*/
+	moveLenX:number,
+	/** 相对上一次移动的距离*/
+	moveLenY:number,
+	/** 相对起始时到当前位置移动的距离*/
+	endLenX:number,
+	/** 相对起始时到当前位置移动的距离*/
+	endLenY:number
+	// /** 多点触摸时,两点之间的距离 */
+	// touchesLenX:number,
+	// /** 多点触摸时,两点之间的距离 */
+	// touchesLenY:number
+}
+export type ICanvasDomEvent = {
+    type: CanvasEventType;
+    x: number;
+    y: number;
+	detail:IcanvasDomEventDetail[],
+	touches:ICanvasDomEvent[];
+}
+
+export type IEventListener = (event: ICanvasEvent) => void;
+
+export type  IEventShape = {
+	type: CanvasEventType;
+	x: number;
+	y: number;
+	/** 元素本身内的坐标X */
+	layerX:number;
+	/** 元素本身内的坐标Y */
+	layerY:number;
+	touches:IEventShape[];
+	target:ShapeType
+}
+export type IEventShapeListener =  (event: IEventShape) => void;
+
+export type IEventMap = Map<string, IEventListener[]>;
+export type ICanvasOptional = {
+	/** 选式时传递当前组件this,组合式传递 getCurrentInstance()?.proxy ?? null */
+	component:any|null,
+	/** 画布id */
+	canvasId:string,
+}
+export type IShapeOptional = {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    visible?: boolean;
+    rotation?: number;
+    scaleX?: number;
+    scaleY?: number;
+	/** 元素相对舞台x坐标系的坐标，就是x,y为起始点，如果x,y为0就相当于是舞台的顶左 **/
+    offsetX?: number;
+	/** 元素相对舞台y坐标系的坐标，就是x,y为起始点，如果x,y为0就相当于是舞台的顶左 **/
+    offsetY?: number;
+    draggable?: boolean;
+	// 元素之间上下重叠时，是否允许穿透冒泡逐层触发，默认不允许
+	bubbleEvent?: boolean;
+	rotateCenter?:CanvasRotateCenter;
+	
+	// 线条样式
+	lineJoin?: ILineJoinType;
+	lineDashOffset?: number;
+	lineDash ?:number[] ;
+	lineCap?: ILineCapType;
+	
+	src?:string;
+	// 二维码的前景块的颜色。
+	foreground?:string;
+	// 二维码内容。
+	qrcodeText?:string;
+	
+	text?: string;
+	fontSize?: number;
+	fontFamily?: string;
+	textAlign?: ITextAlignType;
+	textBaseline?: ITextBaselineType;
+	padding?: number;
+	lineHeight?: number;
+	
+	innerRadius ?: number;
+	outerRadius ?: number;
+	startAngle ?: number;
+	endAngle ?: number;
+	
+	radius ?:number;
+	
+	sides ?:number;
+	//多边形线的点
+	points ?:number[];
+	//多边形线是否自动闭合
+	closed ?:boolean;
+	// 多边线将连接线曲线化
+	tension ?:number
+	//将曲线平滑化
+	bezier ?:boolean;
+    // 椭圆的小径
+	radiusX ?:number
+	//椭圆的大径
+	radiusY ?:number
+	//星的角数量,默认5角星
+	numPoints ?: number;
+	
+	pointStart?:IShapeVector2d;
+	pointEnd?:IShapeVector2d;
+	
+	strokeGradient?:string[];
+	fillGradient?:string[];
+	clip?:boolean;
+	zIndex?:number;
+	textBgColor?:string;
+}
+export type IShapeBoundRect = {
+	x : number,
+	y : number,
+	height : number,
+	width : number
+}
+
+export type QrGenerateFrameResult = {
+	frameBuffer: number[], 
+	width: number
+}
+export interface IShape {
+	canvas : ICanvas,
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    opacity: number;
+    visible: boolean;
+    rotation: number;
+    scaleX: number;
+    scaleY: number;
+	/** 元素相对舞台x坐标系的坐标，就是x,y为起始点，如果x,y为0就相当于是舞台的顶左 **/
+    offsetX: number;
+	/** 元素相对舞台y坐标系的坐标，就是x,y为起始点，如果x,y为0就相当于是舞台的顶左 **/
+    offsetY: number;
+    draggable: boolean;
+	// 元素之间上下重叠时，是否允许穿透冒泡逐层触发，默认不允许
+	bubbleEvent: boolean;
+	rotateCenter:CanvasRotateCenter;
+	/**toggle方法中的选中状态 */
+	toggleStatus:boolean;
+	
+
+	
+	// 线条样式
+	lineJoin: ILineJoinType;
+	lineDashOffset: number;
+	lineDash:number[] 
+	lineCap: ILineCapType;
+	
+	// text数据
+	
+	text : string;
+	fontSize : number;
+	fontFamily : string ;
+	textAlign : ITextAlignType;
+	textBaseline : ITextBaselineType;
+	padding : number;
+	lineHeight : number;
+	
+	//ring数据
+	
+	innerRadius : number;
+	outerRadius : number;
+	startAngle : number;
+	endAngle : number;
+	
+	radius :number;
+	sides: number;
+	
+	src:string;
+	
+	// 二维码的前景块的颜色。
+	foreground:string;
+	// 二维码内容。
+	qrcodeText:string;
+	
+	points :number[];
+	//多边形线是否自动闭合
+	closed :boolean;
+	// 多边线将连接线曲线化
+	tension:number
+	bezier :boolean;
+
+	// 椭圆的小径
+	radiusX :number;
+	//椭圆的大径
+	radiusY :number;
+	
+	//星的角数量,默认5角星
+	numPoints: number;
+	
+	pointStart:IShapeVector2d;
+	pointEnd:IShapeVector2d;
+
+	strokeGradient:string[];
+	fillGradient:string[];
+	
+	clip:boolean;
+	zIndex:number;
+	textBgColor:string;
+	drag : (eventName : CanvasEventType, parentEventDetail : ICanvasEvent) => void
+	
+    draw(ctx: CanvasRenderingContext2D): void;
+    isPointInPath(x: number, y: number,shapeId:string): boolean;
+	getBoundRect() : IShapeBoundRect;
+	setAttr(key:string,value:any):void;
+	getAttr(key: string): any | null;
+	toggle(call:(status:boolean,target:any)=>void):void;
+}
+
+
+```

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/10./346/241/210/344/276/213/01./346/227/213/350/275/254/345/274/200/345/205/263.md

@@ -0,0 +1,23 @@
+---
+outline: deep
+---
+
+# ICanvas - 旋转开关
+
+
+## 演示
+
+<ViewMobile url="/pages/libs/canvasRotarySwitch" />
+
+## 介绍
+
+这一个旋转开关，主要演示如何控制手势旋转控制不同元素。以及如何绘制不同的元素方法，及局部更新。
+
+## 示例源码
+
+::: details uvue
+
+<<< ../../../../../pages/libs/canvasRotarySwitch.uvue{vue}
+
+:::
+

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/10./346/241/210/344/276/213/02./350/277/220/345/212/250/346/211/213/347/216/257.md

@@ -0,0 +1,23 @@
+---
+outline: deep
+---
+
+# ICanvas - 运动手环
+
+
+## 演示
+
+<ViewMobile url="/pages/libs/canvasWatchSportOne" />
+
+## 介绍
+
+这是一个常见的手环旋转动画，主要学习点是演示如何让元素循环播放动画，以及控制进度点，数字之间的更新和转换。
+
+## 示例源码
+
+::: details uvue
+
+<<< ../../../../../pages/libs/canvasWatchSportOne.uvue{vue}
+
+:::
+

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/10./346/241/210/344/276/213/03./350/257/255/351/237/263/345/275/225/345/210/266/346/263/242.md

@@ -0,0 +1,23 @@
+---
+outline: deep
+---
+
+# ICanvas - 语音录制波
+
+
+## 演示
+
+<ViewMobile url="/pages/libs/canvasVoiceLine" />
+
+## 介绍
+
+这是语音录制绘制线条的动画，主要是演示如何批量的绘制元素并添加动画。
+
+## 示例源码
+
+::: details uvue
+
+<<< ../../../../../pages/libs/canvasVoiceLine.uvue{vue}
+
+:::
+

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/10./346/241/210/344/276/213/04./350/207/252/345/212/250/346/216/222/347/211/210.md

@@ -0,0 +1,23 @@
+---
+outline: deep
+---
+
+# ICanvas - 语音录制波
+
+
+## 演示
+
+<ViewMobile url="/pages/libs/canvasLayout" />
+
+## 介绍
+
+可能ILayout排版引擎可以对添加进的元素自动排版。
+
+## 示例源码
+
+::: details uvue
+
+<<< ../../../../../pages/libs/canvasLayout.uvue{vue}
+
+:::
+

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/10./346/241/210/344/276/213/05./346/265/267/346/212/245/347/273/230/345/210/266.md

@@ -0,0 +1,23 @@
+---
+outline: deep
+---
+
+# ICanvas - 语音录制波
+
+
+## 演示
+
+<ViewMobile url="/pages/libs/canvasPic" />
+
+## 介绍
+
+演示如何绘制图片，二维码并生成海报图片。
+
+## 示例源码
+
+::: details uvue
+
+<<< ../../../../../pages/libs/canvasPic.uvue{vue}
+
+:::
+

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/20./345/205/245/351/227/250/346/225/231/347/250/213/01./345/210/233/345/273/272/347/224/273/345/270/203/345/256/236/344/276/213.md

@@ -0,0 +1,77 @@
+---
+outline: deep
+---
+
+# ICanvas - 入门教程
+
+
+## 创建画布实例
+
+::: code-group
+
+```ts [uts]
+import { ICanvas } from '@/uni_modules/tmx-ui';
+import { CanvasEventType, ICanvasEvent } 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 }));
+
+// 渲染画布
+render.render()
+
+```
+
+```vue [vue]
+
+<canvas :id="canvasId"  style="width: 100%;height: 350px;" ref="canvasDom">
+</canvas>
+
+```
+
+:::
+
+
+## 为画布绑定事件
+
+::: code-group
+
+```ts [uts]
+import { ICanvas } from '@/uni_modules/tmx-ui';
+import { CanvasEventType, ICanvasEvent } from '@/uni_modules/tmx-ui';
+const proxy = getCurrentInstance()?.proxy ?? null;
+const canvasId = "xCanvas-" + Math.random().toString(16).substring(4)
+// xcanvas就是画布实例
+const xcanvas = ref<ICanvas>(new ICanvas({ canvasId: canvasId,component: proxy as any | null }));
+
+// 绑定事件
+const bindEvents = (evt : UniTouchEvent | UniPointerEvent | UniMouseEvent) => {
+	xcanvas.value.bindEvent(evt)
+}
+
+```
+
+```vue [vue]
+
+<canvas 
+:id="canvasId"  
+
+@click="bindEvents"
+@touchstart="bindEvents" 
+@touchmove="bindEvents"
+@touchend="bindEvents" 
+@touchcancel="bindEvents" 
+@mousedown="bindEvents" 
+@mousemove="bindEvents"
+@mouseup="bindEvents"
+ 
+<!-- #ifdef WEB -->
+@mouseleave="bindEvents"
+<!-- #endif -->
+
+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/20./345/205/245/351/227/250/346/225/231/347/250/213/05./347/224/273/345/270/203/345/261/236/346/200/247/346/226/271/346/263/225.md

@@ -0,0 +1,153 @@
+---
+outline: deep
+---
+
+# ICanvas - 入门教程
+
+## 画布属性方法
+
+ICanvas是画布的核心类，负责管理画布上下文、图形元素、事件处理等。
+
+## 属性
+
+### 基础属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `canvas` | CanvasContext \| null | null | Canvas上下文对象 |
+| `ctx` | CanvasRenderingContext2D \| null | null | Canvas 2D渲染上下文 |
+| `canvasNode` | NodeInfo \| null | null | Canvas节点信息 |
+| `width` | number | 0 | 画布宽度 |
+| `height` | number | 0 | 画布高度 |
+| `boxWidth` | number | 0 | 画布容器宽度 |
+| `boxHeight` | number | 0 | 画布容器高度 |
+| `dpr` | number | 1 | 设备像素比 |
+| `id` | string | random | 画布唯一标识符 |
+| `component` | any \| null | null | 组件实例,选项式传this,组合式传proxy |
+| `canvasId` | string | - | Canvas元素ID |
+
+### 事件配置属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `checkPointInHitEvents` | CanvasEventType[] | ['click'] | 命中检测事件范围 |
+
+::: warning 注意
+
+`checkPointInHitEvents`用于控制哪些事件会进行命中检测，默认只对click事件进行检测，全放开会有性能风险。
+
+:::
+
+### 私有属性
+
+| 属性名 | 类型 | 说明 |
+|--------|------|------|
+| `touch_x` | number | 触摸起始X坐标 |
+| `touch_y` | number | 触摸起始Y坐标 |
+| `touch_move_x` | number | 触摸移动X坐标 |
+| `touch_move_y` | number | 触摸移动Y坐标 |
+| `touch_end_x` | number | 触摸结束X坐标 |
+| `touch_end_y` | number | 触摸结束Y坐标 |
+| `touch_end_len_x` | number | 触摸结束相对起始X距离 |
+| `touch_end_len_y` | number | 触摸结束相对起始Y距离 |
+| `touch_move_len_x` | number | 触摸移动相对上次X距离 |
+| `touch_move_len_y` | number | 触摸移动相对上次Y距离 |
+| `touchStartTime` | number | 触摸开始时间 |
+| `touchEndTime` | number | 触摸结束时间 |
+
+## 方法
+
+### 构造函数
+
+#### `constructor(config: ICanvasOptional)`
+创建画布实例
+- `config`: 画布配置对象
+  - `canvasId`: Canvas元素ID
+  - `component`: 组件实例
+
+### 初始化方法
+
+#### `init(): Promise<any | null>`
+初始化画布，获取Canvas上下文和尺寸信息
+- 返回值: Promise，resolve时返回画布实例
+
+### 图形管理方法
+
+#### `addShape(shape: ShapeType): ICanvas`
+添加图形到画布
+- `shape`: 要添加的图形实例
+- 返回值: 当前画布实例
+
+#### `removeShape(shape: ShapeType): ICanvas`
+从画布移除图形
+- `shape`: 要移除的图形实例
+- 返回值: 当前画布实例
+
+### 渲染方法
+
+#### `clear(): ICanvas`
+清空画布
+- 返回值: 当前画布实例
+
+#### `render(): ICanvas`
+渲染所有图形到画布
+- 返回值: 当前画布实例
+
+#### `update(): ICanvas`
+更新画布，只渲染需要更新的图形
+- 返回值: 当前画布实例
+
+### 图像导出方法
+
+#### `getImage(): Promise<string>`
+导出画布为图片
+- 返回值: `Promise<string>`，图片路径或URL
+
+::: tip 平台差异
+- **WEB/H5**: 返回Blob URL
+- **APP**: 返回临时文件路径
+- **小程序**: 返回临时文件路径
+:::
+
+### 事件处理方法
+
+#### `bindEvent(eventType: any): void`
+绑定外部事件到画布，实现事件分发
+- `eventType`: 事件对象
+
+::: tip 支持的事件类型
+- **触摸事件**: touchstart, touchmove, touchend, touchcancel
+- **鼠标事件**: mousedown, mousemove, mouseup, mouseleave
+- **转换事件**: down, move, up, click, dbclick, longpress, cancel
+:::
+
+#### `addEventListener(eventName: CanvasEventType, listener: IEventListener): ICanvas`
+添加画布事件监听器
+- `eventName`: 事件类型
+- `listener`: 事件处理函数
+- 返回值: 当前画布实例
+
+#### `removeEventListener(eventName: CanvasEventType, listener: IEventListener): ICanvas`
+移除画布事件监听器
+- `eventName`: 事件类型
+- `listener`: 事件处理函数
+- 返回值: 当前画布实例
+
+
+
+## 事件处理流程
+
+1. **事件绑定**: 通过`bindEvent`方法绑定外部事件
+2. **事件转换**: 将触摸/鼠标事件转换为统一的事件格式
+3. **命中检测**: 根据`checkPointInHitEvents`配置进行命中检测
+4. **事件分发**: 将事件分发给相应的图形元素
+5. **拖拽处理**: 自动处理可拖拽图形的移动
+
+## 注意事项
+
+1. 画布初始化是异步的，需要等待`init()`完成
+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/20./345/205/245/351/227/250/346/225/231/347/250/213/10./345/210/233/345/273/272/345/205/203/347/264/240.md

@@ -0,0 +1,45 @@
+---
+outline: deep
+---
+
+# ICanvas - 入门教程
+
+
+## 创建元素
+
+::: code-group
+
+```ts [uts]
+import { ICanvas } from '@/uni_modules/tmx-ui';
+import { CanvasEventType, ICanvasEvent } from '@/uni_modules/tmx-ui';
+
+// 导入一个矩形图形
+import { IRect } from '@/uni_modules/tmx-ui/core/canvas/lib/rect.uts';
+
+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)
+
+// 渲染画布
+render.render()
+
+```
+
+```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/20./345/205/245/351/227/250/346/225/231/347/250/213/20./345/205/203/347/264/240/345/261/236/346/200/247/346/226/271/346/263/225.md

@@ -0,0 +1,10 @@
+---
+outline: deep
+---
+
+# ICanvas - 入门教程
+
+基础元素属性方法见`Shape`，它是所有基础图形的底层。
+见：[Shape](/40.工具库/30.画布/50.图形系统/01.Shape.md)
+
+