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

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

canvas.width = window.innerWidth;

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

canvas.style.width = window.innerWith;

如果要缩放内容以适应更多像素，则需要缩放舞台，或者更好，将内容放入容器中并进行缩放。

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

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

Answer 2

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

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

window.onresize

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

2 个答案: