Блог

Я использую холст внутри углового. Я получаю холст через ViewChild. Приведенный ниже код показывает, как/где я получаю ошибку. Сначала у меня были функции со стрелками, в которых я добавлял прослушиватель событий (что работало нормально), но поскольку теперь мне также нужно удалить прослушиватели событий при определенных обстоятельствах, мне пришлось создать функции для обработчиков событий. И как только я добавил функции для обработчиков событий, он перестал работать. Он начал говорить, что использование this.context и this.canvas не определено.

Одна из ошибок:

core.js:6210 ERROR TypeError: Cannot read properties of undefined (reading 'beginPath')

 @ViewChild('canvas', { static: false }) canvas: ElementReflt;HTMLCanvasElementgt;; public context: CanvasRenderingContext2D;  ngOnInit(): void {  this.refresh(); }  private refresh(): void {  this.blahblah.blah().subscribe(() =gt; {  this.initCanvas();  }); }  private initCanvas(): void {  if(something) {  this.canvas.nativeElement.addEventListener('mouseup', this.mouseUpEvent);  this.canvas.nativeElement.addEventListener(  'mousedown',  this.mouseDownEvent  );  this.canvas.nativeElement.addEventListener(  'mousemove',  this.mouseMoveEvent  );  } else {  this.canvas.nativeElement.removeEventListener(  'mouseup',  this.mouseUpEvent  );  this.canvas.nativeElement.removeEventListener(  'mousedown',  this.mouseDownEvent  );  this.canvas.nativeElement.removeEventListener(  'mousemove',  this.mouseMoveEvent  );   } }  public mouseUpEvent(): void {  this.drawing = false;  this.context.beginPath(); }  public mouseDownEvent(): void {  this.drawing = true; }  public mouseMoveEvent(event: any): void {  console.log(this.canvas); //UNDEFINED  if (!this.drawing) return;   const rect = this.canvas.nativeElement.getBoundingClientRect();  const x = Math.round(  ((event.clientX - rect.left) / (rect.right - rect.left)) *  this.canvas.nativeElement.width  );  const y = Math.round(  ((event.clientY - rect.top) / (rect.bottom - rect.top)) *  this.canvas.nativeElement.height  );   this.context.lineWidth = 5;  this.context.lineCap = 'round';   this.context.lineTo(x, y);  this.context.stroke();  this.context.beginPath();  this.context.moveTo(x, y); }