PixiJS 更新 - 六月
欢迎来到六月更新，涵盖 v8.18.0 和 v8.19.0：实时 HTML-in-Canvas 纹理、图形 → SVG 导出、官方 AI 代理技能、精灵遮罩通道，以及我们非常自豪的一项里程碑。
🌐 Welcome to the June update, covering v8.18.0 and v8.19.0: live HTML-in-Canvas textures, Graphics → SVG export, official AI agent skills, sprite mask channels, and a milestone we're very proud of.
每周 500,000 次下载
🌐 500,000 weekly downloads
PixiJS 在 npm 上每周下载量超过 500,000 次，而且这个数字一直在上升。这意味着每周有五十万个项目、原型、游戏和实验在使用 PixiJS。
🌐 PixiJS crossed 500,000 weekly downloads on npm, and the number has kept climbing since. That's half a million projects, prototypes, games, and experiments pulling PixiJS every single week.
这个库的存在是因为那些使用它进行开发、报告错误、提交修复以及在 Discord 上回答问题的人。感谢你使用 PixiJS 进行开发。
🌐 This library exists because of the people who build with it, report bugs, send fixes, and answer questions on Discord. Thank you for building with PixiJS.
官方 PixiJS 代理技能
🌐 Official PixiJS Agent Skills
AI 编码代理现在已经成为许多工作流程的一部分，因此我们发布了 25 个官方 PixiJS 技能，教它们如何正确使用 PixiJS v8：现代 API、当前最佳实践，以及它们容易错误生成的 v7 模式。
🌐 AI coding agents are now part of many workflows, so we've shipped 25 official PixiJS skills that teach them how to use PixiJS v8 correctly: modern APIs, current best practices, and none of the v7 patterns they tend to hallucinate.
只需一条命令即可将它们安装到 Claude Code、Cursor、Codex、Copilot 或 Windsurf 中：
🌐 Install them into Claude Code, Cursor, Codex, Copilot, or Windsurf with one command:
npx skills add https://github.com/pixijs/pixijs-skills
从 v8.19.0 起，这些技能也包含在 npm 包本身中，安装后可以在 node_modules/pixi.js/skills/ 处获得，因此你的工具可以在无需单独步骤的情况下使用它们。
🌐 As of v8.19.0 the skills also ship inside the npm package itself, available at node_modules/pixi.js/skills/ after install, so your tools can pick them up without a separate step.
查看 pixijs-skills 仓库 获取完整列表，并访问 pixijs.com/llms 了解 PixiJS 提供的所有 AI 工具，从 40 多个代理的安装说明到纯文本 llms.txt 文档。
🌐 Check out the pixijs-skills repository for the full list, and see pixijs.com/llms for everything PixiJS offers AI tooling, from install instructions for 40+ agents to plain-text llms.txt docs.
Canvas 中的 HTML 纹理
🌐 HTML-in-Canvas textures
v8.19.0 的头条功能：一个新的可选 pixi.js/html-source 子路径，可以将实时 DOM 元素渲染到 PixiJS 纹理中。元素在镜像到 GPU 的同时，在浏览器中保持完全可交互：输入保持可编辑，链接保持可点击，CSS 动画继续运行。
🌐 The headline feature of v8.19.0: a new opt-in pixi.js/html-source subpath that renders live DOM elements into PixiJS textures. The element stays fully interactive in the browser while it's mirrored to the GPU: inputs stay editable, links stay clickable, and CSS animations keep running.
这是它在一个真实网站上运行的样子。你看到的一切，包括被选中的文本和正在输入的表单，都是一个 PixiJS 纹理：
🌐 Here it is running on a real website. Everything you see, including the text being selected and the form being typed into, is a PixiJS texture:
对于实时元素使用 HTMLSource，对于不可变快照使用 ElementImageSource。该元素必须是 Pixi 画布的直接子元素：
🌐 Use HTMLSource for a live element, or ElementImageSource for an immutable snapshot. The element must be a direct child of the Pixi canvas:
import { Application, Sprite } from 'pixi.js';
import { HTMLSource } from 'pixi.js/html-source';
const app = new Application();
await app.init({ resizeTo: window });
document.body.appendChild(app.canvas);
const form = document.createElement('form');
form.innerHTML = '<input value="still editable" />';
app.canvas.appendChild(form); // must be a direct child of the Pixi canvas
const sprite = Sprite.from(new HTMLSource({ resource: form, autoUpdate: true }));
app.stage.addChild(sprite); // live DOM mirrored to the GPU; the form stays interactive
导入子路径还会为通用 HTML 元素注册最低优先级的 Texture.from 回退，因此未导入它的应用完全不受影响。
🌐 Importing the subpath also registers a lowest-priority Texture.from fallback for generic HTML elements, so apps that don't import it are completely unaffected.
这是建立在实验性的 HTML-in-Canvas 浏览器 API 之上的，目前在 Chrome 中通过一个标志可以使用。如果浏览器中未启用该 API，纹理上传器会抛出一个明确的错误。将此视为网页平台未来发展的预览。
感谢 @Zyie 的贡献。
🌐 Thanks to @Zyie for this contribution.
图形 → SVG 导出
🌐 Graphics → SVG export
v8.18.0 添加了 graphicsContextToSvg()，一个将 Graphics 或 GraphicsContext 序列化为自包含 SVG 字符串的纯函数。它支持矩形、圆形、椭圆形、圆角矩形、多边形、贝塞尔/二次/弧路径、描边、空洞，以及线性/径向渐变。
🌐 v8.18.0 adds graphicsContextToSvg(), a pure function that serializes a Graphics or GraphicsContext into a self-contained SVG string. It supports rects, circles, ellipses, rounded rects, polygons, bezier/quadratic/arc paths, strokes, holes, and linear/radial gradients.
import { Graphics, graphicsContextToSvg } from 'pixi.js';
const g = new Graphics()
.rect(0, 0, 100, 50)
.fill({ color: 0xff0000 })
.circle(150, 25, 25)
.stroke({ color: 0x0000ff, width: 4 });
const svgString = graphicsContextToSvg(g, 2);
await navigator.clipboard.writeText(svgString);
下面的示例证明了往返：右侧的徽章是通过将导出的 SVG 字符串直接重新输入 new Graphics().svg() 构建的：
🌐 The example below proves the round trip: the right-hand badge is built by feeding the exported SVG string straight back into new Graphics().svg():
感谢 @GoodBoyDigital 的贡献。
🌐 Thanks to @GoodBoyDigital for this contribution.
精灵蒙版通道
🌐 Sprite mask channels
setMask() 在 v8.18.0 中获得了一个 channel 选项，让你可以选择哪个纹理通道控制可见性：'red'（默认，匹配之前的行为）或 'alpha'。这与像 Figma 这样的设计工具应用 PNG 蒙版的方式一致，因此从设计文件导出的蒙版现在无需预处理即可使用：
import { Assets, Sprite } from 'pixi.js';
const photo = new Sprite(await Assets.load('photo.png'));
const maskSprite = new Sprite(await Assets.load('mask-alpha.png'));
photo.setMask({
mask: maskSprite,
channel: 'alpha',
});
下面的两边都使用 相同的蒙版纹理：一个带透明背景的圆圈，上面画有红色星星。红色通道只看到星星；Alpha通道看到整个圆圈：
🌐 Both sides below use the same mask texture: a transparent-backed circle with a red star painted on it. The red channel only sees the star; the alpha channel sees the whole circle:
填充模式 纹理空间
🌐 FillPattern textureSpace
FillPattern 在 v8.19.0 中获得了一个 textureSpace 选项，同时修复了多个长期存在的模式尺寸错误：
'global'（新的默认值）：图案在世界空间中连续铺设，因此相邻的形状共享一个无缝网格，而不是每个形状都重新映射图案。'local'：每个形状都安装了一块瓷砖，setTransform()让你可以按形状对其进行细分或变换。
import { Assets, FillPattern, Graphics } from 'pixi.js';
const texture = await Assets.load('pattern.png');
const pattern = new FillPattern({ texture, repetition: 'repeat', textureSpace: 'local' });
const g = new Graphics().rect(0, 0, 200, 100).fill({ fill: pattern });
升级后，现有的图案填充可能呈现不同效果。setTransform(matrix) 现在直接应用你传入的矩阵（之前会根据纹理大小进行反转和重新缩放），而 textureSpace: 'local' 的放射渐变现在会按渐变的外半径进行缩放。如果你之前为旧的 setTransform 行为进行了手动补偿，请移除该补偿。
粒子继承混合模式
🌐 Particles inherit blend modes
ParticleContainer 现在会遵循从其祖级继承的混合模式。以前，在父级（例如 stage.blendMode = 'add'）上设置混合模式会被粒子静默忽略；现在它们会像其他容器一样解析继承的混合模式。直接在 ParticleContainer 上设置的 blendMode 仍然与以前完全相同。
下面的两个星系都是相同的 ParticleContainer。唯一的区别是右边星系的父级上设置的 blendMode:
🌐 Both galaxies below are identical ParticleContainers. The only difference is the blendMode set on the right one's parent:
嵌套在具有非默认混合模式的父级下的粒子现在将以不同的方式渲染（例如，叠加增亮），此前父级的混合模式会被忽略。
感谢 @DmitriyGolub 的贡献。
🌐 Thanks to @DmitriyGolub for this contribution.
更多添加
🌐 More additions
- 渲染器偏好数组：
autoDetectRenderer和Application.init现在接受preference的数组（例如['webgl', 'canvas']），让你可以限制回退链，而不仅仅是重新排序它 (@Zyie)。 app.domContainerRoot：HTMLDivElement的只读获取器，它封装了所有DOMContainer元素，因此你可以向 DOM 覆盖根添加 CSS 类或样式（@carlos22）。- 生成纹理的默认锚点：
renderer.generateTexture()接受一个defaultAnchor选项，而RenderTexture.create()获得一个textureOptions参数 (@ksv90)。 - 短暂 MSAA 附件（WebGPU）：纹理源获得一个可选择的
transient标志，允许 WebGPU 后端在渲染通道结束时丢弃 MSAA 缓冲区，而不是将其写回内存，从而减少移动 GPU 的内存带宽（@GoodBoyDigital）。
错误修复
🌐 Bug fixes
在两个版本中：
🌐 Across both releases:
- 仅描边图形遮罩现在在画布渲染器上能正确渲染（@DmitriyGolub）。
- iOS 18.0–18.1 纹理：单级贴图纹理会跳过
_applyMipRange，以规避 WebKit 的一个 bug（@GoodBoyDigital）。 - 陈旧的
TextureMatrix当合并纹理重复使用相同引用时 (@GoodBoyDigital)。 GraphicsPath.transform()现在处理所有路径操作 (@Zyie)。VideoSource在视频尺寸已知之前不再在 play 和 mediaReady 之间递归 (@satoren)。- 标记文本 处理
parseTaggedText中的字面<字符 (@glennflanagan)。 SplitText基线不匹配在tagStyles与lineHeight一起使用时已修复，并修复了文本以空白字符开头时的崩溃问题（@Zyie）。TilingSprite：tilePosition在 Canvas 渲染器上不再按分辨率划分，tileRotation在非正方形精灵上不再扭曲图案（@Zyie）。BitmapText不再在无字形的换词符后呈现尾随字形 (@Zyie)。- 画布渲染器 在启用
roundPixels时会四舍五入锚点偏移 (@Clonex)。 - 自定义批处理器 现在接收渲染器的
maxBatchableTextures(@SerG-Y)。 - 丢失的上下文 不再导致着色器编译日志崩溃 (@Zyie)。
GCSystem在将其哈希条目标记为 null 之前卸载资源（@Zyie）。CanvasFilterSystem已移至过滤器模块 (@Zyie)。
你可以在 GitHub 上查看完整的更改日志：v8.18.0 和 v8.19.0。
🌐 You can view the full changelogs on GitHub: v8.18.0 and v8.19.0.
新贡献者
🌐 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.19.0
或者通过 CDN 使用：
🌐 Or use via CDN:
开发版本：
- https://cdn.jsdelivr.net/npm/pixi.js@8.19.0/dist/pixi.js
- https://cdn.jsdelivr.net/npm/pixi.js@8.19.0/dist/pixi.mjs
生产构建：
- https://cdn.jsdelivr.net/npm/pixi.js@8.19.0/dist/pixi.min.js
- https://cdn.jsdelivr.net/npm/pixi.js@8.19.0/dist/pixi.min.mjs
文档: https://pixijs.download/v8.19.0/docs/index.html
收尾
🌐 Wrapping up
以上涵盖了六月份的更新。FillPattern 和粒子混合模式的更改属于行为更改，因此升级后请检查你的输出；上面的各部分解释了每个更改的具体位置。
🌐 That covers June's updates. The FillPattern and particle blend mode changes are behavior changes, so check your output after upgrading; the sections above explain how each one moved.
感谢所有为这些版本贡献修复和功能的人。
🌐 Thanks to everyone who contributed fixes and features to these releases.
感谢我们的赞助商
🌐 Thank you to our sponsors
PixiJS 的实现得益于我们的赞助商。特别感谢我们的银级及以上支持者；你可以加入他们并推动引擎的持续发展。
🌐 PixiJS is made possible by our sponsors. A special thanks to our Silver tier and above supporters; you can join them and keep the engine moving.
创作愉快！
🌐 Happy creating!
PixiJS 团队
