Touch: radiusX-Eigenschaft

Eine Zahl.

Dieses Beispiel veranschaulicht die Nutzung der Touch.radiusX, Touch.radiusX und Touch.rotationAngle-Eigenschaften des Touch-Interfaces. Die Touch.radiusX-Eigenschaft ist der Radius der Ellipse, die das Kontaktgebiet (z.B. Finger, Stylus) entlang der Achse am genauesten umschreibt, die durch den Berührungspunkt-[Touch.rotationAngle](/de/docs/Web/API/Touch/rotationAngle) angezeigt wird. Ebenso ist die Touch.radiusY-Eigenschaft der Radius der Ellipse, die das Kontaktgebiet (z.B. Finger, Stylus) entlang der Achse am genauesten umschreibt, die senkrecht zu dem durch Touch.rotationAngle angezeigten liegt. Der Touch.rotationAngle ist der Winkel (in Grad), um den die durch radiusX und radiusY beschriebene Ellipse im Uhrzeigersinn um ihren Mittelpunkt gedreht ist.

Der folgende einfache Codeausschnitt registriert einen einzigen Handler für die touchstart, touchmove und touchend Ereignisse. Wenn das src-Element berührt wird, werden die Breite und Höhe des Elements basierend auf den radiusX- und radiusY-Werten des Berührungspunkts berechnet und das Element wird dann unter Verwendung des rotationAngle des Berührungspunkts gedreht.

<div id="src">…</div>

const src = document.getElementById("src");

src.addEventListener("touchstart", rotate);
src.addEventListener("touchmove", rotate);
src.addEventListener("touchend", rotate);

function rotate(e) {
  const touch = e.changedTouches.item(0);

  // Turn off default event handling
  e.preventDefault();

  // Rotate element 'src'.
  src.style.width = `${touch.radiusX * 2}px`;
  src.style.height = `${touch.radiusY * 2}px`;
  src.style.transform = `rotate(${touch.rotationAngle}deg)`;
}