So implementieren und verwenden Sie die Mausinteraktion von p5.j

Dieses Mal zeige ich Ihnen, wie Sie die Mausinteraktion von p5.j implementieren und verwenden. Was sind die Vorsichtsmaßnahmen für die Implementierung und Verwendung der Mausinteraktion von p5.j? .

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“ bzw. „RECHTS“ auf dem Bildschirm angezeigt.

Sehen Sie sich den Effekt an:

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

2. Mausinteraktion Häufig verwendete Funktion

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

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

Wir können diese Funktionen verwenden, um zu steuern, wann Grafiken angezeigt werden werden auf dem Bildschirm angezeigt, der Fall ist 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; 
}

Sehen Sie sich den Effekt an: http://alpha.editor.p5js.org/full/BkHEY8OUZ

3. Ziehen Sie das Mausobjekt

Durch die flexible Verwendung der oben genannten Schlüsselwörter und Funktionen können viele Funktionen erstellt werden. 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); 
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP-Chinesisch Webseite!

Empfohlene Lektüre:

vue+Echarts zum Implementieren der Klickhervorhebung (mit Code)

echarts Maus-Overlay-Hervorhebung Schritte zu Knotenbeziehungsnummer implementieren

Das obige ist der detaillierte Inhalt vonSo implementieren und verwenden Sie die Mausinteraktion von p5.j. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!