Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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 Juli 2020.
* Some parts of this feature may have varying levels of support.
Dieser Leitfaden demonstriert, wie Siepointer events und das HTML-<canvas>-Element verwenden, um eine Multi-Touch-fähige Zeichenanwendung zu erstellen. Dieses Beispiel basiert auf dem imTouch Events Überblick, verwendet jedoch daspointer events Eingabemodell. Ein weiterer Unterschied besteht darin, dass, da Pointer Events geräteunabhängig sind, die Anwendung koordinatenbasierte Eingaben von einer Maus, einem Stift oder einer Fingerspitze 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 eines Benutzers (oder Mauspad) mit dem physischen Bildschirm sein.
- Berührungspunkt
Ein Berührungspunkt 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 sein, um einen einzelnen Punkt auf der Oberfläche anzugeben.
Beispiele
Hinweis:Der untenstehende Text verwendet den Begriff "Finger", wenn der Kontakt mit der Oberfläche beschrieben wird, aber 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 einzelnen<canvas>-Element. Kurven werden als Reaktion auf die Berührungsgesten des Benutzers gezeichnet. Ein Button ist ebenfalls enthalten, um die Leinwand zu leeren.
<canvas width="600" height="600"> Your browser does not support the canvas element.</canvas><button>Clear canvas</button>CSS
Dietouch-action Eigenschaft ist aufnone gesetzt, um zu verhindern, dass der Browser sein standardmäßiges Berührungsverhalten auf die Anwendung anwendet.
#canvas { border: solid black 1px; touch-action: none; display: block;}JavaScript
Wir werden alle laufenden Berührungen nachverfolgen und Linien für jede von ihnen zeichnen. Diecolors werden verwendet, um zwischen verschiedenen Fingern zu unterscheiden.
const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// Mapping from the pointerId to the current finger positionconst ongoingTouches = new Map();const colors = ["red", "green", "blue"];Die FunktionhandleStart hört auf daspointerdown-Ereignis und zeichnet einen Kreis am Anfang der Berührung.
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);Die FunktionhandleEnd hört auf daspointerup-Ereignis und zeichnet ein Quadrat am Ende der Berührung.
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);Die FunktionhandleCancel hört auf daspointercancel-Ereignis und stoppt die Nachverfolgung der Berührung.
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);Die FunktionhandleMove hört auf daspointermove-Ereignis und zeichnet eine Linie zwischen dem Anfang und Ende der Berührung.
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);Schließlich fügen Sie eine Löschfunktionalität hinzu.
document.getElementById("clear").addEventListener("click", () => { ctx.clearRect(0, 0, canvas.width, canvas.height);});Spezifikationen
| Specification |
|---|
| Pointer Events # pointerevent-interface |