Javascript Phaser3仅在全屏模式下具有不同的缩放行为

我正在使用phaser3，我希望实现以下行为：

• 当游戏不是全屏时，画布不会调整大小，而是水平居中，与页面上的其他html元素配合良好
• 当游戏全屏显示时，画布应缩放至最适合当前屏幕分辨率。它也应该居中，任何黑色区域都应该在边缘

我可以实现这两个目标，但不能同时实现

我可以使用html/css技巧或水平使用Phaser.Scale.center_（或同时使用Phaser.Scale.center_）将画布居中。但如果我只是这样做，那么它就不会在全屏上缩放

如果我使用Phaser.Scale.FIT，那么它可以在全屏正常工作。但现在它还试图在非全屏状态下进行缩放，这会稍微弄乱html页面的其余部分

那么，如何在fullsceen中同时实现Phaser.Scale.CENTER_和Phaser.Scale.FIT行为，以及在不全屏时水平实现Phaser.Scale.CENTER_

我可以在这里使用phaser3缩放和/或html divs+css的组合吗

这是我目前使用的代码（不使用任何css样式选项）：

---

在这种情况下，Phaser有两个事件可以派上用场：

Phaser.Scale.Events.ENTER_FULLSCREEN;
Phaser.Scale.Events.LEAVE_FULLSCREEN;

您可以收听这些活动并“做一些事情”，当然，请根据您的实际需要调整您的代码

const game = new Phaser.Game(config);

game.scale.on(Phaser.Scale.Events.LEAVE_FULLSCREEN, () => {
  game.scale.scaleMode = Phaser.Scale.NONE;
  game.scale.autoCenter = Phaser.Scale.CENTER_HORIZONTALLY;
});

game.scale.on(Phaser.Scale.Events.ENTER_FULLSCREEN, () => {
  game.scale.scaleMode = Phaser.Scale.FIT;
  game.scale.autoCenter = Phaser.Scale.CENTER_BOTH;
});

一些参考资料：

---

Ohh。。非常感谢。我试试这个。你很好，让我们知道！

Phaser.Scale.Events.ENTER_FULLSCREEN;
Phaser.Scale.Events.LEAVE_FULLSCREEN;

const game = new Phaser.Game(config);

game.scale.on(Phaser.Scale.Events.LEAVE_FULLSCREEN, () => {
  game.scale.scaleMode = Phaser.Scale.NONE;
  game.scale.autoCenter = Phaser.Scale.CENTER_HORIZONTALLY;
});

game.scale.on(Phaser.Scale.Events.ENTER_FULLSCREEN, () => {
  game.scale.scaleMode = Phaser.Scale.FIT;
  game.scale.autoCenter = Phaser.Scale.CENTER_BOTH;
});