p5.js鼠標(biāo)交互如何實現(xiàn)并使用

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 19:49:38

p5.js鼠標(biāo)交互如何實現(xiàn)并使用

p5.js鼠標(biāo)交互如何實現(xiàn)并使用:這次給大家?guī)韕5.js鼠標(biāo)交互如何實現(xiàn)并使用，p5.js鼠標(biāo)交互實現(xiàn)并使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。一、鼠標(biāo)交互常用關(guān)鍵詞p5.js提供了許多鼠標(biāo)操作用的關(guān)鍵詞與函數(shù)，常用的有：mouseIsPressed：關(guān)鍵詞，若鼠標(biāo)按下則為true，反

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀p5.js鼠標(biāo)交互如何實現(xiàn)并使用:這次給大家?guī)韕5.js鼠標(biāo)交互如何實現(xiàn)并使用，p5.js鼠標(biāo)交互實現(xiàn)并使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。一、鼠標(biāo)交互常用關(guān)鍵詞p5.js提供了許多鼠標(biāo)操作用的關(guān)鍵詞與函數(shù)，常用的有：mouseIsPressed：關(guān)鍵詞，若鼠標(biāo)按下則為true，反

這次給大家?guī)韕5.js鼠標(biāo)交互如何實現(xiàn)并使用，p5.js鼠標(biāo)交互實現(xiàn)并使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

一、鼠標(biāo)交互常用關(guān)鍵詞

p5.js提供了許多鼠標(biāo)操作用的關(guān)鍵詞與函數(shù)，常用的有：

mouseIsPressed：關(guān)鍵詞，若鼠標(biāo)按下則為true，反之為false

mouseButton：關(guān)鍵詞，用來判斷鼠標(biāo)按下的是哪個鍵

案例如下：

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); 
 } 
}

當(dāng)鼠標(biāo)按下左、中、右鍵時，分別會在屏幕上顯示“LEFT”、“CENTER”、“RIGHT"。

查看效果：

http://alpha.editor.p5js.org/full/BkEcwrdUb

二、鼠標(biāo)交互常用函數(shù)

鼠標(biāo)操作常用函數(shù)如下，還有：

mouseClicked()：函數(shù)，鼠標(biāo)點擊時觸發(fā)一次
mousePressed()：函數(shù)，鼠標(biāo)按下時觸發(fā)一次
mouseReleased()：函數(shù)，鼠標(biāo)松開時觸發(fā)一次

我們可以用這些函數(shù)控制何時在屏幕上顯示圖形，案例如下：

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

三、鼠標(biāo)拖拽物體

靈活運用以上關(guān)鍵字和函數(shù)，可以做出許多功能，這里舉一例，用鼠標(biāo)拖拽物體。

代碼如下：

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); 
}

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

p5.js鼠標(biāo)交互如何實現(xiàn)并使用

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：交互 p5.js p5js

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

p5.js鼠標(biāo)交互如何實現(xiàn)并使用

p5.js鼠標(biāo)交互如何實現(xiàn)并使用

p5.js鼠標(biāo)交互如何實現(xiàn)并使用

最新推薦

猜你喜歡

熱門推薦