javascript - 如何重绘从p5.js javascript中的类创建的对象

我有一个绘制树的类，但是我希望能够在按下鼠标时绘制另一棵树，但是我目前不能作为redraw（）使用；只需在当前画布上添加一棵树即可。我希望每次单击都能绘制一棵新树。

我试图找到一种删除对象或重置类属性的方法，但是我没有成功。我已经使用了p5.js编辑器，并且下面的代码可以在这里找到：https://editor.p5js.org/remcqueen/sketches/Sk0smd8G4

var a;

function setup() {
  createCanvas(600, 600);
  a = new clCreateTree();
}

function draw() {
  noLoop();
  background(220);
  a.draw();
}

function mousePressed() {
  redraw();

}

class clCreateTree {

  constructor() {
    this.tree = createGraphics(width, height);
    this.n = 0;
    this.leafs = [];
    this.treeHeight = 150;
    this.treeDensity = 3;
    this.treeAge = 70;
  }

  sketch() {
    this.tree.beginShape();
    this.tree.noStroke();
    this.tree.background(0, 0);

    for (var i = 0; i < this.treeDensity; i++) {
        this.tree.fill(map(i, 0, 2, 60, 20));
        this.branch(width/2, height, this.treeAge, -HALF_PI, this.treeHeight, 0);
    }
    this.tree.endShape();
  }

  draw() {
    this.sketch();
    image(this.tree, 5, 5);

  }


  branch(x, y, bSize, theta, bLength, pos) {

    this.n += 0.01;
    var diam = lerp(bSize, 0.7 * bSize, pos / bLength);
    diam *= map(noise(this.n), 0, 1, 0.4, 1.6);

    this.tree.ellipse(x, y, diam, diam);
    if (bSize > 0.6) {
        if (pos < bLength) {
            x += cos(theta + random(-PI / 10, PI / 10));
            y += sin(theta + random(-PI / 10, PI / 10));
            this.branch(x, y, bSize, theta, bLength, pos + 1);
        } else {
            this.leafs.push(createVector(x, y));
            var drawLeftBranch = random(1) > 0.1;
            var drawRightBranch = random(1) > 0.1;
            if (drawLeftBranch) this.branch(x, y, random(0.5, 0.7) *  bSize, theta - random(PI / 15, PI / 5), random(0.6, 0.8) * bLength, 0);
            if (drawRightBranch) this.branch(x, y, random(0.5, 0.7) * bSize, theta + random(PI / 15, PI / 5), random(0.6, 0.8) * bLength, 0);

            if (!drawLeftBranch && !drawRightBranch) {
                this.tree.push()
                this.tree.translate(x, y);
                this.tree.rotate(theta);
                this.tree.quad(0, -diam / 2, 2 * diam, -diam / 6, 2 * diam, diam / 6, 0, diam / 2);
                this.tree.pop();
            }
        }
     }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

预期的结果应该是，当按下鼠标时，将绘制一棵新树，而不会出现当前发生的任何重叠。

最佳答案

绘制树之前，必须先clear() graphics object：

sketch() {
    this.tree.beginShape();
    this.tree.clear(); // <--- clear
    this.tree.noStroke();

    for (var i = 0; i < this.treeDensity; i++) {
        this.tree.fill(map(i, 0, 2, 60, 20));
        this.branch(width/2, height, this.treeAge, -HALF_PI, this.treeHeight, 0);
    }
    this.tree.endShape();
}

或者您必须在绘制树之前绘制纯色背景（alpha = 255）：

sketch() {
    this.tree.beginShape();

    this.tree.noStroke();
    this.tree.background(255,255);

    for (var i = 0; i < this.treeDensity; i++) {
        this.tree.fill(map(i, 0, 2, 60, 20));
        this.branch(width/2, height, this.treeAge, -HALF_PI, this.treeHeight, 0);
    }
    this.tree.endShape();
}

var a;

function setup() {
  createCanvas(600, 600);
  a = new clCreateTree();
}

function draw() {
  noLoop();
  background(220);
  a.draw();
}

function mousePressed() {
  redraw();

}

class clCreateTree {

  constructor() {
    this.tree = createGraphics(width, height);
    this.n = 0;
    this.leafs = [];
    this.treeHeight = 150;
    this.treeDensity = 3;
    this.treeAge = 70;
  }

  sketch() {
    this.tree.beginShape();
    this.tree.clear();
    this.tree.noStroke();

    for (var i = 0; i < this.treeDensity; i++) {
        this.tree.fill(map(i, 0, 2, 60, 20));
        this.branch(width/2, height, this.treeAge, -HALF_PI, this.treeHeight, 0);
    }
    this.tree.endShape();
  }

  draw() {
    this.sketch();
    image(this.tree, 5, 5);

  }


  branch(x, y, bSize, theta, bLength, pos) {

    this.n += 0.01;
    var diam = lerp(bSize, 0.7 * bSize, pos / bLength);
    diam *= map(noise(this.n), 0, 1, 0.4, 1.6);

    this.tree.ellipse(x, y, diam, diam);
    if (bSize > 0.6) {
        if (pos < bLength) {
            x += cos(theta + random(-PI / 10, PI / 10));
            y += sin(theta + random(-PI / 10, PI / 10));
            this.branch(x, y, bSize, theta, bLength, pos + 1);
        } else {
            this.leafs.push(createVector(x, y));
            var drawLeftBranch = random(1) > 0.1;
            var drawRightBranch = random(1) > 0.1;
            if (drawLeftBranch) this.branch(x, y, random(0.5, 0.7) *  bSize, theta - random(PI / 15, PI / 5), random(0.6, 0.8) * bLength, 0);
            if (drawRightBranch) this.branch(x, y, random(0.5, 0.7) * bSize, theta + random(PI / 15, PI / 5), random(0.6, 0.8) * bLength, 0);

            if (!drawLeftBranch && !drawRightBranch) {
                this.tree.push()
                this.tree.translate(x, y);
                this.tree.rotate(theta);
                this.tree.quad(0, -diam / 2, 2 * diam, -diam / 6, 2 * diam, diam / 6, 0, diam / 2);
                this.tree.pop();
            }
        }
     }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

关于javascript - 如何重绘从p5.js javascript中的类创建的对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54153201/