更改舞台大小以适合不缩放的窗口大小

Question

我正在采用原始画布编程中的easyljs，让我困扰的是如何调整浏览器窗口大小时的舞台大小。

我只是听窗口的调整大小事件并更改画布大小因此，我简化了示例以覆盖整个窗口。

  // 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();
  }

我的新渲染会扭曲并缩放画布，这是我不想要的。在不缩放内容大小的情况下调整舞台大小的正确方法是什么？

Answer 1

我找到了罪魁祸首。 jQuery

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

解决方案就是直接使用jQuery来改变元素的宽度

更改线

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

成为

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