Heim > Artikel > Web-Frontend > Beispiel einer Mausinteraktion im Einführungs-Tutorial zu p5.js
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:
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!