Skip to main content

Resize 插件

🌐 Resize Plugin

ResizePlugin 为 PixiJS 应用提供自动调整大小功能。启用后，它会监听窗口或元素的大小调整事件，并相应地调整应用的渲染器大小。

🌐 The ResizePlugin provides automatic resizing functionality for PixiJS applications. When enabled, it listens to window or element resize events and resizes the application's renderer accordingly.

这适用于：

🌐 This is useful for:

  • 使画布响应浏览器窗口
  • 保持宽高比或适配容器
  • 无需手动调用调整大小即可处理布局更改

默认情况下，PixiJS 在初始化 Application 时会添加此插件，但如果你使用自定义设置，也可以手动注册它。

🌐 By default, PixiJS adds this plugin when initializing an Application, but you can also register it manually if you're using a custom setup.

用法​

🌐 Usage

import { Application } from 'pixi.js';

const app = new Application();

await app.init({
  width: 800,
  height: 600,
  resizeTo: window,
});

默认行为​

🌐 Default Behavior

  • 在不进行任何覆盖的情况下使用 Application.init() 时，ResizePlugin 会自动安装：
  • 当设置 resizeTo 时，渲染器会自动调整以匹配目标（window 或 HTMLElement）的尺寸。
  • 使用 requestAnimationFrame 对调整大小进行限制，以防在快速调整大小事件期间出现性能问题。
  • 你可以使用 app.resize() 手动触发调整大小，或使用 app.cancelResize() 取消已计划的调整大小。

手动注册​

🌐 Manual Registration

如果你手动管理扩展：

🌐 If you're managing extensions manually:

import { extensions, ResizePlugin } from 'pixi.js';

extensions.add(ResizePlugin);

自定义调整目标大小​

🌐 Custom Resize Target

你可以指定自定义目标进行调整大小。如果你希望将画布调整为适应特定元素而不是整个窗口，这非常有用。

🌐 You can specify a custom target for resizing. This is useful if you want to resize the canvas to fit a specific element rather than the entire window.

await app.init({
  resizeTo: document.getElementById('game-container'),
});

API 参考​

🌐 API Reference