taralino

Canvas-Interaktion on_mouse_move

Bei der Verwendung einer Canvas-Zeichenfläche können Funktionen in Abhängigkeit von Maus-Aktivitäten aufgerufen werden.

Die Funktion on_mouse_move(x, y) wird genau dann aufgerufen, wenn der Mauszeiger über der Canvas-Zeichenfläche bewegt wird.

Es werden folgende Argumente übergeben:

Argument	Datentyp	Hinweis
x	Zahl	-
y	Zahl	-

Die Argumente x und y sind die Koordinaten des Mauszeigers (bezüglich der Position des Zeigers relativ zur Canvas-Zeichenfläche).

Beispiel

Bewege den Mauszeiger über die Canvas-Zeichenfläche.

<!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"});

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

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

Vorschau Download Kopie speichern

Beispiel

Klicke auf die Canvas-Zeichenfläche und bewege die Maus (mit gedrückter Maustaste).

<!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 mousekey = "up";

function setup() {
  Canvas.init([0,10], [0,5], {width:600, background:"lightgrey"});
};

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

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

function on_mouse_move(x, y) {
  var c = time() % 1;
  if (mousekey == "down") Canvas.circle(x, y, 0.2, {fill:c});
};

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

Vorschau Download Kopie speichern