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 Sie pointer events und das HTML-<canvas>-Element verwenden, um eine Multi-Touch-fähige Zeichenanwendung zu erstellen. Dieses Beispiel basiert auf dem im Touch Events Überblick, verwendet jedoch das pointer 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 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 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. Die colors 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 position
const ongoingTouches = new Map();
const colors = ["red", "green", "blue"];
Die Funktion handleStart hört auf das pointerdown-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 Funktion handleEnd hört auf das pointerup-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 Funktion handleCancel hört auf das pointercancel-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 Funktion handleMove hört auf das pointermove-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 |
Browser-Kompatibilität
Loading…