p5.js 单击鼠标在光标位置绘制一个矩形

Question

我有一个非常简单的 9x9 网格。我知道如何处理这个网格上的矩形。我想要的是，当我单击其中一个网格矩形时，该矩形现在应该在其周围标记有填充或边框。

我可以画一个矩形，在网格上正确的矩形处用蓝色填充。

但是下次单击网格时，会绘制新的矩形，但旧的矩形仍然存在并且会留在那里。等等。

我现在的问题是，如何才能始终准确地在点击位置的矩形上绘制？

也许 class 是正确的方法吗？

每次都创建一个新矩形并销毁旧矩形？

var nullx = 140;
var nully = 50;

var breite = 65;
var hoehe = 65;

var pressed = false;

function setup() {
  createCanvas(800, 1200);  
}

function draw() {
  //background(220);
  noFill();
  //strokeWeight(2);
  
  sudokulines(); 
  numberstorect();
  if(pressed == true){
    sqMark();      
  }
  
  if (mousePressed == true){
    console.log("click...")
    sqMark();
  }
}

function mousePressed(){
  pressed = true;
}

function sqMark(){  
  var tempX;
  var tempY;
  //console.log(tempX,tempY);
  tempX = (floor((mouseX - nullx) / breite) * breite) + nullx;
  tempY = (floor((mouseY - nully) / hoehe) * hoehe) + nully;
  console.log(tempX,tempY);
  if (tempX > 139 && tempY > 49 ){
    if (tempX < 661 && tempY < 571){
      strokeWeight(0.7);
      fill(0,0,255);
      rect(tempX+2,tempY+2,breite-4,hoehe-4);
      pressed = false;
    }    
  }
}

function sudokulines(){  
  //The vertical lines
  for (var i = 1; i <= 8; i++){
    if (i == 3 || i == 6){
      strokeWeight(3);
    }else{
      strokeWeight(1);
    }
    line(nullx + breite * i, nully, nullx + breite * i, nully+ 9*hoehe);
  }
  //The horizontal lines
  for (var i = 1; i <= 8; i++){
    if (i == 3 || i == 6){
        strokeWeight(3);
      }else{
        strokeWeight(1);
      }      
    //The big rectangle around
    line(nullx , nully + hoehe * i, nullx + 9*breite, nully + hoehe * i);    
  }

  strokeWeight(3);
  rect(nullx,nully,9*breite,9*hoehe);
}

function numberstorect(){
  textAlign(CENTER,CENTER);
  fill(0);
  textSize(breite/1.3);
  text(2,nullx + breite/2, nully + hoehe/2);
}

Answer 1

了解 p5.js 以即时模式绘制很重要，因此每个元素一旦绘制，就不可移动，除非有意绘制或清除。针对您的特定问题的这个最简单的解决方案是简单地保存到用户按下鼠标时要突出显示的位置，然后始终清除 canvas 并在绘制函数中重绘所有内容（包括选定的正方形）。因为没有动画，您可以通过禁用 setup 函数中的循环来优化它，然后在发生影响显示的事情时显式调用重绘（即按下鼠标）。

var nullx = 140;
var nully = 50;

var breite = 65;
var hoehe = 65;

let selectedX = -1;
let selectedY = -1;

function setup() {
  createCanvas(800, 1200);
  // By default don't re draw every frame
  noLoop();
}

function draw() {
  background(255);
  noFill();
  //strokeWeight(2);

  sudokulines();
  numberstorect();
  sqMark();
}

function mousePressed() {
  // Set the selection
  selectedX = (floor((mouseX - nullx) / breite) * breite) + nullx;
  selectedY = (floor((mouseY - nully) / hoehe) * hoehe) + nully;
  // Only redraw when something changes.
  redraw();
}

function sqMark() {
  if (selectedX > 139 && selectedY > 49) {
    if (selectedX < 661 && selectedY < 571) {
      strokeWeight(0.7);
      fill(0, 0, 255);
      rect(selectedX + 2, selectedY + 2, breite - 4, hoehe - 4);
      pressed = false;
    }
  }
}

function sudokulines() {
  //The vertical lines
  for (var i = 1; i <= 8; i++) {
    if (i == 3 || i == 6) {
      strokeWeight(3);
    } else {
      strokeWeight(1);
    }
    line(nullx + breite * i, nully, nullx + breite * i, nully + 9 * hoehe);
  }
  //The horizontal lines
  for (var i = 1; i <= 8; i++) {
    if (i == 3 || i == 6) {
      strokeWeight(3);
    } else {
      strokeWeight(1);
    }
    //The big rectangle around
    line(nullx, nully + hoehe * i, nullx + 9 * breite, nully + hoehe * i);
  }

  strokeWeight(3);
  rect(nullx, nully, 9 * breite, 9 * hoehe);
}

function numberstorect() {
  textAlign(CENTER, CENTER);
  fill(0);
  textSize(breite / 1.3);
  text(2, nullx + breite / 2, nully + hoehe / 2);
}

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

p5.js 单击鼠标在光标位置绘制一个矩形

p5.js draw a rectangle at cursor position on mouse click

rectangles

p5.js