Bootstrap Modal с Canvas не отображает адаптивный дизайн правильно - PullRequest
Новая
       10

Bootstrap Modal с Canvas не отображает адаптивный дизайн правильно

0 голосов
/ 31 октября 2018

В моем приложении 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 и т. Д., Поэтому я действительно не уверен, что здесь не так ..

Кто-нибудь знает об этой проблеме и как мне ее решить?

UPDATE:

Мое решение / Взлом, как следует: 

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

Ширина задержка всего в миллисекунду, теперь это прекрасно работает.

1 Ответ

0 голосов
/ 31 октября 2018

Это может быть так же просто, как отсутствие максимальной ширины CSS для вашего холста. 

canvas {  max-width: 100%; }

Я сделал простой jsfiddle, чтобы проверить это. без максимальной ширины ваш холст не реагирует. если вы разместите рабочий фрагмент, его будет проще воспроизвести.

https://jsfiddle.net/mzfk0qnt/

...