在 Angular 应用程序中调整画布元素大小时如何解决闪烁问题

Question

我有一个带有画布的 Angular 组件，如下所示：

<canvas #canvas [width]='displayCanvasWidth' [height]='displayCanvasHeight'></canvas>

在 .ts 文件中，我设置了一个变量来访问画布元素，并且工作正常。像这样：

@ViewChild('canvas', { static: true })
private displayCanvas:ElementRef<HTMLCanvasElement> | null = null;

现在，我画了我的场景，一切都很好。场景通过计时器平滑地进行动画处理，我还连接到画布的 mousemove 事件来进行一些进一步的与鼠标位置相关的渲染，一切都工作正常。

我一直小心地将整个场景（由多个画布组成）绘制到以编程方式创建的离屏画布上，然后在我的#canvas元素上使用drawImage方法来复制完成的离屏画布，以便我只需要当场景中发生任何更新时，请调用可见画布。这一切都运行良好。

当我在组件的 .ts 文件中设置 displayCanvasWidth 的值时，画布会按预期更改大小，但当然我需要重新绘制 mu 场景以允许其新大小。

因此，为了进行测试，我添加了一个按钮，并在该按钮的单击事件上调用：

this.displayCanvasWidth = (this.displayCanvasWidth == 800 ? 801) : 800;

然后我调用我的draw方法来绘制场景，该方法仅在#canvas元素上调用drawImage，并且在动画期间和鼠标移动时多次调用时工作正常。

所以现在我可以在每次单击按钮时继续切换画布的宽度。

我的问题是我注意到像这样改变画布的宽度会导致闪烁。在我看到绘制方法的结果之前，画布会自行清除为白色。

事实上，如果我在设置 this.displayCanvasWidth 的值后立即调用我的绘制方法，那么画布将保持白色。我必须使用 setTimeout 调用我的方法，延迟 1 毫秒，然后我的绘制函数可以工作，但闪烁仍然存在。

有人知道我该如何解决这个问题吗？谢谢。

Answer 1

不要尝试修复闪烁，而是尝试显示覆盖层以隐藏闪烁。

在

ngOnChanges

中，当您将

@Input

更改为不同值时会触发。您可以显示一个覆盖屏幕，其中包含内容

loading...

loading = false;
...

...
ngOnChanges() {
    this.loading = true;
    setTimeout(() => {
        this.loading = false;
    }, 700);
}

html 将显示叠加层

<div style="position: relative;">
    <canvas #canvas [width]='displayCanvasWidth' [height]='displayCanvasHeight'></canvas>
    <div style="position: absolute; left: 0px;right:0px;top:0px;bottom: 0px; background-color: black; color: white;"> Loading... </div>
</div>