SuperAPI AI 工具集

pixijs-scene-dom-container

前端与建站

查看项目

更新于 10-16 03:42

技能介绍

用途:DOMContainer 将一个 HTML 元素定位在 PixiJS 画布之上,并用场景图驱动其 CSS transform,适合原生输入框、iframe、视频或需要跟随显示对象位置的富 HTML 内容。

主要能力:构造选项 element 指定被驱动的 HTML 元素(默认创建 div),anchor 设置元素相对自身尺寸的原点(0 左上、0.5 居中、1 右下,可用 {x,y} 分别设置)。position、scale、rotation、alpha 等变换会以 CSS transform 传播到元素,alpha 每帧写入 style.opacity。visible=false 或从场景图移除会分离元素,恢复后重新附加;destroy() 移除元素并清空内部引用,但保留 HTML 元素本身。

使用方式:默认 pixi.js 浏览器包已自动注册 DOMPipe,通常无需额外导入;自定义构建(skipExtensionImports: true)或非浏览器包需副作用导入 import "pixi.js/dom"。DOMPipe 使用共享根 div(z-index: 1000),暴露为 app.domContainerRoot,首次渲染时自动附加到画布父节点,也可手动附加。

限制:DOMContainer 在 v8 中为实验性,API 可能在小版本间变化。它继承 ViewContainer,是叶子节点,不能嵌套 PixiJS 子节点;多个 DOM 叠加需用普通 Container 包裹,嵌套 HTML 应放在元素内部。Web Worker 中不可用。tint、filters、mask、blendMode 虽被接受但对 DOM 元素无视觉效果,需改用 CSS。根 div 为 pointer-events: none,附加元素默认 auto,纯装饰叠加可改为 none。

适用场景:需要原生表单控件、iframe、视频或富 HTML 跟随场景对象位置的界面。相关技能包括 pixijs-scene-core-concepts、pixijs-scene-container、pixijs-events、pixijs-accessibility。