p5.js 实例模式：如何从 class 内部访问实例变量

Question

我在实例模式下使用 p5js 时遇到问题。我将我的代码分成多个文件以便于维护，将 classes 与主草图文件分开。

在 classes 中，我需要访问在主草图中声明的变量，但是当我将草图对象注入 class.

时，我得到 undefined

理想情况下，我希望能够访问主草图文件中声明的任何变量。是possible/recommended吗？

这是我要实现的最小案例示例：

index.js

import p5 from "p5"
import TestClass from "./_testClass";

let sketch = new p5( (p) => {
    let myColor = 75;

    p.setup = function() {
        p.createCanvas(1000,1000);
        let t = new TestClass(100,100)
        t.render(p)
    }
}, "p5");

_testClass.js

export default class TestClass {
    constructor(x,y) {
        this.x = x;
        this.y = y;
    }
    
    render(p) {
        p.rect(this.x, this.y, 50, 50); // i get a square on the canvas: p.rect() is recognized
        console.log(p.myColor); // undefined
    }
}

Answer 1

您希望在 TestClass 的 render() 函数中可用的任何变量都需要 1) 传递给 TestClass 构造函数，2) 传递给渲染器函数，3) declared/assigned on/to p5 实例，或 4) 全局声明。

对于实例模式草图，向 p5 实例添加内容并不少见：

import p5 from "p5"
import TestClass from "./_testClass";

let sketch = new p5((p) => {
    // let myColor = 75;
    p.myColor = 75;

    p.setup = function() {
        p.createCanvas(1000,1000);
        let t = new TestClass(100,100)
        t.render(p)
    }
}, "p5");

但是，我认为将它传递给 TestClass 构造函数会更好：

import p5 from "p5"
import TestClass from "./_testClass";

let sketch = new p5((p) => {
    let myColor = 75;

    p.setup = function() {
        p.createCanvas(1000, 1000);
        let t = new TestClass(100, 100, myColor)
        t.render(p)
    }
}, "p5");

export default class TestClass {
    constructor(x, y, rectColor) {
        this.x = x;
        this.y = y;
        this.rectColor = rectColor;
    }
    
    render(p) {
        console.log(this.rectColor);
        p.fill(this.rectColor);
        p.rect(this.x, this.y, 50, 50);
    }
}

p5.js 实例模式：如何从 class 内部访问实例变量

p5.js Instance Mode: How to access the instance variables from inside a class

javascript

webpack

p5.js