p5.js | mouseDragged()函数介绍

mouseDragged()函数是p5.js中一个用于鼠标拖动处理的事件函数。当鼠标按下并拖动时，这个函数会被重复地调用。我们可以在mouseDragged()函数中处理鼠标拖动的逻辑，从而实现一些像拖动画布、拖动元素等功能。

示例

下面是一个简单的示例，当你拖动鼠标时会随机改变圆的位置和颜色。

let x = 50;
let y = 50;
let d = 50;
let c;

function setup() {
  createCanvas(400, 400);
  c = color(random(255), random(255), random(255));
}

function draw() {
  background(220);
  fill(c);
  ellipse(x, y, d);
}

function mouseDragged() {
  x = mouseX;
  y = mouseY;
  c = color(random(255), random(255), random(255));
}

在上面的示例中，我们在setup()函数中随机生成了一个颜色，然后用它来填充圆形。在draw()函数中，我们只是简单地绘制了这个圆。

而在mouseDragged()函数中，我们将圆的位置设为鼠标的位置，并重新随机生成了一个颜色，这样每次你拖动鼠标时圆的位置和颜色就会变化。

可以使用的变量

在mouseDragged()函数中，我们可以使用以下变量：

• mouseX：当前鼠标在画布中的X坐标
• mouseY：当前鼠标在画布中的Y坐标
• pmouseX：上一个鼠标在画布中的X坐标
• pmouseY：上一个鼠标在画布中的Y坐标
• mouseButton：返回当前按下的鼠标按钮的值，可以通过LEFT、RIGHT、CENTER来检测左键、右键、中键是否按下

总结

mouseDragged()函数是p5.js中一个非常有用的事件函数，它能够处理鼠标拖动相关的操作。通过使用这个函数，我们可以实现一些像画布拖动、元素拖动、画笔绘图等功能。

如果你想要更深入地学习p5.js，可以查看p5.js官方文档：https://p5js.org/zh-Hans/