這次帶給大家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中文網其它相關文章!
推薦閱讀:
以上是p5.js滑鼠互動如何實現並使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!