Heim  >  Artikel  >  Web-Frontend  >  Beispiel einer Mausinteraktion im Einführungs-Tutorial zu p5.js

Beispiel einer Mausinteraktion im Einführungs-Tutorial zu p5.js

亚连
亚连Original
2018-05-29 17:12:482195Durchsuche

In diesem Artikel werden hauptsächlich die Beispiele der Mausinteraktion im Einführungs-Tutorial von p5.js vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

In diesem Artikel wird ein Beispiel für die Mausinteraktion im Einführungs-Tutorial von p5.js vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

1. Gängige Schlüsselwörter für die Mausinteraktion

p5.js bietet viele Schlüsselwörter und Funktionen für Mausoperationen:

mouseIsPressed: Schlüsselwort. es ist wahr und umgekehrt. Ist falsch

mouseButton: Schlüsselwort, das verwendet wird, um zu bestimmen, welche Taste von der Maus gedrückt wird

Der Fall ist wie folgt:

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

Wenn die linke, mittlere und rechte Maustaste gedrückt wird, werden „LINKS“, „MITTE“ bzw. „RECHTS“ auf dem Bildschirm angezeigt.

Sehen Sie sich den Effekt an:

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

2. Allgemeine Mausinteraktionsfunktionen

Häufig verwendete Funktionen für Mausoperationen sind wie folgt, außerdem:

mouseClicked(): Funktion, die einmal ausgelöst wird, wenn mit der Maus geklickt wird
mousePressed() : Funktion, wird ausgelöst, wenn die Maus einmal gedrückt wird
mouseReleased(): Funktion, wird einmal ausgelöst, wenn die Maus losgelassen wird

Mit diesen Funktionen können wir steuern, wann Grafiken auf dem Bildschirm angezeigt werden wie folgt:

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

Effekt anzeigen: http://alpha.editor.p5js.org/full/BkHEY8OUZ

3. Ziehen Sie das Objekt mit der Maus

Mit den oben genannten Schlüsselwörtern und Funktionen können Sie viele Funktionen erstellen.

Der Code lautet wie folgt:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es für alle hilfreich sein wird Zukunft.

Verwandte Artikel:

Über den Unterschied zwischen v-if und v-show in Vuejs und das Problem, dass v-show nicht funktioniert

Eine Zusammenfassung von 10 fortgeschrittenen Techniken zur Verwendung der Konsole zum Debuggen

Detailliertes Verständnis des Node-Moduls

Das obige ist der detaillierte Inhalt vonBeispiel einer Mausinteraktion im Einführungs-Tutorial zu p5.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn