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

// 导入一个矩形图形
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

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