Question

我正在使用platformWorkerAppDynamic来渲染我的Angular应用程序。但是，我需要操纵画布上下文。我可以使用Renderer2创建画布，但我找不到一种方法来调用getContext('2d')方法或将图像绘制到画布。我收到错误，因为this.canvas.nativeElement是WebWorkerRenderNode的对象，而不是HTML元素。

任何人都可以帮我解决这个问题吗？通过webworker呈现的一些使用DOM进行Angular应用程序操作的教程也非常受欢迎。

Answer 1

不幸的是，这是Web平台的一个固有限制，根本没有HTMLCanvasElement，因此Web worker中没有画布上下文，至少不是您想要的方式。

对于辅助线程，有一个称为OffscreenCanvas的东西，但是问题在于，其getContext的实现目前非常有限，它基本上仅用于WebGL（因此没有getContext("2d")，并且没有相应的方法，例如beginPath，moveTo，stroke等）

let canvas = new OffscreenCanvas(512, 512);
let canvasCtx = canvas.getContext("webgl");
...

您的第二个选择是自己在Web工作者中计算原始图像数据，然后将其传输回主线程以在画布上绘制。这些都不是直接解决您的问题的方法，但是如果您想在工人中做与画布相关的工作，那么这是您唯一的选择。

Answer 2

您应该考虑使用viewchild

首先向canvas元素声明一个模板变量

<canvas #myCanvas width="100" height="100"> </canvas>

将以下内容导入您的组件

import { ViewChild, ElementRef } from '@angular/core';

然后，在组件类中使用它

@ViewChild('myCanvas') canvasRef: ElementRef;

现在，在angular lifecycle hook中声明它

ngOnInit() {
  var ctx = this.canvasRef.nativeElement.getContext('2d');
  ctx.fillStyle="red";
  ctx.fillRect(0,0,600,600);
}

在Web Worker

2 个答案: