当鼠标滚动到文本上时，有没有办法使程序打印出文本？ p5

Question

我试图找到一种方法，使我的程序可以在鼠标滚动到某个特定框时确认该框内的文本。我不知道该怎么做，因为文本不是对象或任何东西，文本是根据框的位置写入框的。我认为，如果盒子是单独的元素，这会更容易，但是我不知道如何设置它。这是到目前为止我得到的。

var curMonthName;
var daysInMonth;
var firstDayCal;
var currentWeek;
var calX;
var calY;

function setup() {
  createCanvas(650, 500);
}

function draw() {
  background(220, 15, 15);
  drawCalendar();
}

function drawCalendar()
{
  let monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  let monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  let weekDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  var currentMonth = month() - 1;
  var currentYear = year();
  curMonthName = monthNames[currentMonth];
  daysInMonth = monthDays[currentMonth];
  firstDayCal = 1;
  cDate = new Date(currentYear, currentMonth, firstDayCal);
  calDate = cDate.getDate();
  actualDate = cDate.getDate();
  currentDay = cDate.getDay();
  currentWeek = 1;
  fill(255);
  textAlign(LEFT);
  textSize(40);
  noStroke();
  textSize(45);
  textAlign(CENTER);
  text(curMonthName, width/2, 45);
  textSize(20);
  text('Sun', 89.25, 75);
  text('Mon', 167.75, 75);
  text('Tue', 246.25, 75);
  text('Wed', 324.75, 75);
  text('Thur', 403.25, 75);
  text('Fri', 481.75, 75);
  text('Sat', 560.25, 75);
  while (firstDayCal <= daysInMonth)
  {
    drawBoxes(calX, calY);
    cDate.setDate(firstDayCal);
  }
}

function drawBoxes(calX, calY)
{
  numbOfRows = ceil((1 + daysInMonth) / 7);
  textAlign(CENTER);
  if(cDate.getDay() == 0)
  {
    calX = 50;
  }
  else if(cDate.getDay() == 1)
  {
    calX = 128.5;
  }
  else if(cDate.getDay() == 2)
  {
    calX = 207;
  }
  else if(cDate.getDay() == 3)
  {
    calX = 285.5;
  }
  else if(cDate.getDay() == 4)
  {
    calX = 364;
  }
  else if(cDate.getDay() == 5)
  {
    calX = 442.5;
  }
  else if(cDate.getDay() == 6)
  {
    calX = 521;
  }
  if (cDate.getDay() == 0 && calDate != 1)
  {
    currentWeek = currentWeek + 1;
  }
  calY = 70 * currentWeek + 18;
  fill(255);
  stroke(0);
  strokeWeight(1.5);
  rect(calX, calY, 78.5, 70);
  fill(0);
  textSize(30);
  if (currentWeek == 1)
  {
    text(calDate, calX + 39.25, 135);
  }
  else if (currentWeek == 2)
  {
    text(calDate, calX + 39.25, 205);
  }
  else if (currentWeek == 3)
  {
    text(calDate, calX + 39.25, 275);
  }
  else if (currentWeek == 4)
  {
    text(calDate, calX + 39.25, 345);
  }
  else if (currentWeek == 5)
  {
    text(calDate, calX + 39.25, 415);
  }
  else if (currentWeek == 6)
  {
    text(calDate, calX + 39.25, 485);
  }
  firstDayCal = firstDayCal + 1;
  calDate = calDate + 1;
  if (currentDay != 6)
  {
    currentDay = currentDay + 1;
  }
  else if (currentDay >= 7)
  {
    currentDay = 0;
  }
  calReadableDate = calDate + month() + year();
}

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

Answer 1

您必须在drawBoxes中进行盒装测试。当前鼠标位置可以通过变量mouseX和mouseX获得。测试鼠标是否在框中。如果鼠标在框中，则返回一个字典，其中包含文本和鼠标位置。否则返回mouseY。例如：（我不知道您要显示哪个文本，因此您可能需要调整文本）

mouseY

如果null.返回一个对象，则必须存储该对象（

function drawBoxes(calX, calY) {
    // [...]

        if (calX < mouseX && mouseX < calX + 78.5 && calY < mouseY && mouseY < calY + 70 ) {
        return { text: calReadableDate, x:mouseX, y: mouseY };
    }
    return null;
}

）。在日历上方drawBoxes的末尾绘制文本：

infoText

请参见示例：

drawCalendar

function drawCalendar() {
    // [...]

    let infoText = null
    while (firstDayCal <= daysInMonth) {
        let text = drawBoxes(calX, calY);
        if (text) {
            infoText = text
        }  
        cDate.setDate(firstDayCal);
    }

    if (infoText) {
        text(infoText.text, infoText.x, infoText.y);
    }
}