帶畫布的Bootstrap模式無法正確顯示響應設計

Question

在我的Angular（不是JS）應用程序中，我使用了引導程序模版來提供用戶可以繪制一些草圖的表面（HTML5 Canvas）。

我面臨的問題是，當我將畫布放入模態中時，響應式設計突然停止工作：

HTML：

<div class="modal-body" id="modalbody">

    <other tags like buttons, inputs etc/>

    <canvas #canvas id="canvas"
            (touchstart)="touchDown($event)"
            (touchmove)="touchMove($event)"
            (touchend)="mouseUp()"
            (mousedown)="mouseDown($event)"
            (mousemove)="mouseMove($event)"
            (mouseup)="mouseUp()">
   </canvas>
</div>

角度：

// Init Canvas Properties
@ViewChild('canvas') public canvas: ElementRef;
private ctx: CanvasRenderingContext2D;
private canvasElem: HTMLCanvasElement;

private setCanvasRenderingContext2d(): void {
    this.ctx = this.canvas.nativeElement.getContext('2d');
    this.canvasElem = this.canvas.nativeElement;
}

在設置canvasElem變量之前，模式會正確顯示響應式設計，但是一旦我將其設置，響應式設計就會中斷，不僅畫布從模式對話框中伸出，而且所有其他標簽（如按鈕和位於畫布上方的輸入（例如工具箱）。

canvasElem唯一用於的是這里：

let rect = this.canvasElem.getBoundingClientRect();

否則我什至不需要它，而且ctx變量也僅用於繪圖操作，例如ctx.fillRect等，因此我真的不確定這里出了什么問題。

有誰知道這個問題，我該如何解決？

更新：

我的解決方案/問題如下：

setTimeout(() => {
  window.dispatchEvent(new Event('resize'));
}, 1);

只需延遲一毫秒的寬度，現在可以正常工作了。

Answer 1

就像丟失畫布的最大寬度CSS一樣簡單。

canvas {  max-width: 100%; }

我做了一個簡單的jsfiddle來測試它。 沒有最大寬度，您的畫布將無法響應。 如果您發布有效的代碼段，則更易於重現。

https://jsfiddle.net/mzfk0qnt/