Есть ли способ заставить программу печатать текст, когда мышь прокручивает его? p5 - PullRequest
Новая
       17

Есть ли способ заставить программу печатать текст, когда мышь прокручивает его? p5

1 голос
/ 20 апреля 2020

Я пытаюсь найти способ заставить мою программу распознавать, какой текст находится в определенном поле, когда мышь прокручивает его. Я не знаю, как это сделать, потому что текст не является объектом или чем-либо, текст записывается в поля в зависимости от того, где находятся эти поля. Я думаю, что было бы проще, если бы коробки были отдельными элементами, но я не знаю, как это настроить. Вот что я получил до сих пор. 

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>

1 Ответ

0 голосов
/ 20 апреля 2020

Вы должны сделать коробочный тест в drawBoxes. Текущее положение мыши можно получить с помощью переменных mouseX и mouseY.
Проверьте, находится ли мышь в поле. Если мышь находится в поле, верните словарь, содержащий текст и положение мыши. Остальное возвращение 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 возвращает объект, то вы должны сохранить объект (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>
...