Переменная не определена в p5. js при использовании с angular?

Question

Я изучаю WebGL и начал разрабатывать приложение Sketch, используя p5. js и angular. Я определил логические переменные в файле компонента, так что на основании этого я хочу вызвать определенные функции c, такие как эллипс, прямоугольник, линия и т. Д. c в функции рисования. Эти логические переменные управляются кнопками в другом компоненте.

Я получаю ошибку как core. js: 6014 ОШИБКА TypeError: Невозможно прочитать свойство 'isRectangleMode' из неопределенного

Файл компонента:

import { Component, OnInit } from '@angular/core';

import * as p5 from 'p5';

import { Subscription } from 'rxjs';

import { HomeService } from '../home.service';

@Component({
  selector: 'app-doodle-area',
  templateUrl: './doodle-area.component.html',
  styleUrls: ['./doodle-area.component.css']
})
export class DoodleAreaComponent implements OnInit {

  private p5Init : any;

  modeSubs : Subscription;
  modeSelected : string = null;
  isCircleMode : boolean = false;
  isEllipseMode : boolean = false;
  isRectangleMode : boolean = false;
  isLineMode : boolean = false;
  isPointMode : boolean = false;
  isBrushMode : boolean = false;
  isPenMode : boolean = false;

  constructor(private homeService : HomeService) { }

  ngOnInit() {
    this.createCanvas();

    this.homeService.modeSelected
      .subscribe(modeSelected => {
        this.modeSelected = modeSelected;
        console.log(this.modeSelected);
        if(this.modeSelected) {
          this.modeReset();
          if(this.modeSelected === "circle") {
            this.isCircleMode = true;
          } else if(this.modeSelected === 'ellipse') {
            this.isEllipseMode = true;
          } else if(this.modeSelected === 'rectangle') {
            this.isRectangleMode = true;
          } else if(this.modeSelected === 'line') {
            this.isLineMode = true;
          } else if(this.modeSelected === 'point') {
            this.isPointMode = true;
          } else if(this.modeSelected === 'brush') {
            this.isBrushMode = true;
          } else if(this.modeSelected === 'pen') {
            this.isPenMode = true;
          }
        }
      });
  }

  private modeReset() {
    this.isCircleMode = false;
    this.isEllipseMode = false;
    this.isRectangleMode = false;
    this.isLineMode = false;
    this.isPointMode = false;
    this.isBrushMode = false;
    this.isPenMode = false;
  }

  private createCanvas() {
    this.p5Init = new p5(this.doodleArea);
  }

  private doodleArea(p : any) {

    p.setup = () => {
      p.createCanvas(p.windowWidth - 440, p.windowHeight - 200).parent('doodle-area');
      p.background(206,214,224);
      p.createP("Hello");
    }

    p.draw = () => {

      if(this.isRectangleMode) {
        console.log("Rectangle");
      }

      p.stroke(0);
      if(p.mouseIsPressed === true) { 
        p.line(p.mouseX, p.mouseY, p.pmouseX, p.pmouseY); 
      }
    }
  }

}

Снимок экрана консоли:

Answer 1

Это проблема из-за объема. Здесь внутри функции обратного вызова doodleArea область действия не является компонентной областью (this). Здесь это не определено, и мы не можем получить доступ к isRectangleMode из неопределенного. Возможное решение для этого:

In .ts изменить createCanvas() с кодом, приведенным ниже:

private createCanvas() {
  const doodleArea = s => {
  s.setup = () => {
    let canvas = s.createCanvas(s.windowWidth - 440, s.windowHeight - 200);
    canvas.parent("doodle-area");
    s.draw = () => {
      if (this.isRectangleMode) {
        console.log("Rectangle");
      }

      s.stroke(0);
      if (s.mouseIsPressed === true) {
        s.line(s.mouseX, s.mouseY, s.pmouseX, s.pmouseY);
      }
    };
    s.keyPressed = () => {
    if (s.key === 'c') {
      window.location.reload();
    }};};
  };
  this.p5Init = new p5(doodleArea);
}

Ниже приведен пример того же кода:

https://stackblitz.com/edit/angular-s-p5-angular?file=src%2Fapp%2Fapp.component.ts

https://angular-s-p5-angular.stackblitz.io

Надеюсь, это поможет.