css - 正确调整画布组件大小

Question

对于我当前的项目，我实现了一个 Angular 8 库，它为组件 Canvas 提供了一个画布元素。该组件可以包含在使用<app-canvas [width]="canvas.width" [height]="canvas.height"></app-canvas>某个模板的任何 Angular 项目中。

如您所见，模板包含两个@Input属性，width并且height. 通过在运行时执行动态 BabylonJS 游戏代码，如果某些参考变量发生变化，应该可以更新 Canvas 组件的宽度和高度。

我的问题是如何正确调整HTMLCanvasElement实际渲染图像的大小。应该使用 CSS 参数调整画布元素本身的大小，还是应该更好地将其包装到一个容器中，该容器应该处理调整大小并仅将画布用作子元素？

使用ngStyle和父容器导致“ExpressionChangedAfterItHasBeenCheckedError”：

<div id="canvas-container" [ngStyle]="{'width': gameState.get('screen.width') + 'px', 'height': gameState.get('screen.height') + 'px'}">
  <canvas #canvas
          (focus)="canvasFocused = true"
          (blur)="canvasFocused = false">
  </canvas>
</div>

标签： cssangularcanvasstylingbabylonjs