清除文本但保留现有图形

Question

我正在制作这个随机的小草图，您可以在其中单击并放下硬币，左上角会显示您有多少硬币。

我运行遇到的问题是，每当您运行这样做时，您会注意到数量标签在更新时不断地堆叠在自身之上。我读过其他帖子说我们需要重绘背景以清除文本，但当我这样做时，它还会删除 canvas 上生成的任何硬币。我如何更新它以保持硬币可见但删除并重新提取金额？

var moneyCount = 0;

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(100);
}

function draw() {
    if (mouseIsPressed){
        dropCoins();
        displayCount();
    }
}

function displayCount() {
    textSize(80);
    text('$' + moneyCount, 80, 80);
}

function dropCoins() {

    var maxSize = 40;
    var xLoc = mouseX;
    var yLoc = mouseY;

    makeStacks(xLoc, yLoc, maxSize);
}

function makeStacks(x, y, size){

    fill(255,215,0);
    ellipse(x, y, size);

    for (i = 0; i < size; i++){
        let r1 = random(100);
        let r2 = random(100);

        if (r1 < 50){
            x = x + 2
        } else {
            x = x - 2;
        }

        if (r2 < 50){
            y = y + 2;
        } else {
            y = y - 2;
        }

        moneyCount++;
        ellipse(x, y, size);
    }
}

Answer 1

您有几个选项可用：

您存储硬币所在的位置，以便您可以在清除背景后重新绘制它们
您使用多个 "layers" 使用 createGraphics() 因此您可以清除背景，但不能清除硬币 PGraphics

对于选项 1，您可以这样做：

var moneyCount = 0;
var coins = [];

function setup() {
    createCanvas(windowWidth, windowHeight);
    textSize(80);
}

function draw() {
    background(100);
    if (mouseIsPressed){
        dropCoins();
    }
    displayCoins();
    displayCount();
}

function displayCount() {
    text('$' + moneyCount, 80, 80);
}

function dropCoins() {
    
    var maxSize = 40;
    var xLoc = mouseX;
    var yLoc = mouseY;

    makeStacks(xLoc, yLoc, maxSize);
}

function makeStacks(x, y, size){

    for (i = 0; i < size; i++){
        let r1 = random(100);
        let r2 = random(100);

        if (r1 < 50){
            x = x + 2
        } else {
            x = x - 2;
        }

        if (r2 < 50){
            y = y + 2;
        } else {
            y = y - 2;
        }

        moneyCount++;
        coins.push({x:x,y:y,size:size});
    }
}

function displayCoins(){
  fill(255,215,0);
  for(var i = 0 ; i < coins.length; i++){
    ellipse(coins[i].x,coins[i].y,coins[i].size);
  }
}

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

您的想法是初始化一个数组来存储重画硬币所需的数据（x、y 和大小（如果不同））。请记住，您添加的硬币越多，您使用的内存就越多。如果你只需要渲染图像而不需要硬币位置数据，选项2会更有效。

如您在文档中所见，选项 2 的主要思想是您可以在另一个图形层中绘制。初始化后，只需在实例上使用点概念并在其上使用典型的 p5 绘图调用。要渲染它，请使用 image()

这是 PGraphics 选项的演示：

var moneyCount = 0;
var coinsLayer;

function setup() {
    createCanvas(windowWidth, windowHeight);
    textSize(80);
    coinsLayer = createGraphics(windowWidth, windowHeight);
}

function draw() {
    background(100);
    // render coins layer
    image(coinsLayer,0,0);
    if (mouseIsPressed){
        dropCoins(coinsLayer);
    }
    displayCount();
}

function displayCount() {
    text('$' + moneyCount, 80, 80);
}

function dropCoins(coinsLayer) {

    var maxSize = 40;
    var xLoc = mouseX;
    var yLoc = mouseY;

    makeStacks(coinsLayer, xLoc, yLoc, maxSize);
}

function makeStacks(layer, x, y, size){

    layer.fill(255,215,0);
    layer.ellipse(x, y, size);

    for (i = 0; i < size; i++){
        let r1 = random(100);
        let r2 = random(100);

        if (r1 < 50){
            x = x + 2
        } else {
            x = x - 2;
        }

        if (r2 < 50){
            y = y + 2;
        } else {
            y = y - 2;
        }

        moneyCount++;
        layer.ellipse(x, y, size);
    }
}

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

清除文本但保留现有图形

Clearing text but keeping existing graphics

processing

p5.js