在浏览器调整大小时调整背景图像的大小

Question

我正在使用 EaselJs 构建我的游戏，我想捕获浏览器的 onresize 事件以调整舞台及其包含的所有图像的大小。

我试过这个代码：

window.addEventListener('resize', resize, false);

init() {
   createjs.Ticker.addEventListener('tick', handleTick);
   resize();
}

function handleTick(event) {
  stage.update();
}

function resize() {
  stage.canvas.width = window.innerWidth;
  stage.canvas.height = window.innerHeight;
}

但这并没有真正奏效...有什么想法吗？

谢谢。

Answer 1

据我所知，如果您使用相对单位（例如 100 %）设置宽度，canvas 应该会自动保持它们的比例。显然，子元素也应该是相对的，以实现流畅的布局。

如果您想使用 javascript 获得相同的结果，您应该使用正确的事件侦听器

window.onresize

Answer 2

如果您使用 JavaScript 调整 canvas 内容的大小，则会向 canvas 元素添加更多像素。内容不会调整大小以适应。

canvas.width = window.innerWidth;

如果您使用 CSS 调整大小，那么您正在变换元素，因此它具有相同数量的像素，但被拉伸了。

canvas.style.width = window.innerWith;

如果你想缩放内容以适应更多像素，你需要缩放舞台，或者更好的是，将你的内容放在容器中并缩放它。

这是我为回答类似问题而制作的快速示例，应该可以帮助您入门。

https://jsfiddle.net/lannymcnie/4yy08pax/

在浏览器调整大小时调整背景图像的大小

Resize the background image on Browser's resize

javascript

easeljs

createjs