javascript - 带 Canvas 的 Bootstrap 模态无法正确显示响应式设计

Question

在我的 Angular(不是 JS)应用程序中，我使用引导模式来提供一个界面(HTML5 Canvas)，用户可以在其中绘制一些草图。

我面临的问题是，当我将 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>

Angular :

// 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变量之前，模式会正确显示响应式设计，但是一旦我设置它，响应式设计就会中断，不仅 Canvas 会伸出模式对话框，而且 Canvas 上方的所有其他标签(例如按钮和输入)也会被破坏(就像工具箱一样)也很突出。

canvasElem 唯一的用途就是在这里:

let rect = this.canvasElem.getBoundingClientRect();

否则我什至不需要它，并且 ctx 变量也仅用于绘图操作，例如 ctx.fillRect 等，所以我真的不确定这里出了什么问题..

有谁知道这个问题以及如何解决它？

更新:

我的解决方案/黑客如下:

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

延迟只有一毫秒，现在效果很好。

Answer 1

它可以像 Canvas 缺少最大宽度 css 一样简单。

canvas {  max-width: 100%; }

我做了一个简单的jsfiddle来测试它。如果没有最大宽度，您的 Canvas 将无法响应。如果您发布工作片段，则更容易重现。

https://jsfiddle.net/mzfk0qnt/