Verwendung von Pointer Events

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Some parts of this feature may have varying levels of support.

Dieser Leitfaden zeigt, wie man Pointer Events und das HTML-<canvas>-Element verwendet, um eine Multi-Touch-fähige Zeichenanwendung zu erstellen. Dieses Beispiel basiert auf dem in der Übersicht zu Touch Events, verwendet jedoch das Eingabe-Ereignismodell der Pointer Events. Ein weiterer Unterschied ist, dass die Anwendung aufgrund der Geräteunabhängigkeit von Pointer Events koordinatenbasierte Eingaben von einer Maus, einem Stift oder einem Finger mit demselben Code akzeptiert.

Diese Anwendung funktioniert nur in einem Browser, der Pointer Events unterstützt.

Definitionen

Oberfläche

Eine berührungsempfindliche Oberfläche. Dies kann ein Trackpad, ein Touchscreen oder sogar eine virtuelle Abbildung der Schreibtischoberfläche (oder des Mauspads) des Benutzers mit dem physischen Bildschirm sein.

Berührungspunkt

Ein Kontaktpunkt mit der Oberfläche. Dies kann ein Finger (oder Ellbogen, Ohr, Nase, was auch immer, aber typischerweise ein Finger), ein Stift, eine Maus oder eine andere Methode zur Angabe eines einzelnen Punkts auf der Oberfläche sein.

Beispiele

Hinweis: Der untenstehende Text verwendet den Begriff "Finger", um den Kontakt mit der Oberfläche zu beschreiben, es könnte natürlich auch ein Stift, eine Maus oder eine andere Methode sein, um auf einen Ort zu zeigen.

Zeichenanwendung

HTML

Das HTML besteht aus einem einzigen <canvas>-Element. Kurven werden als Reaktion auf die Berührungsgesten des Benutzers gezeichnet. Ein Button ist ebenfalls enthalten, um die Leinwand zu löschen.

html
<canvas id="canvas" width="600" height="600">
  Your browser does not support the canvas element.
</canvas>
<button id="clear">Clear canvas</button>

CSS

Die touch-action-Eigenschaft ist auf none gesetzt, um zu verhindern, dass der Browser seine standardmäßige Touch-Verhalten auf die Anwendung anwendet.

css
#canvas {
  border: solid black 1px;
  touch-action: none;
  display: block;
}

JavaScript

Wir werden alle laufenden Berührungen verfolgen und Linien für jede von ihnen zeichnen. Die colors werden verwendet, um zwischen verschiedenen Fingern zu unterscheiden.

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Mapping from the pointerId to the current finger position
const ongoingTouches = new Map();
const colors = ["red", "green", "blue"];

Die Funktion handleStart hört auf das pointerdown-Ereignis und zeichnet einen Kreis am Start der Berührung.

js
function handleStart(event) {
  const touch = {
    pageX: event.pageX,
    pageY: event.pageY,
    color: colors[ongoingTouches.size % colors.length],
  };
  ongoingTouches.set(event.pointerId, touch);

  ctx.beginPath();
  ctx.arc(touch.pageX, touch.pageY, 4, 0, 2 * Math.PI, false);
  ctx.fillStyle = touch.color;
  ctx.fill();
}

canvas.addEventListener("pointerdown", handleStart, false);

Die Funktion handleEnd hört auf das pointerup-Ereignis und zeichnet ein Quadrat am Ende der Berührung.

js
function handleEnd(event) {
  const touch = ongoingTouches.get(event.pointerId);

  if (!touch) {
    console.error(`End: Could not find touch ${event.pointerId}`);
    return;
  }

  ctx.lineWidth = 4;
  ctx.fillStyle = touch.color;
  ctx.beginPath();
  ctx.moveTo(touch.pageX, touch.pageY);
  ctx.lineTo(event.pageX, event.pageY);
  ctx.fillRect(event.pageX - 4, event.pageY - 4, 8, 8);
  ongoingTouches.delete(event.pointerId);
}

canvas.addEventListener("pointerup", handleEnd, false);

Die Funktion handleCancel hört auf das pointercancel-Ereignis und stoppt die Verfolgung der Berührung.

js
function handleCancel(event) {
  const touch = ongoingTouches.get(event.pointerId);

  if (!touch) {
    console.error(`Cancel: Could not find touch ${event.pointerId}`);
    return;
  }

  ongoingTouches.delete(event.pointerId);
}

canvas.addEventListener("pointercancel", handleCancel, false);

Die Funktion handleMove hört auf das pointermove-Ereignis und zeichnet eine Linie zwischen dem Start und Ende der Berührung.

js
function handleMove(event) {
  const touch = ongoingTouches.get(event.pointerId);

  // Event was not started
  if (!touch) {
    return;
  }

  ctx.beginPath();
  ctx.moveTo(touch.pageX, touch.pageY);
  ctx.lineTo(event.pageX, event.pageY);
  ctx.lineWidth = 4;
  ctx.strokeStyle = touch.color;
  ctx.stroke();

  const newTouch = {
    pageX: event.pageX,
    pageY: event.pageY,
    color: touch.color,
  };

  ongoingTouches.set(event.pointerId, newTouch);
}

canvas.addEventListener("pointermove", handleMove, false);

Schließlich fügen Sie eine Löschfunktion hinzu.

js
document.getElementById("clear").addEventListener("click", () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
});

Spezifikationen

Specification
Pointer Events
# pointerevent-interface

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
PointerEvent
PointerEvent() constructor
options.altitudeAngle parameter
options.azimuthAngle parameter
altitudeAngle
azimuthAngle
getCoalescedEvents
getPredictedEvents
height
isPrimary
persistentDeviceId
Experimental
pointerId
pointerType
Fractional coordinates for mouse.
pressure
tangentialPressure
tiltX
tiltY
twist
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

Siehe auch