鼠标悬停/鼠标点击图像p5.js

Question

我正在尝试创造演奏手鼓的体验。这个想法是，用户拿起鼓槌，将其悬停在鼓上方，如果用户再次单击，鼓就会播放音频。这可能吗？我找到了很多关于形状的资源，特别是椭圆，但没有很多关于图像的信息。

var drum, mallet;
var x, y, w, h; // Location and size
let dragging = false;
let rollover = false;
let img;
let vel;
let pos;

function preload(){
  
  strike = loadSound('HandDrum.mp3');
  drum = loadImage('handdrum2.png');
  mallet = loadImage('drumMallet.png');
  
 
  
}
function setup() {
  createCanvas(750, 500);
  

  //Dimensions for Moving Stuff
  x = 400;
  y = 100;
  w = 300;
  h = 300;


}

function draw() {
  
  background(220);
  
  tint(219,69,69,250);
  image(drum,125,95,400,400);
  tint(82,217,198);
  //image(mallet,350,100,width/2,height/2);
  
   
  if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + 2) {
    rollover = true;
  } else {
    rollover = false;
  }
  // Adjust location if being dragged
  if (dragging) {
    x = mouseX + offsetX;
    y = mouseY + offsetY;
   
  }
  image(mallet, x, y, w, h);
  
}
 

function mousePressed() {

  if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {
    dragging = true;
    offsetX = x - mouseX;
    offsetY = y - mouseY;
  }
}
function mouseReleased() {
   //Quit dragging
   dragging = false;

}

Answer 1

我想通了，所以我发布了我的代码，以防其他人想要解决类似的问题。如果其他人有更有效的方法来解决这个问题，请随时发表评论/分享建议。

let drumSound;
let drumImg;
let volSlider;
let drumCircle;
let malletImg;
let drumMallet;
let offsetX, offsetY; 
let dragging = false;

function preload() {
  drumSound = loadSound('HandDrum.mp3');
  malletImg = loadImage('drumMallet.png');
  drumImg = loadImage('handdrum2.png');
}
function setup() {
  createCanvas(700, 500);
  
  drumSound.playMode('restart');
  volSlider = createSlider(0, 1, 0.5, 0.01);
  volSlider.position(130, 40);
  
  drumCircle = new Drumcircle(width/2 - 150, height/2 - 150, 300, 300);
  drumMallet = new DrumMallet(width / 2 +80, height / 2 - 220, 300, 300);
}

function mousePressed() {
  drumCircle.clicked(mouseX, mouseY);
  
    if (mouseX > drumMallet.x && mouseX < drumMallet.x + drumMallet.sizeX &&
      mouseY > drumMallet.y && mouseY < drumMallet.y + drumMallet.sizeY) {
    dragging = true;
    offsetX = mouseX - drumMallet.x;
    offsetY = mouseY - drumMallet.y;
  }
}
function mouseReleased() {
  dragging = false;
}

class Drumcircle {
  constructor(x, y, sizeX, sizeY) {
    this.name = 'DrumCircle';
    this.drumImg = drumImg;
    this.x = x;
    this.y = y;
    this.sizeX = sizeX;
    this.sizeY = sizeY;
  }
  
  display() {
    image(this.drumImg, this.x, this.y, this.sizeX, this.sizeY);
  }
  
  clicked(x, y) {
    let radialDistance = dist(x, y, width/2, height/2);
    if (radialDistance < 140 &&mouseX > drumMallet.x && mouseX < drumMallet.x + drumMallet.sizeX &&
      mouseY > drumMallet.y && mouseY < drumMallet.y + drumMallet.sizeY) {
      drumSound.play();
      print('play drum');
    } else {
      print('silence');
    }
  }
}
class DrumMallet {
  constructor(x, y, sizeX, sizeY) {
    this.x = x;
    this.y = y;
    this.sizeX = sizeX;
    this.sizeY = sizeY;
  }

  display() {
    image(malletImg, this.x, this.y, this.sizeX, this.sizeY);
  }
}

function draw() {
  background(0, 24, 25);
  
  drumSound.setVolume(volSlider.value());
  
  let volText = 'Volume';
  textSize(12);
  fill(255);
  stroke(0);
  strokeWeight(2);
  text(volText, 85, 45, 70, 80);
  
   if (dragging) {
    drumMallet.x = mouseX - offsetX;
    drumMallet.y = mouseY - offsetY;
  }
  
  drumCircle.display();
  drumMallet.display();
}