相关文件

本节列出了 tui-entine 渲染引擎的相关文件，帮助你了解其内部结构和实现。

核心文件

引擎主文件

• uni_modules/tui-entine/index.uts
  • 引擎的主入口文件
  • 定义了 TuiEngine 类，实现了 ITuiEngine 接口
  • 提供了元素创建、布局计算、绘制和事件处理等核心功能

类型定义

• uni_modules/tui-entine/types/index.uts
  • 定义了所有类型和接口
  • 包括 ITuiEngine、ITuiElement、ITuiStyle 等核心接口
  • 定义了事件类型、样式类型等

组件实现

基础组件

• uni_modules/tui-entine/components/element.uts

  • 基础元素类 TuiElement
  • 实现了 ITuiElement 接口
  • 提供了元素的基本属性和方法

• uni_modules/tui-entine/components/view.uts

  • 视图组件 TuiView
  • 继承自 TuiElement
  • 用于创建容器元素

• uni_modules/tui-entine/components/text.uts

  • 文本组件 TuiText
  • 继承自 TuiElement
  • 支持文本内容、字体样式等

• uni_modules/tui-entine/components/image.uts

  • 图片组件 TuiImage
  • 继承自 TuiElement
  • 支持图片加载、错误处理等

• uni_modules/tui-entine/components/button.uts

  • 按钮组件 TuiButton
  • 继承自 TuiElement
  • 支持按钮文本、禁用状态等

核心功能

布局计算

• uni_modules/tui-entine/core/layout.uts
  • 布局计算模块
  • 实现了 Flex 布局算法
  • 处理元素的尺寸和位置计算

渲染逻辑

• uni_modules/tui-entine/core/render.uts
  • 渲染模块
  • 负责将元素树绘制到 Canvas 上
  • 处理元素的绘制顺序和层级

样式处理

• uni_modules/tui-entine/core/style.uts
  • 样式模块
  • 定义了 TuiStyle 类
  • 处理元素的样式属性

工具函数

• uni_modules/tui-entine/core/util.uts
  • 工具函数模块
  • 提供了文本测量、GUID 生成等工具方法

动画效果

• uni_modules/tui-entine/core/easing.uts
  • 缓动函数模块
  • 提供了各种动画缓动效果

接口定义

引擎接口

interface ITuiEngine {
  // 像素比
  dpr: number;
  // Canvas 上下文相关
  context: CanvasContext | null;
  ctx: CanvasRenderingContext2D | null;
  classTree: UTSJSONObject;
  // 布局尺寸与坐标
  width: number;
  height: number;
  x: number;
  y: number;
  element: ITuiElement | null;
  dom: Map<string, ITuiElement>;

  updateRect(rect: NodeInfo): void;
  createView(): ITuiView;
  createText(): ITuiText;
  createImage(): ITuiImage;
  createButton(): ITuiButton;

  computelayout(e: ITuiElement, css: UTSJSONObject | null): void;
  updatePos(e: ITuiElement): void;
  draw(e: ITuiElement, css: UTSJSONObject | null): void;

  getElementById(id: string): ITuiElement | null;
  updateElement(e: ITuiElement, clear: boolean | null): void;
  measureText(text: string, fontSize: number): number;
  init(e: CanvasContext, callback: (e: ITuiElement) => void): void;
  handleTouchEvent(e: TuiTouchEvent): void;
  cached(): void;
  clearCached(): void;
}

元素接口

interface ITuiElement {
  // == 标识与类名 ==
  id: string;
  class: string;
  hoverClass: string;
  tagName: string;
  shouldUpdate: boolean;
  isDirty: boolean;
  lineIndex: number;
  nextAbsoluteChild?: ITuiElement;
  nextFlexChild?: ITuiElement;
  // == 布局与尺寸 (Layout / Offset) ==
  offsetWidth: number;
  offsetHeight: number;
  offsetParent?: ITuiElement;

  // == 内容与 HTML (Content) ==
  innerHTML: string;
  textContent?: string;
  innerText: string;

  style: ITuiStyle;
  children: ITuiElement[];
  parentNode?: ITuiElement;
  firstChild?: ITuiElement;
  lastChild?: ITuiElement;
  nextSibling?: ITuiElement;
  previousSibling?: ITuiElement;
  contentWidth: number;
  contentHeight: number;
  // 滚动位置
  scrollHeight: number;
  scrollWidth: number;
  imageData?: ImageData;
  cached: boolean;
  iscached: boolean;
  eventMap: Map<number, TuiCallbackWrapper>;

  // == 生命周期 ==
  connectedCallback(): void;
  disconnectedCallback(): void;
  adoptedCallback(): void;
  attributeChangedCallback(
    name: string,
    oldValue?: string,
    newValue?: string,
  ): void;

  // == DOM 操作 ==
  querySelector(selector: string): ITuiElement | null;
  querySelectorAll(selector: string): ITuiElement[];
  appendChild(...spreadChild: ITuiElement[]): void;
  prependChild(...spreadChild: ITuiElement[]): void;
  removeChild(child: ITuiElement): ITuiElement;
  insertBefore(newNode: ITuiElement, referenceNode?: ITuiElement): ITuiElement;
  replaceChild(newChild: ITuiElement, oldChild: ITuiElement): ITuiElement;

  getAttribute(name: string): string | null;
  setAttribute(name: string, value: string): void;
  removeAttribute(name: string): void;
  hasAttribute(name: string): boolean;

  // == 渲染与事件 ==
  render(): void;
  addEventListener(
    type: string,
    listener: (event: ITuiTouchEvent) => void,
  ): number;
  removeEventListener(listener: number): void;

