教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载本篇文章基于 Coding Train 的《Code! Programming with p5.js》系列第 7.4 节_beginners/p5js/7.4-mouse-interaction.md讲解如何在 p5.js 中让自定义对象与鼠标发生交互——既包括「点击时做出反应」mousePressed也包括「鼠标悬停时做出反应」rollover。通过阅读本文并结合仓库中的完整示例源码你将掌握dist()距离检测、全局鼠标事件函数与对象方法配合的套路从而为任意自定义对象如气泡、按钮、粒子添加可感知的交互反馈这是开发交互式 canvas 应用的核心基本功。一、教程背景对象交互系列的第 4 讲本节教程属于初学者 p5.js 系列中「对象交互Object Interaction」主题在上一节7.3 对象数组中我们已经学会用 ES6 class 定义对象并通过for循环与push()批量创建对象数组而本节的核心问题正如原文档所概括的How can an object interact with the mouse? This video looks at how you can implement basic mouse interaction (rollover, mousePressed) with your own code and HTML5 canvas.即对象如何感知鼠标并做出响应。具体落地为两种最常见的基础交互形态rollover悬停鼠标移动到对象上方时对象的外观发生变化如变色、放大离开后恢复mousePressed按下鼠标按下时对象收到点击信号并触发对应逻辑如切换状态、改变颜色。后续第 7.5 节_beginners/p5js/7.5-removing-objects-from-array.md还会基于同样的思路用splice()实现「点击删除对象」可见本节是整套交互体系的地基。二、核心原理从鼠标坐标到对象内部p5.js 为鼠标交互提供了两组基础设施这是本教程技术方案的起点内置鼠标变量mouseX、mouseY随时保存鼠标在当前 canvas 上的像素坐标在draw()中每帧都会更新该系列第 2.1 节 已有详细讲解参考源码 beginners/p5js/2.1-mousex-mousey/P5/sketch.js。全局鼠标事件函数mousePressed()是 p5.js 在鼠标按下时自动回调的全局函数无需绑定任何监听器只要在 sketch 中定义它即可。交互的本质就是把「全局的鼠标状态」翻译成「对象自己的判断」将mouseX/mouseY作为参数传入对象的方法如clicked(px, py)在对象内部通过几何计算dist()距离检测判断鼠标是否落在自己身上再决定如何改变自身状态。这样每个对象都能独立地对自己的行为负责符合面向对象封装的思想。三、完整示例可点击变亮的气泡仓库中的实际示例位于 beginners/p5js/7.4-mouse-interaction/P5/sketch.js完整代码与教学视频youtu.be/TaN5At5RWH8保持一致下面是逐段剖析。3.1 全局变量与 setup()let bubbles []; function setup() { createCanvas(600, 400); for (let i 0; i 10; i) { let x random(width); let y random(height); let r random(20, 60); let b new Bubble(x, y, r); bubbles.push(b); } }声明全局数组bubbles存放所有气泡对象setup()创建 600×400 的画布循环 10 次用random(width)、random(height)随机分布位置半径r在 2060 像素之间随机实例化Bubble后push()进数组。3.2 draw()移动与绘制function draw() { background(0); for (let i 0; i bubbles.length; i) { bubbles[i].move(); bubbles[i].show(); } }每帧先以黑色清屏然后遍历数组让每个气泡执行move()漂移和show()绘制。注意交互判断不需要在这里主动轮询——点击判断由事件函数触发这正是事件驱动与逐帧轮询的分工。3.3 mousePressed()把点击转发给每个对象function mousePressed() { for (let i 0; i bubbles.length; i) { bubbles[i].clicked(mouseX, mouseY); } }这是整个交互链路的关键一环当鼠标按下时p5.js 自动调用全局mousePressed()我们在其中遍历所有气泡把当前鼠标坐标mouseX/mouseY作为实参传给每个气泡的clicked(px, py)方法。判断「点到谁」的责任被下放给了对象自己——每个气泡都会收到同样的鼠标位置由内部几何逻辑决定自己是否「中招」。3.4 Bubble 类点击检测与状态变化class Bubble { constructor(x, y, r) { this.x x; this.y y; this.r r; this.brightness 0; } clicked(px, py) { let d dist(px, py, this.x, this.y); if (d this.r) { this.brightness 255; } } move() { this.x this.x random(-2, 2); this.y this.y random(-2, 2); } show() { stroke(255); strokeWeight(4); fill(this.brightness, 125); ellipse(this.x, this.y, this.r * 2); } }核心要点dist(px, py, this.x, this.y)p5.js 内置的两点距离函数计算鼠标到气泡圆心的欧几里得距离if (d this.r)当鼠标与圆心的距离小于半径时判定鼠标位于圆内部即「点击命中」。这是 2D 圆形碰撞检测point-in-circle的最简形式也是本教程最重要的几何判定命中后的反应把brightness从 0 改为 255。show()中fill(this.brightness, 125)的第一个参数是填充色的亮度通道灰度模式下 0 为黑、255 为白于是被点击的气泡会由暗变亮产生肉眼可见的交互反馈move()漂移每次调用在 x、y 上各加random(-2, 2)的微小随机偏移让气泡缓慢布朗运动这也让「点击命中」需要更精确地追踪交互练习更有趣。3.5 页面骨架beginners/p5js/7.4-mouse-interaction/P5/index.html 展示了运行所需的 HTML 骨架通过 CDN 引入p5.min.js仓库中使用 p5 1.4.1 版本body中再引入sketch.js即可在浏览器中运行。这也是 p5.js 项目最简可运行结构。四、进阶一实现 rollover 悬停反馈原文档明确将rollover列为两大基础交互之一而示例源码展示的是mousePressed路径。rollover 的实现只需把同一套「坐标传入 距离判断」搬到draw()的逐帧循环里因为悬停状态需要每帧实时更新鼠标移入亮起、移出熄灭无法靠一次性的点击事件完成。在仓库示例的基础上扩展只需给Bubble增加一个悬停判定方法rollover(px, py) { let d dist(px, py, this.x, this.y); if (d this.r) { this.brightness 150; // 悬停时变亮介于默认与点击之间 } else { this.brightness 0; // 移出后恢复默认 } }然后在draw()的遍历循环中每帧调用function draw() { background(0); for (let i 0; i bubbles.length; i) { bubbles[i].rollover(mouseX, mouseY); bubbles[i].move(); bubbles[i].show(); } }与clicked()的「只置亮、不复位」不同rollover 必须包含else分支复位状态否则悬停效果一旦触发便不会消失。这也是区分「瞬时事件点击」与「持续状态悬停」两种交互模式的关键编程差异。若希望鼠标移出后仍有渐变过渡还可以用lerp(this.brightness, target, 0.05)做平滑插值使亮度渐变而非突变。五、进阶二交互组合与后续扩展方向掌握了「对象自检鼠标」的套路后可以自由组合出更丰富的交互点击切换开关状态将brightness改为布尔量on点击时取反this.on !this.on实现可反复点亮的开关式气泡点击删除对象结合第 7.5 节 讲解的splice()在mousePressed()中从后往前遍历数组命中即从数组移除参考源码 beginners/p5js/7.5-removing-objects-from-array/P5/sketch.js注意倒序遍历以避免删除元素后索引错位悬停 点击并用draw()中逐帧调用rollover()更新悬停状态mousePressed()中一次性调用clicked()处理点击两种模式互不干扰拖拽drag在mouseDragged()中把命中对象的坐标直接设为mouseX/mouseY即可实现「抓住气泡拖走」鼠标移出画布保护mouseX/mouseY在鼠标移出 canvas 后可能停留在边缘值悬停判断时可先用mouseIsPressed或画布范围检查做边界保护该系列第 3.4 节布尔变量 对这类状态变量有介绍。六、运行与调试方式在线运行官方 p5.js Web Editor 中复制本示例编辑器 sketch 编号lE4ypFpI点击播放即可看到 10 个随机气泡点击任意气泡它会变亮本地运行将 index.html 与 sketch.js 放在同一目录直接用浏览器打开 HTML 文件即可p5.js 通过 CDN 引入无需本地构建步骤调试技巧在clicked()中临时加一行console.log(d, this.r)输出距离与半径可在浏览器控制台直观验证碰撞判定是否符合预期也可以把d this.r的判定可视化——在show()中绘制圆心到鼠标的连线帮助理解dist()的几何含义。七、小结本节教程的完整技术脉络可以概括为三步基础设施p5.js 提供mouseX/mouseY坐标变量与mousePressed()全局事件函数几何判定用dist()计算鼠标与对象中心的距离与对象半径比较完成 point-in-circle 命中检测职责封装把判定与反应封装进对象方法clicked()/rollover()全局事件或逐帧循环只负责传入坐标。这套「全局状态 → 传入对象 → 内部判定 → 状态改变」的模式是 p5.js 乃至所有 canvas 交互应用按钮、滑块、可点击粒子系统、游戏对象拾取的通用骨架。读者可以基于仓库示例 beginners/p5js/7.4-mouse-interaction/P5/sketch.js 自行改造把圆换成矩形命中判定改为px this.x px this.x this.w的四边范围判断、把反馈从变色改为缩放或音效即可快速验证理解并拓展出自己的交互作品。赞分享教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载相关推荐Context Hub 搜索算法内幕BM25 倒排索引与模糊匹配代码级拆解Context Hub 搜索算法内幕BM25 倒排索引与模糊匹配代码级拆解 Context Hubchub是一个为 AI 编码代理提供精选 API 文档的Pyecharts交互功能终极指南鼠标悬停和点击事件处理技巧Pyecharts交互功能终极指南鼠标悬停和点击事件处理技巧 Pyecharts作为Python生态中功能最强大的数据可视化库其丰富的 交互功能 让图表不再数据可视化图表库ngx-admin 图表事件点击与悬停交互处理ngx admin 图表事件点击与悬停交互处理 ngx admin 作为基于 Angular 和 Nebular 的企业级后台管理模板提供了丰富的图表组件支前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考