Question

我正在尝试学习如何使用类使我的代码可重用。我首先尝试创建一个后台类，当调用draw方法时，该后台类应生成一个后台，但是目前还没有发生。请给我有关该课程的反馈以及使用该课程时遇到的任何错误。

使用在线资源，我尝试根据函数设置一个后台类，如代码所示。我正在使用在线p5.js编辑器进行编码，位于以下位置：https://editor.p5js.org

function setup() {
  createCanvas(900, 700);
  const a = new treeBackground(1,1)

}

function draw() {
  a.draw()
}

class treeBackground {

  constructor(bg, diam) {
    this.bg = bg;
    this.diam = diam;
  }

  draw() {
    this.bg = createGraphics(width, height);
    this.bg.beginShape();
    this.bg.noStroke();
    for (this.diam = 1.5 * width; this.diam > 0.5 * width; this.diam -= 20) {
        bg.fill(map(this.diam, 0.5 * width, 1.5 * width, 255, 210));
        bg.ellipse(width / 2, height / 2, this.diam, this.diam);
    }
    this.bg.endShape();

  }

}

没有错误，草图区域应显示灰色背景的画布。

Answer 1

发生了一些事情：

正如sauce所指出的，由于a是在各个地方引用的，因此需要在共享范围内进行定义（例如，像全局变量一样）。
bg中的this.bg也应为draw。它也应该只初始化一次，因此可能应该移到构造函数中。看起来传递的参数diam和bg实际上并未真正使用，因此应将其删除。
beginShape和endShape与vertex，curveVertex，bezierVertex和quadraticVertex函数一起用于制作形状。既然您在这里没有这样做，则没有必要。
最后，createGraphics创建一个屏幕外渲染器。要在屏幕上实际显示它，可以使用image函数。

总的来说，看起来像这样：

var a;
function setup() {
  createCanvas(900, 700);
  a = new treeBackground();
}

function draw() {
  a.draw();
}

class treeBackground {

  constructor() {
    this.bg = createGraphics(width, height);
  }

  draw() {
    this.bg.noStroke();
    for (this.diam = 1.5 * width; this.diam > 0.5 * width; this.diam -= 20) {
        this.bg.fill(map(this.diam, 0.5 * width, 1.5 * width, 255, 110)); // changed this to make the gradient more pronounced
        this.bg.ellipse(width / 2, height / 2, this.diam, this.diam);
    }
    image(this.bg, 0, 0);
  }

}

<script src="https://unpkg.com/p5@0.7.2/lib/p5.min.js"></script>

尝试理解并让类适用于p5.js

1 个答案: