2025年4月29日，PixiJS官方正式发布 PixiJS Layout v3，这是一个从零开始彻底重构的库版本。新版本基于 Yoga 布局引擎，为 PixiJS 项目提供了一种强大且符合网页标准的布局管理方式。
这不仅仅是一次重写，v3 版本代表着重大飞跃：它将真正的弹性盒子布局（flexbox）理念引入PixiJS生态系统，让习惯 CSS 布局的网页开发者能够无缝过渡。无论您是在开发游戏UI、动态画布应用还是完整交互体验，现在都可以使用熟悉的布局模式——如flex-grow、justify-content、align-items等属性。
此外，PixiJS Layout v3 与 PixiJS React 深度集成，让 React 开发者能够通过声明式语法轻松构建和管理 PixiJS 界面。无论您使用原生 PixiJS 还是结合 React，布局现在都变得更简单、直观且强大。
为网页开发者彻底重构
v3是 完全重写 的版本，底层采用 Yoga 引擎，首次为 PixiJS 带来可预测的网页标准 布局行为。您可以用网页开发的思维方式处理布局——弹性容器、自动换行、对齐和间距——同时保持 PixiJS 的性能优势。
为什么这很重要
- 网页开发者可以使用熟悉的弹性盒子概念，无需改变开发习惯
- 零布局学习曲线：如果您了解 CSS Flexbox，就已经掌握 PixiJS 场景布局
- React开发者获得更强能力：v3完美兼容PixiJS React，支持直接在 JSX 中声明布局
核心特性
Yoga驱动的布局引擎
采用 React Native 同款的 Yoga 引擎，为 PixiJS 带来经过验证的弹性盒子布局系统。完整支持 justifyContent、alignItems、flexDirection和gap等常见属性。
可选式设计
PixiJS Layout v3 采用按需启用设计。您可以仅为需要布局的对象（如 Containers、Sprites、Graphics、Text 或自定义对象）激活功能，无需重构整个项目。
这种灵活性让您可以在现有项目中逐步引入布局功能，保持代码整洁高效。
const sprite = new Sprite({ texture, layout: true });
或直接在创建对象时定义布局：
const container = new Container({
layout: {
width: 500,
height: 300,
justifyContent: 'center',
alignContent: 'center',
flexWrap: 'wrap',
},
});
React深度整合
v3包含与 PixiJS React 的完整集成，支持直观的JSX语法：
<layoutContainer layout={{ flexDirection: 'row', gap: 10 }}>
<layoutSprite texture={texture} layout={{ width: 100, height: 100 }} />
<layoutSprite texture={texture} layout={{ width: 100, height: 100 }} />
</layoutContainer>
这让 React 开发者能够像构建网页UI一样声明式地组合布局，同时享受 PixiJS 的渲染性能。
网页风格特性
新增多项网页风格功能增强布局能力：
-
objectFit：控制内容在容器内的缩放方式（fill、contain、cover、none、scale-down） -
objectPosition：微调内容在布局边界内的对齐 - 溢出滚动：为任何容器启用
overflow: scroll效果
文档全面升级
重写后的文档现在包含：
- 清晰的上手指南和最佳实践
- 覆盖常见用例的详细示例
- 改进的布局行为解释和 PixiJS 集成说明
新版文档让入门比以往更简单。
快速开始
由于采用可选式架构，您可以在任何 PixiJS 项目中逐步应用布局功能。查看入门指南获取详细教程，以下是简要步骤：
安装配置
安装PixiJS Layout v3：
pnpm add @pixi/layout
# 或
yarn add @pixi/layout
# 或
npm install @pixi/layout
在应用中早期导入库：
import '@pixi/layout';
// ... 初始化应用
在需要时启用布局：
const container = new Container({
layout: {
width: 500,
height: 300,
justifyContent: 'center',
alignContent: 'center',
flexWrap: 'wrap',
},
});
const sprite = new Sprite({ texture, layout: true });
container.addChild(sprite);
结语
PixiJS Layout v3 将网页标准弹性盒子布局引入 2D 图形领域。
网页开发者现在可以使用熟悉的工具构建 PixiJS 项目，React 开发者则能像开发网页应用一样组合高性能的 canvas 界面。