更改舞台大小以适应 window 调整大小而不缩放

Question

我正在从原始 canvas 编程中采用 easeljs，这是一项功能让我卡住的是如何在浏览器 window 调整大小时调整舞台大小。

我只是监听 window 的调整大小事件并更改 canvas 大小因此，我简化了示例以涵盖完整的 window.

  // resize the canvas to fill browser window dynamically
  function resizeCanvas() {
    $('#canvas').width($(window).innerWidth());
    $('#canvas').height($(window).innerHeight());
    renderBoard();
  }
  resizeCanvas();
  $(window).on('resize', resizeCanvas);

对于这个例子，我的 renderBoard() 函数包含

  function renderBoard() {
    let centerCircle = new createjs.Shape();
    centerCircle.graphics.beginStroke("red")
      .drawCircle(canvas.clientWidth / 2, canvas.clientHeight / 2, 4);
    let playingRect = new createjs.Shape();
    playingRect.graphics.beginFill("green")
      .rect(10,10, canvas.clientWidth-20,canvas.clientHeight-20);

    stage.addChild(playingRect,centerCircle);
    stage.setChildIndex(playingRect, 0);
    stage.update();
  }

我的新渲染会随着 canvas 变形和缩放，这是我不想要的。在不缩放内容的情况下调整舞台大小的正确方法是什么？

Answer 1

我找到了罪魁祸首。 jQuery

jQuery.width()（和 jQuery.height()）实现使用 CSS 样式来更改所选元素的宽度，easeljs[=26 无法正确解释这一点=].

解决方案是直接更改元素的宽度而不使用 jQuery

换行

$('#canvas').width($(window).width());

成为

$('canvas').get(0).width=$(window).width();

更改舞台大小以适应 window 调整大小而不缩放

change stage size to fit window resize without scaling

jquery

easeljs