有没有办法让程序在鼠标滚动时打印出文本？ 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 and mouseY.
获取测试鼠标是否在盒子里。如果鼠标在框中，则 return 字典，包含文本和鼠标位置。否则 return null.。例如：（我不知道你想显示哪个文本，所以你可能需要调整文本）

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

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

如果 drawBoxes return 是一个对象，那么您必须存储该对象 (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);
    }
}

看例子：

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);

    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);
    }
}

  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();

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

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

有没有办法让程序在鼠标滚动时打印出文本？ p5

Is there a way to make a program print out text when the mouse scrolls over it? p5

javascript

processing

text

object

p5.js