Rumah >hujung hadapan web >tutorial js >p5.js鼠标交互如何实现并使用
这次给大家带来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); }
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci p5.js鼠标交互如何实现并使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!