与角度一起使用时，p5.js 中的变量未定义？

Question

我正在学习 WebGL，并开始使用 p5.js 和 angular 开发 Sketch 应用程序。我在组件文件中定义了布尔变量，因此我想在绘图函数中触发特定函数，如椭圆、矩形、直线等。这些布尔变量由另一个组件中的按钮管理。

我收到core.js:6014 错误类型错误：无法读取未定义的属性“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;

          }

        }

      });

  }

}

控制台截图：

Answer 1

这是因为范围的问题。在回调函数doodleArea内部，范围不是组件范围 ( this)。这里这是未定义的，我们无法访问未定义的isRectangleMode。可能的解决方案是：在 .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.tshttps://angular-s-p5-angular.stackblitz.io希望这会有所帮助。