本文主要和大家介紹了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"。
二、滑鼠互動常用函數
滑鼠操作常用函數如下,還有:
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; }
#三、滑鼠拖曳物件
##靈活運用以上關鍵字和函數,可以做出許多功能,這裡舉一例,用滑鼠拖曳物體。 程式碼如下: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實作滑鼠互動的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!