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:

  • 使画布响应浏览器窗口

    ¥Making the canvas responsive to the browser window

  • 保持宽高比或适配容器

    ¥Maintaining aspect ratio or fitting to containers

  • 无需手动调用调整大小即可处理布局更改

    ¥Handling layout changes without manual resize calls

默认情况下，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：

    ¥When using Application.init() with no overrides, the ResizePlugin is installed automatically:

  • 设置 resizeTo 后，渲染器会自动调整以匹配目标（window 或 HTMLElement）的尺寸。

    ¥When resizeTo is set, the renderer automatically adjusts to match the dimensions of the target (window or HTMLElement).

  • 使用 requestAnimationFrame 限制调整大小，以防止在快速调整大小事件期间出现性能问题。

    ¥Resizing is throttled using requestAnimationFrame to prevent performance issues during rapid resize events.

  • 你可以使用 app.resize() 手动触发调整大小，或使用 app.cancelResize() 取消预定的调整大小。

    ¥You can trigger a resize manually with app.resize() or cancel a scheduled resize with 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