Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- api:documentation:grafik:mausereignisse [2021/01/06 14:52] – [Reagieren auf Maus- und Tastaturereignisse (Event-Handler)] Martin Pabst
+++ api:documentation:grafik:mausereignisse [2023/04/28 10:41] (aktuell) – [Beispiel 4: Drag and Drop] Martin Pabst
@@ Zeile 23: / Zeile 23: @@
 </HTML>
 ===== Beispiel 1: Überschreiben der onMouseDown-Methode =====
+Stelle die Geschwindigkeit auf maximal, starte das Programm und klicke zuerst mit der linken Maustaste, dann mit der rechten Maustaste auf die Quadrate!
 <HTML>
 <div class="java-online" style="height: 500px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'onMouseDown'}">
@@ Zeile 55: / Zeile 56: @@
 </div>
 </HTML>
+===== Beispiel 2: Drehen eines Dreiecks mit den Tasten r und l =====
+Stelle die Programmgeschwindigkeit auf maximal, starte das Programm und drücke die Tasten r oder l. Probiere auch aus, was passiert, wenn Du die Tasten für längere Zeit hältst!
+ \\
+Falls das Programm nicht reagiert, hat vielleicht irgendein anderes Control im Browser den  Tastaturfokus. Klicke in diesem Fall einfach einmal mit der Maus in den Grafikbereich, damit er den Tastaturfokus erhält.
+<HTML>
+<div class="java-online" style="height: 550px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'onKeyTyped'}">
+<script type="text/plain" title="onKeyTyped.java">
+new World(1000, 1000);
+new Zeiger();
+while(true) { }
+class Zeiger extends Triangle {
+   public Zeiger() {
+      super(450, 600, 550, 600, 500, 300);
+   }
+   public void onKeyTyped(String key) {
+      if(key == "l") {
+         rotate(20);
+      }
+      if(key == "r") {
+         rotate(-20);
+      }
+   }
+}</script>
+</div>
+</HTML>
+===== Beispiel 3: Überschreiben der onMouseEnter/onMouseLeave-Methoden =====
+Setze die Geschwindigkeit auf maximal, starte das Programm und fahre mit der Maus über die Quadrate!
+<HTML>
+<div class="java-online" style="height: 500px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'onMouseEnterLeave'}">
+<script type="text/plain" title="onMouseEnterLeave.java">
+new World(1000, 1000);
+for(int i = 0; i < 10; i++) {
+   for(int j = 0; j < 10; j++) {
+      new MouseOverQuadrat(100 * i + 10, 100 * j + 10, 80);
+   }
+}
+while(true){ }
+class MouseOverQuadrat extends Rectangle {
+   MouseOverQuadrat(double x, double y, double breite) {
+      super(x, y, breite, breite);
+      setFillColor(Color.white);
+   }
+   public void onMouseEnter(double x, double y) {
+         setFillColor(Color.blue);
+         getWorld().setCursor("pointer");          // Ändert die Form des Mauszeigers.
+   }
+   public void onMouseLeave(double x, double y) {
+         setFillColor(Color.white);
+         getWorld().setCursor("default");          // Setzt die Form des Mauszeigers wieder auf "default" ( = Pfeil) zurück.
+   }
+}
+</script>
+</div>
+</HTML>
+===== Beispiel 4: Drag and Drop =====
+Durch geschickte Nutzung der obigen Handler lässt sich Drag and Drop per Maus verwirklichen:
+<HTML>
+<div class="java-online" style="height: 500px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'dragAndDrop1'}">
+<script type="text/plain" title="onMouseEnterLeave.java">
+println("Packen Sie das Rechteck mit der Maus und ziehen Sie es woanders hin!");
+new DraggableRectangle(100, 100, 50, 50);
+class DraggableRectangle extends Rectangle {
+   String state = "idle";    // "idle", "dragging"
+   double lastMouseX;
+   double lastMouseY;
+   public void onMouseDown(double x, double y, int key) {
+      if(state == "idle") {
+         lastMouseX = x;
+         lastMouseY = y;
+         state = "dragging";
+         startTrackingEveryMouseMovement();
+         getWorld().setCursor("grabbing");
+      }
+   }
+   public void onMouseEnter(double x, double y) {
+      if(state != "dragging") {
+         getWorld().setCursor("pointer");
+      }
+   }
+   public void onMouseLeave(double x, double y) {
+      if(state != "dragging") {
+         getWorld().setCursor("default");
+      }
+   }
+   public void onMouseMove(double x, double y) {
+      if(state == "dragging") {
+         move(x - lastMouseX, y - lastMouseY);
+         lastMouseX = x;
+         lastMouseY = y;
+      }
+   }
+   public void onMouseUp(double x, double y, int key) {
+      state = "idle";
+      stopTrackingEveryMouseMovement();
+      getWorld().setCursor("pointer");
+   }
+}
+</script>
+</div>
+</HTML>