p5.js：在处理过程中，当鼠标悬停在草图中的其他文本元素上时，如何显示文本？

Question

这是我的代码。在此，当我将鼠标悬停在屏幕左下方的每个国家/地区的名称时，我想显示有关该国家/地区的更多信息（关于一个段落）。使直径变大（变小）的代码来自其他地方。我希望能够将鼠标悬停在每个国家/地区名称文本上，并在将光标从该国家/地区名称移开后在屏幕上看到消失的信息。

let maxDiameter;

let theta;

let img;



preload = () => {
        img = loadImage('1x/map-5.png');
}

setup = () => {

    createCanvas(windowWidth, windowHeight);
    maxDiameter = 45;

    theta = 0;

    background(0);
    ellipseMode();



}

draw = () => {
    background(0);

     fill(255, 0, 0, 255);
    noStroke();

    textSize(20);
    fill(255, 0, 0, 255);

    //United States
    var diam = 10 + sin(theta) * maxDiameter;
    fill(132, 132, 132, 200);
     stroke(132, 132, 132, 200);
    text('United States', 230, 260);
    ellipse(200, 240, diam, diam);


    //Morocco

    fill(0, 255, 0, 200);
    stroke(0, 255, 0, 200);
     text('Morocco', 500, 300);
    ellipse(590, 315, diam, diam);

    //Canada

    fill(253, 100, 1, 200);
    stroke(253, 100, 1, 200);
     text('Canada', 260, 140);
    ellipse(230, 140, diam, diam);

 //Russian Federation


    fill(132, 132, 132, 200);
    stroke(132, 132, 132, 200);
     text('Russian Federation', 1030, 130);
    ellipse(1000, 125, diam, diam);

    //Japan

    fill(255, 0, 0, 200);
    stroke(255, 0, 0, 200);
     text('Japan', 1330, 245);
    ellipse(1295, 245, diam, diam);

    theta += 0.03;

Answer 1

您必须评估鼠标是否在文本上。鼠标位置可以通过mosueX和mosueX获得。文本的高度设置为mosueY，文本的宽度可以设置为mosueY。例如：]]

textSize
textSize
请参见示例，其中代码在功能（textWidth）中使用：

textWidth
textH = 20 
textSize(textH);