PixiJS:如何使用其ResizePlugin

<script src="https://cdn.jsdelivr.net/npm/pixi.js"></script>

// 创建Pixi应用程序
const app = new PIXI.Application({
  width: 800, // 设置初始宽度
  height: 600, // 设置初始高度
  backgroundColor: 0x1099bb, // 设置背景颜色
  resizeTo: window, // 将应用程序的大小自动调整为窗口大小
});

// 启用ResizePlugin
app.renderer.plugins.resize.init();

// 创建一个可调整大小的矩形
const rectangle = new PIXI.Graphics();
rectangle.beginFill(0xff0000);
rectangle.drawRect(0, 0, 200, 100);
rectangle.endFill();
rectangle.position.set(app.screen.width / 2, app.screen.height / 2);
rectangle.pivot.set(100, 50);
app.stage.addChild(rectangle);

// 监听窗口大小变化事件
window.addEventListener('resize', () => {
  // 调整画布大小
  app.renderer.resize(window.innerWidth, window.innerHeight);
  // 更新矩形位置
  rectangle.position.set(app.screen.width / 2, app.screen.height / 2);
});

// 将应用程序的画布添加到HTML文档中
document.body.appendChild(app.view);