  // == 工具方法 ==
  cloneNode(deep?: boolean): ITuiElement;
  getBoundingClientRect(): TuiDOMRect;
  setStyles(e: UTSJSONObject): void;
  // 滚动到指定位置
  layout: ILayoutRect;
  lastLayout: ILayoutRect;
}

样式接口

interface ITuiStyle {
  // 尺寸
  width?: number;
  height?: number;
  minWidth?: number;
  minHeight?: number;
  maxWidth?: number;
  maxHeight?: number;
  alignContent?: string;
  flex: number;
  measure?: (width: number) => IMeasureSize;
  textShadowColor: string | null;
  textShadowBlur: number | null;
  textShadowOffsetX: number | null;
  textShadowOffsetY: number | null;
  overflow: string;
  display?: string;
  visibility?: string;
  rotateX: number;
  rotateY: number;
  // 定位
  left: number;
  right: number;
  top: number;
  bottom: number;
  direction: string;
  // 外边距
  margin: number;
  marginLeft: number;
  marginRight: number;
  marginTop: number;
  marginBottom: number;
  marginStart?: number;
  marginEnd?: number;
  // 内边距
  padding: number;
  paddingLeft: number;
  paddingRight: number;
  paddingTop: number;
  paddingBottom: number;
  paddingStart?: number;
  paddingEnd?: number;
  // 边框宽度
  borderWidth?: number;
  borderLeftWidth?: number;
  borderRightWidth?: number;
  borderTopWidth?: number;
  borderBottomWidth?: number;
  borderStartWidth?: number;
  borderEndWidth?: number;
  // 圆角
  borderTopLeftRadius?: number;
  borderTopRightRadius?: number;
  borderBottomLeftRadius?: number;
  borderBottomRightRadius?: number;

  // Flex 布局
  flexDirection?: string;
  flexShrink?: number;
  flexGrow: number;
  flexWrap?: string;
  justifyContent?: string;
  alignItems?: string;
  alignSelf?: string;
  position?: string;

  // 字体
  fontSize: number;
  lineHeight?: number;
  lines?: number;
  textAlign?: string;
  verticalAlign?: string;
  color?: string;
  backgroundColor?: string;
  textOverflow?: string;
  letterSpacing?: number;
  borderRadius?: number;
  fontWeight?: string;
  fontFamily?: string;

  // 边框颜色
  borderColor?: string;
  borderTopColor?: string;
  borderBottomColor?: string;
  borderLeftColor?: string;
  borderRightColor?: string;

  // 图片与背景
  backgroundImage?: string;
  backgroundImageType?: string;
  backgroundImageInset?: string;
  imageType?: string;
  imageInset?: string;

  // 其他效果
  opacity?: number;
  transform: ITuiTransform;
  textStrokeWidth?: number;
  textStrokeColor?: string;
  textShadow?: string;

  // 文本控制
  whiteSpace?: string;
  wordBreak?: string;
  // 滚动
  scrollX?: boolean;
  scrollY?: boolean;
  scrollTop: number;
  scrollLeft: number;
  scrollHeight: number;
  scrollWidth: number;
}

依赖关系

├── index.uts (引擎主文件)
├── types/
│   └── index.uts (类型定义)
├── components/
│   ├── element.uts (基础元素)
│   ├── view.uts (视图组件)
│   ├── text.uts (文本组件)
│   ├── image.uts (图片组件)
│   └── button.uts (按钮组件)
└── core/
    ├── layout.uts (布局计算)
    ├── render.uts (渲染逻辑)
    ├── style.uts (样式处理)
    ├── util.uts (工具函数)
    └── easing.uts (缓动函数)

文件用途说明

文件	用途	主要功能
index.uts	引擎主入口	提供核心 API，管理元素树和绘制
types/index.uts	类型定义	定义接口和类型
components/element.uts	基础元素	实现元素的基本功能
components/view.uts	视图组件	用于创建容器元素
components/text.uts	文本组件	处理文本内容和样式
components/image.uts	图片组件	处理图片加载和显示
components/button.uts	按钮组件	实现按钮功能
core/layout.uts	布局计算	处理元素布局和尺寸
core/render.uts	渲染逻辑	将元素绘制到 Canvas
core/style.uts	样式处理	管理元素样式
core/util.uts	工具函数	提供辅助功能
core/easing.uts	缓动函数	提供动画效果

扩展和定制

如果你需要扩展 tui-entine 的功能，可以：

1. 创建自定义组件：继承 TuiElement 类，实现自定义功能
2. 扩展样式：在 ITuiStyle 接口中添加新的样式属性
3. 修改布局算法：调整 core/layout.uts 中的布局计算逻辑
4. 优化渲染：改进 core/render.uts 中的绘制逻辑

调试和开发

调试技巧

• 使用控制台：在事件处理函数中添加 console.log 语句
• 查看元素树：使用 engine.dom 查看所有元素
• 检查布局：使用 getBoundingClientRect 查看元素位置
• 性能分析：使用浏览器的性能工具分析渲染性能

开发建议

• 模块化：将复杂组件拆分为多个小模块
• 性能优化：合理使用局部更新和缓存
• 代码规范：遵循 TypeScript 代码规范
• 文档完善：为自定义组件添加详细文档

总结

tui-entine 的文件结构清晰，模块化程度高，便于理解和扩展。通过了解这些文件的功能和关系，你可以更好地使用和定制 tui-entine，为你的项目创建高性能的 Canvas 交互组件。