p5.js mouseMoved()函数

mouseMoved()函数是p5.js中的一个预定义函数，它会在鼠标移动时被调用。这个函数使用起来非常简单，只需要将需要执行的代码放到这个函数中即可。

语法

function mouseMoved() {
  // 在这里编写代码
}

示例

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function mouseMoved() {
  circle(mouseX, mouseY, 50);
}

在这个示例中，我们定义了一个mouseMoved()函数，每当鼠标移动时就会在鼠标所在位置画一个直径为50的圆形。

应用

mouseMoved()函数可以用于实现鼠标交互的效果，例如拖拽、悬停等。在这些场景中，我们可以通过mouseMoved()函数来根据鼠标位置计算出需要调整的元素位置或状态。

let box_pos;

function setup() {
  createCanvas(400, 400);
  box_pos = createVector(200, 200)
}

function draw() {
  background(220);
  rect(box_pos.x - 25, box_pos.y - 25, 50, 50);
}

function mouseMoved() {
  let d = dist(mouseX, mouseY, box_pos.x, box_pos.y);
  if (d < 25) {
    cursor(HAND);
  } else {
    cursor(ARROW);
  }
}

function mouseClicked() {
  let d = dist(mouseX, mouseY, box_pos.x, box_pos.y);
  if (d < 25) {
    box_pos.x = mouseX;
    box_pos.y = mouseY;
  }
}

在这个示例中，我们创建了一个矩形元素，并通过mouseMoved()函数实现了悬停手势的效果。当鼠标悬停在矩形内时，鼠标会变成手势，表示可以拖动这个矩形。当鼠标点击时，我们通过mouseClicked()函数实现了拖动矩形的效果。