ICanvas - 自动排版

注意

自动排版有一定的局限性，如果你对部分元素排版出现了问题建议移除。它对规则类图形会比较友好比如矩形，文本; 如果像圆，圆弧，扇形等，它排版时会减去它的radius，从而让x,y向左/右偏移，排版时要注意这些。

创建排版

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 { Tween } from '@/uni_modules/tmx-ui/core/canvas/lib/animation/tween.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 }));

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

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