Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- api:documentation:grafik:mausereignisse [2021/01/06 15:21] – 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 57: / Zeile 58: @@
-===== Beispiel 2: Dreien eines Dreiecks mit den Tasten r und l =====
+===== 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">
-// 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!
-//
-// Fall 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.
 new World(1000, 1000);
 new Zeiger();
@@ Zeile 92: / Zeile 90: @@
 ===== 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'}">
@@ Zeile 99: / Zeile 98: @@
 for(int i = 0; i < 10; i++) {
    for(int j = 0; j < 10; j++) {
-      new ClickQuadrat(100 * i + 10, 100 * j + 10, 80);
+      new MouseOverQuadrat(100 * i + 10, 100 * j + 10, 80);
    }
 }
@@ Zeile 105: / Zeile 104: @@
 while(true){ }
-class ClickQuadrat extends Rectangle {
+class MouseOverQuadrat extends Rectangle {
-   ClickQuadrat(double x, double y, double breite) {
+   MouseOverQuadrat(double x, double y, double breite) {
       super(x, y, breite, breite);
       setFillColor(Color.white);
    }
-   public void onMouseDown(double x, double y, int key) {
+   public void onMouseEnter(double x, double y) {
-      if(key == 0) {
          setFillColor(Color.blue);
-      } else {
+         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");
    }