One post tagged with "Events"

PixiJS 更新 - v8.17.0

March 12, 2026 · 10 min read

PixiJS Admin

PixiJS v8.17.0 提供了一个优化的 BlurFilter，采用了新的强度减半方案，改进的文本渲染器一致性 使 Text、BitmapText 和 HTMLText 的对齐更加接近，SplitText 中的 tagStyles 支持，以及容器上的新 visibleChanged 事件。此版本还包括在图形、滤镜和事件处理方面的一系列稳定性修复。

🌐 PixiJS v8.17.0 delivers an optimized BlurFilter with a new halving strength scheme, improved text renderer parity bringing Text, BitmapText, and HTMLText alignment closer together, tagStyles support in SplitText, and a new visibleChanged event on containers. This release also includes a wave of stability fixes across graphics, filters, and event handling.

优化模糊滤镜

🌐 Optimized BlurFilter

BlurFilter 现在默认使用强度减半方案。滤镜不会在每次处理时都应用全强度模糊，而是在多次处理过程中逐步降低强度。这样可以在高强度下获得更高的视觉质量，同时减少 GPU 工作量。

差异在高强度值下最为明显，此时传统方法会产生条带伪影，而优化版本则保持平滑：

🌐 The difference is most visible at high strength values, where the legacy approach produces banding artifacts while the optimized version stays smooth:

// New default behavior (optimized)
const blur = new BlurFilter({ strength: 20, quality: 4 });

// Restore old behavior if needed
const legacyBlur = new BlurFilter({ strength: 20, quality: 4, legacy: true });

// Or set globally
BlurFilter.defaultOptions.legacy = true;

行为改变

这会改变 BlurFilter 相对于以前版本的视觉输出。如果你需要旧的行为，请设置 legacy: true。

感谢 @Zyie 和 @Sertion 对模糊效果的改进。

🌐 Thanks to @Zyie and @Sertion for the blur improvements.

改进的文本渲染一致性

🌐 Improved text renderer parity

持续的文本更新使 Text、BitmapText 和 HTMLText 的对齐更加一致。此版本修复了三者在布局上存在分歧的几个问题。

🌐 Continued text updates keep Text, BitmapText, and HTMLText alignment more consistent. This release closes several gaps where the three renderers disagreed on layout.

两端对齐 现在使用 wordWrapWidth 进行宽度计算，而不是 maxLineWidth，与 CSS 行为一致。段落的最后一行不再被拉伸。Canvas 文本和分割文本也通过分配额外的单词间距来渲染 align: 'justify'，因此三种文本类型都产生相同的两端对齐输出。

位图文本 获得了完整的 whiteSpace 支持（normal、pre、nowrap、pre-line、pre-wrap），具有正确的空格和换行折叠。单词换行现在支持像连字符、短横线、长横线和软连字符这样的换行后字符。

HTMLText breakWords: true 现在正确使用 CSS word-break: break-word 而不是 break-all，与 Text 和 BitmapText 的行为一致。

其他改进：

🌐 Other improvements:

动态位图字体按字体大小成比例缩放投影 blur 和 distance。
位图字体 xAdvance 现在使用来自 measureText() 的真实字距宽度，而不是边界框宽度。
在动态位图字体中，字距值已被 fontScale 正确缩放。

行为改变

align: 'justify' 现在使用 wordWrapWidth 进行宽度计算，而 HTMLText 中的 breakWords 使用 break-word 替代 break-all。如果升级后你的文本布局看起来有所不同，新行为在各个渲染器中更一致，并且符合 CSS 标准。

SplitText 标签样式

🌐 SplitText tagStyles

SplitText 现在支持 tagStyles，因此像 <red>Hello</red> <blue>World</blue> 这样的样式文本段可以被正确拆分为每个字符的 Text 对象，并保留各自的样式。这使得将内联样式与每个字符的动画结合变得简单明了：

const splitText = new SplitText({
    text: '<bold>Important:</bold> animate <highlight>each character</highlight> individually',
    style: {
        fontSize: 32,
        fill: 'white',
        tagStyles: {
            bold: { fontWeight: 'bold', fill: 'yellow' },
            highlight: { fill: 'cyan' },
        },
    },
});

// Each char retains its tag style
splitText.chars.forEach((char, i) => {
    // animate per character...
});

`visibleChanged` 事件

🌐 visibleChanged event

当容器的 visible 属性发生变化时，现在会触发 visibleChanged 事件。这消除了手动轮询或使用封装函数来检测可见性变化的需要：

🌐 Containers now emit a visibleChanged event when their visible property changes. This removes the need for manual polling or wrapper functions to detect visibility changes:

container.on('visibleChanged', (visible) => {
    console.log('Visibility changed to:', visible);
});

container.visible = false; // fires the event

这对于在对象进入或离开可见性时触发动画、分析或清理逻辑很有用。

🌐 This is useful for triggering animations, analytics, or cleanup logic when objects enter or leave visibility.

感谢 @ikigai-bjorn-s 的贡献。

🌐 Thanks to @ikigai-bjorn-s for this contribution.

错误修复

🌐 Bug fixes

此版本解决了一系列稳定性问题：

🌐 This release addresses a broad set of stability issues:

