HumanBreak/docs/api/motajs-render-core/Container.md

2.2 KiB
Raw Blame History

Container 类 API 文档

本文档由 DeepSeek R1 模型生成并微调。


继承关系

graph LR
    Container --> RenderItem --> EventEmitter

    click RenderItem "./RenderItem"
    click EventEmitter "https://nodejs.org/api/events.html#class-eventemitter"

属性说明

属性名 类型 默认值 说明
sortedChildren RenderItem[] [] zIndex 排序后的子元素列表

构造方法

constructor

参数

  • type: 渲染模式(absolute 绝对定位 / static 跟随摄像机)
  • cache: 是否启用渲染缓存
  • fall: 是否启用变换矩阵下穿机制

示例

const container = new Container('static');

方法说明

appendChild

function appendChild(...children: RenderItem[]): void;

描述
添加子元素并触发重新排序。
示例

const child = new RenderItem('static');
container.appendChild(child); // 添加子元素

removeChild

function removeChild(...child: RenderItem[]): void;

描述
移除指定子元素并触发重新排序。
示例

container.removeChild(child); // 移除子元素

requestSort

function requestSort(): void;

描述
标记需要重新排序子元素(在下一帧前自动执行)。


forEachChild

function forEachChild(fn: (ele: RenderItem) => void): void;

描述 遍历元素的每一个子元素DFS 遍历),并对每一个元素执行函数。


总使用示例

// 创建基础容器
const baseContainer = new Container('absolute');
baseContainer.size(800, 600);

// 添加子元素
const sprite1 = new Sprite('static');
sprite1.pos(100, 100).setZIndex(2);
baseContainer.appendChild(sprite1);

const sprite2 = new Sprite('static');
sprite2.pos(200, 200).setZIndex(1);
baseContainer.appendChild(sprite2);

// 将容器添加到根元素
rootElement.appendChild(baseContainer);

// 动态修改子元素层级
sprite1.setZIndex(0); // 自动触发重新排序