t3n News Entwicklung

JavaScript: Mehrfingergesten erkennen und einsetzen

JavaScript: Mehrfingergesten erkennen und einsetzen

Mit der Verbreitung von und verändert sich die Art und Weise, wie wir Internetseiten bedienen. Stichwort: Multi-Touch. Mit gibt es dank des Touch-Ereignisses eine Möglichkeit, die Bewegung der Finger auf einem Multi-Touch-Screen zu erkennen und für Funktionen – zum Beispiel Zoom- oder Zeichenfunktionen – einzusetzen.

JavaScript: Mehrfingergesten erkennen und einsetzen

Was kann das Touch-Ereignis von JavaScript?

Mit dem Touch-Ereignis lassen sich unter anderem die Anzahl der Finger, die sich derzeit auf dem Bildschirm befinden, feststellen sowie die Koordinaten der Finger. Dabei lassen sich die Koordinaten sowohl für die Seite („pageX“ und „pageY“), auf der man sich gerade befindet, feststellen als auch für den Bildschirm („screenX“ und „screenY“).

Des Weiteren lässt sich die Größe des Berührungspunktes in Form einer Ellipse feststellen. Dazu lassen sich die Längen der beiden Halbachsen der Ellipse sowie die Drehung auslesen.

Wie erstelle ich ein Touch-Ereignis mit JavaScript?

Als Beispiel sollen in einer kleinen Funktion Kreise gezeichnet werden – und zwar jeweils dort, wo der Bildschirm berührt wird. Dazu wird zunächst ein Event-Listener gestartet, der bei Berührung des Bildschirms beziehungsweise bei Bewegung auf dem Bildschirm eine Funktion startet:

function init() {
  document.getElementById("leinwand").addEventListener("touchstart", zeichnen, false);
  document.getElementById("leinwand").addEventListener("touchmove", zeichnen, false);
}

window.onload = init;

Über die Funktion „zeichnen()“ lassen sich nun die Koordinaten des Touch-Ereignisses auslesen und zum Zeichnen auf einer Leinwand verwenden:

function zeichneng(event) {
  var allefinger = event.touches;
}

Über die Variable „allefinger“ wird die Anzahl der Finger, die sich auf dem Bildschirm befinden, in einem Array gespeichert. Über den Array kann man nun auf die Koordinaten jedes einzelnen Fingers zugreifen:

function zeichnen(event) {
  var allefinger = event.touches;
  var leinwand = document.getElementById("canvas");
  var zeichnung = leinwand.getContext("2d");
  for (var i = 0; i < allefinger.length; i++) {
    var finger = allefinger[i];
    zeichnung.beginPath();
    zeichnung.arc(finger.pageX, finger.pageY, 20, 0, 2 * Math.PI, true);
    zeichnung.fill();
    zeichnung.stroke();
  }
}

Über „pageX“ und „pageY“ lassen sich die Koordinaten der Finger auslesen. Über die Zeichenfunktion „arc()“ lassen sich diese Koordinaten als Mittelpunkt für einen zu zeichnenden Kreis nutzen. Ein Kreis wird immer dann gezeichnet, wenn mit einem oder mehreren Fingern der Bildschirm berührt wird oder einer oder mehrere Finger sich auf dem Bildschirm bewegen.

Wie kann ich die Berührungsfläche berechnen?

Es lässt sich auch feststellen, wie groß die Berühungsfläche ist. Diese Fläche in Form einer Ellipse lässt sich allerdings nicht direkt auslesen. Über die Länge der beiden Halbachsen („radiusX“ und „radiusY“) kann der Radius der Ellipse berechnet werden:

var flaeche = finger.radiusX * finger.radiusY * Math.PI;

Außerdem lässt sich mit „rotationAngle“ die Drehung der Ellipse auslesen. Aufgrund der Größe der Ellipse lässt sich beispielsweise feststellen, ob jemand mit einem Finger oder einem Stift den Bildschirm berührt.

Während aktuelle Browser „pageX“ und „pageY“ unterstützen, wird „radiusX“ und „radiusY“ bislang von noch keinem Browser unterstützt.

Was gibt es noch zu beachten?

Mit dem Touch-Ereignis werden alle Fingergesten berücksichtigt. Wer also mit allen zehn Fingern auf dem Bildschirm unterwegs ist, löst entsprechend viele Funktions- beziehungsweise Schleifenaufrufe aus. Das kann gerade bei Smartphones und Tablets schnell zu Ressourcenproblemen führen. Abhilfe kann „setInterval()“ schaffen. Darüber lässt sich beispielsweise steuern, dass eine Funktion nur nach einem bestimmten Intervall aufgerufen wird. So verhindert man, dass es dem Mobilgerät irgendwann zuviel wird.

Was haltet ihr von dem Touch-Ereignis? Setzt ihr es ein oder fallen euch Einsatzmöglichkeiten hierfür ein?

Weitereführende Links zum Thema JavaScript:

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
4 Antworten
  1. von Thomas Quensen am 19.12.2011 (10:11 Uhr)

    In diesem Zusammenhang sei noch erwähnt, dass der IE Mobile (natürlich) keine Touch-Gesten kennt und diese Technik somit nicht auf Windows Phones funktioniert :(

    Antworten Teilen
  2. von Frido am 23.01.2012 (16:41 Uhr)

    Von der Wiege bis zur Bahre, feste Gewohnheiten sind das einzig Wahre.

    Antworten Teilen
  3. von Jerrell am 20.07.2012 (01:23 Uhr)

    Very well written post. It will be useful to anyone who usess it, as well as yours truly :). Keep doing what you are doing - i will definitely read more posts.

    Antworten Teilen
  4. von Alexander am 21.07.2012 (13:52 Uhr)

    I definitely wanted to write a brief comment so as to thank you for all the stunning advice you are giving on this website. My time consuming internet look up has now been honored with good quality ideas to go over with my pals. I would claim that many of us site visitors are undeniably fortunate to be in a great website with so many wonderful people with beneficial solutions. I feel pretty grateful to have discovered your web site and look forward to really more fun minutes reading here. Thanks a lot again for all the details.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema JavaScript
Tablet Gecko: Dieses Startup fesselt Smartphones und Tablets an eure Hand
Tablet Gecko: Dieses Startup fesselt Smartphones und Tablets an eure Hand

Das deutsche Startup Tablet Gecko hat eine Halterung entwickelt, mit der Smartphones und Tablets an der Handinnenfläche fixiert werden können. Festhalten braucht man die mobilen Geräte dadurch … » weiterlesen

Samsung zeigt ultradünnes, faltbares OLED-Display für Smartphones & Tablets
Samsung zeigt ultradünnes, faltbares OLED-Display für Smartphones & Tablets

Ein Traum: Smartphones mit großen Displays, die trotzdem locker in die Hosentasche passen. Geht es nach Samsung, ist das schon sehr bald möglich: Die Südkoreaner haben 5,7-Zoll-OLED-Displays in … » weiterlesen

Drahtlos vom Notebook, Tablet oder Smartphone auf den Fernseher: Der neue Wireless-Display-Adapter von Microsoft
Drahtlos vom Notebook, Tablet oder Smartphone auf den Fernseher: Der neue Wireless-Display-Adapter von Microsoft

Microsoft hat eine überarbeitete Version seines Wireless-Display-Adapters angekündigt. Damit lassen sich Inhalte drahtlos von Notebooks, Tablets oder Smartphones auf einen externen Monitor, … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?