PixiJS 布局 v3 来了！🎉

今天我们发布了 PixiJS Layout v3，这是对该库从头彻底重建的新版本。这个新版本提供了一种强大且符合 web 标准的方式来管理 PixiJS 项目中的布局，由 Yoga 布局引擎提供支持。

🌐 Today we are releasing PixiJS Layout v3, a complete rebuild of the library from the ground up. This new version offers a powerful, web-standard way to manage layout inside PixiJS projects, powered by the Yoga layout engine.

不仅仅是一次重写，v3 代表了一个重大飞跃：它将真正的flexbox 布局原理引入了 PixiJS 生态系统，让习惯于 CSS 风格布局的网页开发者也能使用 PixiJS。无论你是在创建游戏界面、动态画布应用，还是完整的交互式体验，现在你都可以使用你已经熟悉的布局模式——flex-grow、justify-content、align-items 等等。

🌐 More than just a rewrite, v3 represents a major leap forward: it brings true flexbox layout principles to the PixiJS ecosystem, opening up PixiJS to web developers who are used to CSS-style layouts. Whether you are creating a game UI, a dynamic canvas app, or a full interactive experience, you can now use the layout patterns you already know — flex-grow, justify-content, align-items, and more.

此外，PixiJS Layout v3 与 PixiJS React 无缝集成，使 React 开发者能够使用熟悉的声明式工作流来组合和管理 PixiJS 用户界面。无论你是在纯 PixiJS 中工作，还是将其与 React 结合使用，布局现在都更加容易、直观且功能更强大。

🌐 In addition, PixiJS Layout v3 integrates seamlessly with PixiJS React, enabling React developers to compose and manage PixiJS UIs with a familiar declarative workflow. Whether you are working in plain PixiJS or combining it with React, layout is now easier, more intuitive, and more powerful.

为网页开发者的全面重建

🌐 A Complete Rebuild for Web Developers

v3 是一个从零重写的版本，构建在 Yoga 之上。这为 PixiJS 带来了可预测的、符合网络标准的布局行为，这是首次实现。它允许你以和 Web 开发相同的方式来思考布局——弹性容器、换行的子项、对齐和间距——同时不放弃 PixiJS 的性能和灵活性。

🌐 v3 is a ground-up rewrite, built on top of Yoga. This brings predictable, web-standard layout behavior to PixiJS for the first time. It allows you to think about your layouts in the same way you would for web development — flex containers, wrapped children, alignment, and spacing — without abandoning the performance and flexibility of PixiJS.

为什么这很重要

🌐 Why This Matters

• Web 开发者现在可以在 PixiJS 中使用熟悉的概念，例如 flex 容器和 flex 项，而无需与系统作斗争。
• 布局没有学习曲线：如果你会 CSS Flexbox，就知道如何构建你的 PixiJS 场景。
• React 开发者获得更多能力：PixiJS Layout v3 完全集成了 PixiJS React，让你可以直接在 JSX 中声明布局。

主要特点

🌐 Key Features

瑜伽驱动布局

🌐 Yoga-Powered Layout

布局计算由 Yoga 提供支持，这也是为 React Native 提供布局的引擎，为 PixiJS 带来了经过验证的弹性盒子（flexbox）行为。

🌐 Layout calculations are powered by Yoga, the same engine that powers layout for React Native, bringing tried and tested flexbox behavior to PixiJS.

像 justifyContent、alignItems、flexDirection 和 gap 这样的常用属性现在已得到完全支持。

🌐 Familiar properties like justifyContent, alignItems, flexDirection, and gap are now fully supported.

设计为选择加入

🌐 Opt-In by Design

PixiJS Layout v3 默认情况下是可选择的。你可以仅在需要的对象上启用布局——Containers、Sprites、Graphics、Text，甚至是自定义对象——而无需强制对整个项目进行重构。

这种灵活性允许你在合理的地方使用布局，同时保持其余代码库的整洁和高效。它还意味着你可以在现有项目中使用布局，而无需重构所有内容。

🌐 This flexibility allows you to use layout where it makes sense, while keeping the rest of your codebase clean and performant. It also means you can use layout in existing projects without needing to refactor everything.

const sprite = new Sprite({ texture, layout: true });

或者在创建对象时内联定义布局：

🌐 Or define layout inline when creating objects:

const container = new Container({
  layout: {
    width: 500,
    height: 300,
    justifyContent: 'center',
    alignContent: 'center',
    flexWrap: 'wrap',
  },
});

为 React 设计

🌐 Design for React

PixiJS 布局 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 的速度和灵活性。

🌐 This allows React developers to compose layouts declaratively, just like building web UIs, but using the speed and flexibility of PixiJS under the hood.

网页风格功能

🌐 Web-Style Features

我们添加了几项网页风格功能以增强布局能力：

🌐 We have added several web-style features to enhance layout capabilities:

• objectFit：控制容器内内容的缩放（fill、contain、cover、none、scale-down）。
• objectPosition：在布局范围内微调内容对齐。
• 溢出滚动：为任意容器启用 overflow: scroll。

文档全面改革

🌐 Documentation Overhaul

我们已经完全重写了文档。它现在包括：

🌐 We have completely rewritten the documentation. It now includes:

• 入门指南和最佳实践的清晰指南
• 涵盖常见用例的详细示例
• 布局行为和 PixiJS 集成的改进说明

新的文档让入门比以往任何时候都更容易。

🌐 The new documentation makes it easier than ever to get up and running.

入门

🌐 Getting Started

开始使用 PixiJS Layout v3 很简单，由于该库是可选择加入的性质，你可以在任何 PixiJS 项目中使用它，而无需重构你的整个代码库。

🌐 Getting started with PixiJS Layout v3 is simple and due to the opt-in nature of the library, you can use it in any PixiJS project without needing to refactor your entire codebase.

查看入门指南以获取逐步介绍，但这里是一个快速概览：

🌐 Check out the Getting Started guide for a step-by-step introduction but here’s a quick overview:

设置

🌐 Setup

安装 PixiJS Layout v3：

🌐 Install PixiJS Layout v3:

pnpm add @pixi/layout
# or
yarn add @pixi/layout
# or
npm install @pixi/layout

在应用中尽早导入该库：

🌐 Import the library early in your application:

import '@pixi/layout';

// ... initialize your app

在需要的时候和地方应用布局：

🌐 Apply layout when and where you need it:

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);

结论

🌐 Conclusion

PixiJS Layout v3 将网页标准的弹性盒布局引入了二维图形的世界。

如果你是网页开发者，你现在可以使用你已经熟悉的布局工具来构建 PixiJS 项目。如果你是 React 开发者，你可以像在网页上一样，在基于画布的应用中组合丰富、高性能的用户界面。

🌐 If you are a web developer, you can now build PixiJS projects with the layout tools you already know. If you are a React developer, you can compose rich, high-performance UIs inside your canvas-based apps just like you would on the web.

探索新的文档，在你的项目中试用它，并告诉我们你的想法。我们很期待看到你将创造出什么！

🌐 Explore the new documentation, try it out in your projects, and let us know what you think. We are excited to see what you will build!

🌐 保持联系

🌐 🌐 Stay Connected

在社交媒体上关注 Zyie 和 PixiJS 以获取最新动态。加入我们的 Discord 活跃社区，参与实时讨论和获取支持。

🌐 Follow Zyie and PixiJS on social media for the latest updates. Join our vibrant community on Discord for real-time discussions and support.