p5.js鼠标交互如何实现并使用
程序员文章站
2022-03-10 11:02:38
...
这次给大家带来p5.js鼠标交互如何实现并使用,p5.js鼠标交互实现并使用的注意事项有哪些,下面就是实战案例,一起来看一下。
一、鼠标交互常用关键词
p5.js提供了许多鼠标操作用的关键词与函数,常用的有:
mouseIsPressed:关键词,若鼠标按下则为true,反之为false
mouseButton:关键词,用来判断鼠标按下的是哪个键
案例如下:
function setup() { createCanvas(400, 400); } function draw() { background(220); if (mouseIsPressed) { textAlign(CENTER); textSize(30); if (mouseButton == LEFT) text("LEFT",200,height/2); if (mouseButton == RIGHT) text("RIGHT",200,height/2); if (mouseButton == CENTER) text("CENTER",200,height/2); } }
当鼠标按下左、中、右键时,分别会在屏幕上显示“LEFT”、“CENTER”、“RIGHT"。
查看效果:
http://alpha.editor.p5js.org/full/BkEcwrdUb
二、鼠标交互常用函数
鼠标操作常用函数如下,还有:
mouseClicked():函数,鼠标点击时触发一次
mousePressed():函数,鼠标按下时触发一次
mouseReleased():函数,鼠标松开时触发一次
我们可以用这些函数控制何时在屏幕上显示图形,案例如下:
var showEllipse=false; var showRect=false; function setup() { createCanvas(400, 400); } function draw() { background(220); if (mouseIsPressed){ ellipse(50, height/2, 50, 50); } if(showEllipse){ ellipse(200, height/2, 50, 50); } if(showRect){ rectMode(CENTER); rect(350,height/2,50,50); } } function mouseClicked(){ showEllipse=!showEllipse; } function mousePressed(){ showRect=true; } function mouseReleased(){ showRect=false; }
查看效果:http://alpha.editor.p5js.org/full/BkHEY8OUZ
三、鼠标拖拽物体
灵活运用以上关键字和函数,可以做出许多功能,这里举一例,用鼠标拖拽物体。
代码如下:
var x=200; var y=200 var r=50; function setup() { createCanvas(400, 400); } function draw() { background(220); if(mouseIsPressed&&dist(mouseX,mouseY,x,y)<r){ x=mouseX; y=mouseY; } ellipse(x,y,r,r); }
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是p5.js鼠标交互如何实现并使用的详细内容,更多请关注其它相关文章!
推荐阅读
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能以及如何处理多个通知
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
-
在使用AJAX实现页面局部刷新时,如何从后台直接返回一个jsp文件到前台,并替换掉原先内容?
-
如何使用jQuery实现合并/追加数组并去除重
-
如何使用CSS3来代替JS实现交互教程
-
如何使用JS+CSS3实现图片响应鼠标移动放大缩小
-
如何使用CSS实现鼠标上移图标旋转效果的图文代码详解
-
p5.js实现鼠标交互的示例
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能以及如何处理多个通知
-
如何使用CSS3来代替JS实现交互教程