过滤器损坏：TexturePool 现在分离了 mipmap 纹理，防止在多个过滤器共享池纹理时发生过滤器损坏（@vkarponen）。
ColorMatrixFilter 偏移：偏移值现在已正确应用 (@Sertion)。
ParticleContainer 滤镜偏移：全局滤镜偏移现在可以正确应用于粒子渲染（@GoodBoyDigital）。
NineSliceSprite 修剪：现在会应用纹理修剪偏移 (@shtse8)。
空 Graphics 范围：在空 Graphics 上的 getBounds() 现在返回有效的空范围，而不是抛出异常（@GoodBoyDigital）。
Graphics 陈旧边界：getLocalBounds() 在同一帧的操作之间不再返回陈旧数据 (@GoodBoyDigital)。
斜接连接边界：Graphics 边界现在考虑了锐角处的斜接连接 (@GoodBoyDigital)。
BindGroup 崩溃：修复了当资源在批量组中被销毁时发生的崩溃（@GoodBoyDigital）。
BindGroup 监听器泄漏：旧的资源监听器现在已在 setResource 中移除 (@GoodBoyDigital)。
渲染器销毁：removeAllListeners() 现在在 Renderer.destroy() 上被调用 (@taye)。
代码限制：minFPS/maxFPS 的相互限制现在工作正常 (@Zyie)。
颜色 alpha 缓存：color.setAlpha() 现在会使缓存的源失效，防止重用过时的 alpha（@darthvader58）。
addChildAt 事件：在使用 addChildAt 时，removed 事件现在能正确触发 (@aSipz)。
位图文本保护：缺失的字符和字距数据不再导致崩溃（@stargazer-2697）。
触摸修改键：TouchEvent 修改键现在会被复制到标准化触摸对象中（@kaigritun）。
网页字体加载：字体名称现在使用引号，以支持较旧的 Chrome 版本（@adngdb）。
Web Worker 支持：DOMPipe 注册已移至 init.ts 以修复 Web Worker 环境 (@Zyie)。

你可以在 GitHub 上查看完整的更新日志。

🌐 You can view the full changelog on GitHub.

暂停漏洞奖励计划

🌐 Pausing the bug bounty program

从这个版本开始，我们将暂停 PixiJS 的漏洞赏金计划。

🌐 We're pausing the PixiJS bug bounty program starting with this release.

当我们推出这个项目时，目标很简单：奖励那些发现并修复真实漏洞的贡献者。我们希望回馈使 PixiJS 成为可能的社区。

🌐 When we launched the program, the goal was simple: reward contributors who find and fix real bugs. We wanted to give back to the community that makes PixiJS possible.

不幸的是，金钱奖励导致了大量低投入、由人工智能生成的拉取请求，这些请求未达到合并标准，并且维护者的审查负担增长速度已经超过了该计划所带来的价值。

🌐 Unfortunately, the monetary incentive has led to a rise in low-effort, AI-generated pull requests that don't meet the bar for merging, and the review burden on maintainers has grown faster than the value the program delivers.

明确一点：我们并不反对 AI 辅助的开发。我们积极支持它。我们维护 llms.txt 文件、文档中的复制到 Markdown 功能以及其他专门用于帮助 AI 工具更好理解 PixiJS 的工具。AI 是一个强大的工具，只要使用得当。

🌐 To be clear: we are not against AI-assisted development. We actively support it. We maintain llms.txt files, copy-to-markdown features in our documentation, and other tooling specifically to help AI tools understand PixiJS better. AI is a powerful tool when used well.

问题在于赏金激励了数量而非质量，该计划不再实现其最初的目标。

🌐 The issue is that the bounty has incentivized quantity over quality, and the program is no longer achieving its original goal.

我们仍然希望找到回馈贡献者的方法。我们正在探索在不产生错误激励的情况下奖励有意义贡献的替代方案。如果你有想法，我们很乐意在 Discord 上听取你的意见。

🌐 We still want to find ways to give back to our contributors. We're exploring alternatives that reward meaningful contributions without creating the wrong incentives. If you have ideas, we'd love to hear them on Discord.

新贡献者

🌐 New contributors

欢迎我们的最新贡献者：

🌐 Welcome to our newest contributors:

感谢你的贡献！

🌐 Thank you for your contributions!

获取最新的 PixiJS

🌐 Get the latest PixiJS

通过 npm 安装：

🌐 Install via npm:

npm install pixi.js@8.17.0

或者通过 CDN 使用：

🌐 Or use via CDN:

开发版本：

生产构建：

文档: https://pixijs.download/v8.17.0/docs/index.html

收尾

🌐 Wrapping up

以上就是 v8.17.0 的新增内容。模糊和文本更改属于行为更改，因此升级后请检查你的输出。如果有任何异常，上面的发行说明解释了如何恢复以前的行为。

🌐 That covers what's new in v8.17.0. The blur and text changes are behavior changes, so check your output after upgrading. If anything looks off, the release notes above explain how to restore previous behavior.

感谢所有为此版本贡献修复和功能的人。

🌐 Thanks to everyone who contributed fixes and features to this release.

创作愉快！

🌐 Happy creating!

PixiJS 团队

优化模糊滤镜​

改进的文本渲染一致性​

SplitText 标签样式​

visibleChanged 事件​

更多添加​

错误修复​

暂停漏洞奖励计划​

新贡献者​

获取最新的 PixiJS​

收尾​