更新记录

1.0.0（2026-06-24） 下载此版本

首版发布

TuiEntine Canvas Flex 布局渲染引擎首个正式版本。

新增

• 完整 Flex 布局算法：主轴/交叉轴/换行/对齐
• 内置组件：View、Text、Image、Button
• 事件系统：touch 事件、click 自动识别、冒泡与捕获
• Canvas 渲染器：增量渲染、离屏渲染、缓存优化
• 圆角矩形点击命中检测
• 样式系统：支持 borderRadius、transform 等
• 缓动函数
• 布局计算引擎

平台兼容性

uni-app x(5.13)

其他

TuiEntine Canvas Flex 渲染引擎

基于 Canvas 实现的 Flex 布局渲染引擎，用于复杂 UI 的高性能全 Canvas 绘制。

核心能力

Flex 布局系统

• 主轴方向：row、row-reverse、column、column-reverse
• 主轴对齐：flex-start、flex-end、center、space-between、space-around
• 交叉轴对齐：flex-start、flex-end、center、stretch、baseline
• 换行控制：nowrap、wrap、wrap-reverse

内置组件

• View — 容器视图，支持 Flex 布局
• Text — 文本渲染
• Image — 图片绘制
• Button — 按钮交互

事件系统

• touchstart / touchmove / touchend / touchcancel
• click（自动识别，300ms 内移动 <10px 判定为点击）
• 事件冒泡与捕获，支持 stopPropagation

渲染优化

• 增量渲染，只重绘变化部分
• 离屏 Canvas 渲染
• 缓存机制减少重复计算

使用

import { TuiEngine } from '@/uni_modules/tui-entine'

function initFinished(engine: TuiEngine) {
  const view = engine.createView()
  view.style.flexDirection = 'row'
  view.style.justifyContent = 'center'

  const text = engine.createText()
  text.value = 'Hello TuiEntine'
  view(text)

  engine.draw(view, classTree)
}

搭配 t-canvas-engine 组件使用：

<t-canvas-engine class="h-300px"
  @initFinished="initFinished"
  @touchstart="touchstart" />

文档

完整文档：https://yundie.xyz/tuiplusvapor/index.html

许可证

MIT