taralino

Maus-Interaktionen

Unter Verwendung einer Canvas-Zeichenfläche können auch Maus-Interaktionen definiert werden. Das grundlegende Konzept dazu ist exemplarisch folgendes:

Die Funktion on_mouse_down

Sofern eine Canvas-Zeichenfläche sowie eine Funktion mit dem Namen on_mouse_down definiert ist, so wird diese genau dann aufgerufen, wenn eine Maustaste gedrückt wird.

Dabei werden der Funktion on_mouse_down als Argumente x und y die Koordinaten des Mauszeigers übergeben.

Zur Referenz

Auf einem Gerät mit Touch-Display kann statt mit der Maus auch mit dem Finger "gedrückt" werden.

Beispiel

Zur Verwendung der Funktion on_mouse_down.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([0,10], [0,5], {width:600, background:"lightgrey"});
Canvas.text(5, 2.5, "Klicke auf die Zeichenflaeche");

function on_mouse_down(x, y) {
  Canvas.circle(x, y, 0.25, {fill:"blue"});
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Weitere Interaktionen

Auf gleiche Art und Weise lassen sich auch weitere Maus-Interaktionen definieren:

on_mouse_down(x,y)	Wird aufgerufen, wenn Maustaste gedrückt wird.
on_mouse_up(x,y)	Wird aufgerufen, wenn Maustaste losgelassen wird.
on_mouse_move(x,y)	Wird aufgerufen, wenn der Mauszeiger bewegt wird.
on_mouse_enter()	Wird aufgerufen, wenn der Mauszeiger die Zeichenfläche betritt.
on_mouse_leave()	Wird aufgerufen, wenn der Mauszeiger die Zeichenfläche verlässt.

Beispiel

Weiterführendes Beispiel zur Verwendung der Maus-Interaktionen.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

var color = "red";
var mousekey = "up";

function setup() {
  Canvas.init([0,10], [0,5], {width:600, background:"lightgrey"});
  Button.add("red", "Rot");
  Button.add("green", "Gruen");
  Button.add("blue", "Blau");
};

function on_click(id) {
  color = id;
};

function on_mouse_down(x, y) {
  mousekey = "down";
};

function on_mouse_up(x, y) {
  mousekey = "up";
};

function on_mouse_move(x, y) {
  if (mousekey == "down") Canvas.circle(x, y, 0.2, {fill:color});
};

</script>
</body>
</html>

Vorschau Download Kopie speichern