p5.j​​s：當我的鼠標懸停在處理中的草圖中不同的文本元素上時，如何使文本出現？

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和mouseY 。 文本的高度由textSize設置，文本的寬度可以由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>