ICanvas - 入门教程

创建画布实例

uts

import { ICanvas } from '@/uni_modules/tmx-ui/core/canvas/ICanvas.uts';
import { CanvasEventType, ICanvasEvent } from '@/uni_modules/tmx-ui/core/canvas/interface.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 }));

// 渲染画布
render.render()

vue

<canvas :id="canvasId"  style="width: 100%;height: 350px;" ref="canvasDom">
</canvas>

为画布绑定事件

uts

import { ICanvas } from '@/uni_modules/tmx-ui/core/canvas/ICanvas.uts';
import { CanvasEventType, ICanvasEvent } from '@/uni_modules/tmx-ui/core/canvas/interface.uts';
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

<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>