Tui Plus Vapor

Appearance

t-canvas-engine ​

CanvasEngine 画布引擎

组件介绍 ​

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

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

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

vue
<template>
  <t-canvas-engine ref="engineRef" class="twh-800-500 bg-#fff r-20" @initFinished="engineInit"></t-canvas-engine>
</template>

<script setup>
const engineRef = ref<any>(null);

function engineInit(engine) {
  // 创建视图元素
  const view = engine.createView();
  view.style.width = 200;
  view.style.height = 200;
  view.style.backgroundColor = '#2979ff';
  view.style.borderRadius = 10;
  view.style.position = 'absolute';
  view.style.left = 100;
  view.style.top = 100;
  
  // 添加到引擎
  engine.element = view;
  
  // 计算布局并更新
  engine.computelayout(view, null);
  engine.updatePos(view);
  engine.updateElement(view, false);
  
  // 添加点击事件
  view.addEventListener('click', () => {
    console.log('View clicked!');
  });
}
</script>

Props ​

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

Events ​

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

Slots ​

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