t-canvas-engine

CanvasEngine 画布引擎

t-canvas-engine 组件介绍

t-canvas-engine 是一个基于 Canvas 的高性能渲染引擎组件，提供了丰富的绘制、手势和动画交互功能。组件封装了底层的 Canvas 操作，支持跨平台使用，适用于需要复杂绘制和交互的场景，如自定义图表、游戏、动画效果等。

t-canvas-engine 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-canvas-engine 基础用法

基础用法参考 demo/engine/engine.uvue，通过 initFinished 事件获取引擎实例进行操作。

<template>
	<view class="p-15">
		<t-card class="mb-15"
				title="Canvas Engine 画布引擎"
				sub-title="自研canvas flex布局渲染引擎，支持复杂UI的高性能绘制，解决移动端DOM渲染性能问题"></t-card>

		<t-card class="mb-15">
			<view class="p-10">
				<text class="sfwb mb-10">功能特性</text>
				<view class="pl-10">
					<text class="mb-5">• 基于Canvas的高性能渲染</text>
					<text class="mb-5">• 支持Flex布局系统</text>
					<text class="mb-5">• 完整的事件系统</text>
					<text class="mb-5">• 组件化架构</text>
					<text class="mb-5">• 支持复杂UI绘制</text>
					<text class="mb-5">• 支持声明式写法</text>
					<text class="mb-5">• 支持模版字符串编译为canvas绘制代码</text>
				</view>
			</view>
		</t-card>

		<t-card class="mb-15">
			<view class="p-10">
				<text class="sfwb mb-10">使用参考</text>
				<text class="mb-8">t-canvas-engine 是一个底层渲染引擎，您可以参考以下组件的实现方式：</text>
				<view class="pl-10">
					<view class="fl fww mb-5">
						<text>• </text>
						<text class="c-blue">t-table</text>
						<text> - 表格组件（声明式写法）</text>
					</view>
					<view class="fl fww mb-5">
						<text>• </text>
						<text class="c-blue">t-color</text>
						<text> - 颜色选择器（模版字符串编译为canvas绘制代码）</text>
					</view>
					<view class="fl fww mb-5">
						<text>• </text>
						<text class="c-blue">t-slider-menu</text>
						<text> - 侧边菜单，复杂场景展示</text>
					</view>
					<view class="fl fww mb-5">
						<text>• </text>
						<text class="c-blue">t-calendar</text>
						<text> - 日历组件（展示无swiper纯canvas实现切换动画）</text>
					</view>
				</view>
			</view>
		</t-card>

		<t-card class="mb-15">
			<view class="p-10">
				<text class="sfwb mb-10">应用场景</text>
				<view class="pl-10">
					<text class="mb-5">• 复杂数据表格</text>
					<text class="mb-5">• 高性能列表</text>
					<text class="mb-5">• 自定义交互组件</text>
					<text class="mb-5">• 数据可视化</text>
					<text class="mb-5">• 游戏界面</text>
				</view>
			</view>
		</t-card>

		<t-card>
			<view class="p-10">
				<text class="sfwb mb-10">技术优势</text>
				<view class="pl-10">
					<text class="mb-5">• 解决移动端DOM渲染瓶颈</text>
					<text class="mb-5">• 支持大量元素的高效渲染</text>
					<text class="mb-5">• 统一的跨平台渲染效果</text>
					<text class="mb-5">• 灵活的组件扩展机制</text>
				</view>
			</view>
		</t-card>
	</view>
</template>

<script setup>

</script>

t-canvas-engine Props

属性名	说明	类型	默认值
mode	引擎模式	string	'uts'

t-canvas-engine Events

事件名	说明	回调参数
initFinished	引擎初始化完成时触发，返回引擎实例	TuiEngine
layoutComputed	布局计算完成时触发	ITuiElement, TuiEngine
touchstart	触摸开始时触发	TuiTouchEvent
touchend	触摸结束时触发	TuiTouchEvent
touchmove	触摸移动时触发	TuiTouchEvent
touchcancel	触摸取消时触发	TuiTouchEvent

t-canvas-engine Slots

插槽名	说明
default	默认插槽，用于在 Canvas 上添加额外的内容