Beispiel einer Mausinteraktion mit p5.js

Dieser Artikel stellt Ihnen hauptsächlich das Beispiel der Mausinteraktion im Einführungs-Tutorial von p5.js vor. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

1. Häufig verwendete Schlüsselwörter für die Mausinteraktion

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

mouseIsPressed: Schlüsselwort, wenn die Maus gedrückt wird, ist es wahr, andernfalls ist es falsch

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

Groß-/Kleinschreibung 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“ und „RECHTS“ angezeigt jeweils auf dem Bildschirm angezeigt.

2. Häufig verwendete Funktionen für die Mausinteraktion

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

mouseClicked(): Funktion, wird einmal ausgelöst, wenn die Maus gedrückt wird
mousePressed(): Funktion, wird einmal ausgelöst, wenn die Maus 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. Das Beispiel lautet 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; 
}

3 das Mausobjekt

Verwenden Sie die oben genannten Schlüsselwörter und Funktionen flexibel, um viele Funktionen zu erstellen. Hier ist ein Beispiel für das Ziehen von Objekten mit der Maus.

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 ist der detaillierte Inhalt vonBeispiel einer Mausinteraktion mit p5.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!