Verwendung von Pointer Events
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.
<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.
#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.
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.
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.
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.
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.
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.
document.getElementById("clear").addEventListener("click", () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
Spezifikationen
Specification |
---|
Pointer Events # pointerevent-interface |
Browser-Kompatibilität
BCD tables only load in the browser