添加和删除文本和形状的最佳方式是什么？

Question

我正在画一个圆，想在鼠标在圆内时显示一些文字，而在鼠标在圆外时不显示文字。

下面的代码可以在鼠标进入时显示文本，但似乎摆脱文本要困难得多！我查看了不同的 p5 函数，例如 remove()，但它们并没有像我那样做 expect/want.

在这种情况下隐藏文本的正确方法是什么？

我想同样的方法也可以用来隐藏形状？例如，如果我要绘制一个矩形而不是显示一些文本，或者处理方式不同？

var centerX = 400;
var centerY = 400;
var radius = 40;

function setup() {
    var canvas = createCanvas(800, 800);
    canvas.parent("Example");
    background(200);
    fill(204, 101, 192, 127);
    ellipse(centerX, centerY, radius, radius);
}

function draw() {
    mouseOver(radius, centerX, centerY);
}

function mouseOver(radius, centerX, centerY) {
    var d = Math.sqrt(((mouseX - centerX) * (mouseX - centerX)) + ((mouseY - centerY) * (mouseY - centerY)));
    if (d < radius) {
        textSize(12);
        text("Hello", 400, 400);
    } else {
        //remove the text
    }
}

Answer 1

要删除绘图的一部分，很常见的做法是在 draw 中简单地调用背景，然后重新绘制整个 canvas

你的代码可以这样写：

var centerX;
var centerY;
var radius = 40;

function setup() {
    var canvas = createCanvas(200, 200);
    centerX = width/2;
    centerY = height/2
  
}

function draw() {
 background(200);
  fill(204, 101, 192, 127);
  ellipse(centerX, centerY, radius*2, radius*2);
  mouseOver(radius, centerX, centerY);
}

function mouseOver(radius, centerX, centerY) {
    var d = Math.sqrt(((mouseX - centerX) * (mouseX - centerX)) + ((mouseY - centerY) * (mouseY - centerY)));
    if (d < radius) {
        fill(0);
        textSize(12);
        text("Hello", centerX, centerY);
    }
}

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

添加和删​​除文本和形状的最佳方式是什么？

What is the best way to add and remove text and shapes?

p5.js

添加和删除文本和形状的最佳方式是什么？