角度画布在调整大小时不刷新

debugcn 发表于 Dev

安托万·奥利维尔（Antoine Olivier）

我有一个要根据窗口大小调整大小的“角度画布”。我是在组件内部这样做的：

@HostListener('window:resize', ['$event'])
onResize(event) {
    this.canvaHeight = window.innerHeight * 0.91;
    this.canvaWidth = window.innerWidth  * 0.75;
}

在我的html中：

<canvas id="canvas" #canvas width="{{ canvaWidth }}" height="{{ canvaHeight }}" (mousedown)="select($event)" (mousemove)="move($event)" (mouseup)="drop()"></canvas>

当我调整窗口大小时，画布大小会正确更改，但其上的所有内容都会消失。当我执行调用更新功能的操作时，它会重新出现。但是，如果我在onResize函数中调用它，它不会再次出现，我也不知道为什么。

@HostListener('window:resize', ['$event'])
onResize(event) {
    this.canvaHeight = window.innerHeight * 0.91;
    this.canvaWidth = window.innerWidth  * 0.75;
    this.update();
}

任何想法？我是否必须以某种方式刷新DOM？那怎么办呢？

编辑：如果我移动一个对象，即使它尚未重新出现，它的确也被移动了。

我还尝试了Promise和一些刷新DOM的方法，例如ApplicationRef.tick（）和ChangeDetectorRef.detectChanges（），但是它不起作用

安托万·奥利维尔（Antoine Olivier）

多亏了Blindman67，我找到了一种使其工作的方法：

@HostListener('window:resize')
onResize() {
    this.canvaHeight = Math.floor(window.innerHeight * 0.91);
    this.canvaWidth = Math.floor(window.innerWidth  * 0.75);
    this.canvas.nativeElement.height = this.canvaHeight;
    this.canvas.nativeElement.width = this.canvaWidth;
    this.update();
}

（我仍然需要存储其他内容的值）

（Math.floor是更正浏览器的警告）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。