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

您必须评估鼠标是否在文本上。鼠标位置可以通过mouseX and mouseY. The height of the text is set by textSize and the width of a text can be get by textWidth获取。例如：

textH = 20 
textSize(textH);

text('United States', 230, 260);
textW = textWidth('United States')
if (mouseX > 230 && mouseX < 230+textW && mouseY < 260 && mouseY > 260-textH) {
    text('text', 230, 260+5+textH);
}

看例子，代码用在函数中(textExpand):

let maxDiameter;
let theta;

setup = () => {

    createCanvas(1500, 600);
    maxDiameter = 45;

    theta = 0;

    background(0);
    ellipseMode();
}

textExpand = (textMain, textAdd, textX, textY, textH) => {
      textSize(textH);
      text(textMain, textX, textY);
      textW = textWidth(textMain)
      if (mouseX > textX && mouseX < textX+textW && mouseY < textY && mouseY > textY-textH) {
          text(textAdd, textX, textY+5+textH);
      }
}

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

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

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

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


    //Morocco
    fill(0, 255, 0, 200);
    stroke(0, 255, 0, 200);
    textExpand('Morocco', 'test2', 500, 300, 20);
    ellipse(590, 315, diam, diam);

    //Canada

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

     //Russian Federation

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

    //Japan
    fill(255, 0, 0, 200);
    stroke(255, 0, 0, 200);
    textExpand('Japan', 'test5', 1330, 245, 20);
    ellipse(1295, 245, diam, diam);

    theta += 0.03;
}

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

p5.js: 当我的鼠标悬停在正在处理的草图中的不同文本元素上时，如何使文本出现？

p5.js: How can I make text appear when my mouse hovers over a different text element in the sketch in processing?

javascript

processing

p5.js