PIXI.js初始化resize异常：stage宽高首次用缩放因子而非像素值

问题核心 #

首次加载时直接设置pixi.stage.width/height会将其作为缩放比例而非像素尺寸，和窗口resize触发时的逻辑不一致，导致初始化阶段仅显示蓝色画布。需要统一初始化与resize时的适配逻辑，确保无论何时都用相同方式调整舞台与渲染器。

解决方案 #

不要直接修改stage的width/height（Container的这两个属性本质是缩放因子，并非实际尺寸），统一通过计算缩放比例来适配容器大小，同时确保图片资源加载完成后再执行首次适配。

修改后的完整代码 #

import * as PIXI from 'pixi.js'

const mainNode = document.getElementById('main')

const pixi = new PIXI.Application({
  resolution: window.devicePixelRatio || 1,
  antialias: true,
  autoDensity: true,
  roundPixels: true
})

// 加载背景纹理，确保能获取原始尺寸
const backgroundTexture = PIXI.Texture.from('./images/gate_tag.jpg')
const background = new PIXI.Sprite(backgroundTexture)
pixi.stage.addChild(background)

mainNode.appendChild(pixi.view)

// 统一的适配函数
function resize() {
  const containerWidth = mainNode.clientWidth
  const containerHeight = mainNode.clientHeight

  // 计算填满容器的缩放比例（允许变形）
  const scaleX = containerWidth / backgroundTexture.width
  const scaleY = containerHeight / backgroundTexture.height

  // 对舞台应用缩放
  pixi.stage.scale.set(scaleX, scaleY)

  // 调整渲染器尺寸匹配容器
  pixi.renderer.resize(containerWidth, containerHeight)
}

// 确保图片加载完成后执行首次适配
if (backgroundTexture.valid) {
  resize()
} else {
  backgroundTexture.on('update', resize)
}

// 绑定窗口resize事件
window.addEventListener('resize', resize)

关键修改说明 #

1. 替换stage宽高设置为缩放比例：stage.scale.set(scaleX, scaleY)是Container的标准缩放方式，无论首次初始化还是窗口调整，逻辑完全统一，不会出现缩放因子与像素值混淆的问题。
2. 等待纹理加载完成：通过判断backgroundTexture.valid或监听update事件，确保首次计算缩放时能获取到图片的真实原始尺寸，避免因资源未加载导致的计算错误。
3. 更稳妥的事件绑定：使用addEventListener绑定resize事件，避免覆盖其他可能存在的resize监听逻辑。

内容的提问来源于stack exchange，提问作者Octavia Kitsune