我在實體模式下使用 p5js 時遇到問題。我將代碼分成多個檔案以便于維護，將類與主草圖檔案分開。
在類中，我需要訪問在主草圖中宣告的變數，但是undefined當我將草圖物件注入到類中時我得到了。
理想情況下，我希望能夠訪問主草圖檔案中宣告的任何變數。有可能/推薦嗎？
這是我試圖實作的最小案例示例：
索引.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
}
}
uj5u.com熱心網友回復：
您希望在TestClass的render()函式中可用的任何變數都需要 1) 傳遞給TestClass建構式，2) 傳遞給渲染函式，3) 在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建構式會是更好的 OOP 實踐：
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);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/366301.html
標籤：javascript 网络包 p5.js