Signatur
Beschreibung
Die schreibgeschützte Eigenschaft radiusY eines Touch-Objekts gibt die halbe Ausdehnung der Kontaktfläche entlang der Y-Achse der umschreibenden Ellipse zurück, und zwar in CSS-Pixeln. Zusammen mit radiusX und rotationAngle beschreibt sie Größe und Ausrichtung des Berührungspunkts.
Damit lässt sich zum Beispiel unterscheiden, ob jemand mit der Fingerkuppe oder flach mit dem Daumen tippt. Mal- und Zeichen-Apps nutzen den Wert für eine variable Pinselbreite, außerdem helfen die Radien beim Ausblenden versehentlicher Handflächen-Berührungen.
Wichtig: Die Ellipse ist um rotationAngle (in Grad, im Uhrzeigersinn) gedreht. radiusY ist deshalb nicht unbedingt die senkrechte Ausdehnung auf dem Bildschirm, sondern die zweite Halbachse der gedrehten Ellipse. Du liest den Wert über die Listen touches, targetTouches oder changedTouches eines TouchEvent aus.
Rückgabewert
1 (laut Spezifikation) oder bei manchen Geräten 0.Beispiele
Kontaktgröße beim Berühren ausgeben
const flaeche = document.querySelector('#touchflaeche');
flaeche.addEventListener('touchstart', (event) => {
for (const touch of event.changedTouches) {
console.log(
`Touch ${touch.identifier}: radiusX=${touch.radiusX.toFixed(1)}px, ` +
`radiusY=${touch.radiusY.toFixed(1)}px, Winkel=${touch.rotationAngle}°`
);
}
}, { passive: true });Kontakt-Ellipse als Overlay sichtbar machen
const zeigeEllipse = (touch) => {
const el = document.createElement('div');
el.className = 'touch-ellipse';
const breite = touch.radiusX * 2;
const hoehe = touch.radiusY * 2;
Object.assign(el.style, {
position: 'fixed',
left: `${touch.clientX - touch.radiusX}px`,
top: `${touch.clientY - touch.radiusY}px`,
width: `${breite}px`,
height: `${hoehe}px`,
borderRadius: '50%',
border: '2px solid tomato',
transform: `rotate(${touch.rotationAngle}deg)`,
pointerEvents: 'none'
});
document.body.append(el);
setTimeout(() => el.remove(), 500);
};
document.addEventListener('touchstart', (e) => {
[...e.changedTouches].forEach(zeigeEllipse);
}, { passive: true });Handflächen-Berührungen in einer Zeichen-App ignorieren
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const MAX_RADIUS = 25; // größere Kontakte gelten als Handfläche
canvas.addEventListener('touchmove', (event) => {
event.preventDefault();
const rect = canvas.getBoundingClientRect();
for (const touch of event.changedTouches) {
const radius = Math.max(touch.radiusX, touch.radiusY);
if (radius > MAX_RADIUS) continue; // Handfläche verwerfen
// Pinselbreite abhängig von der Kontaktgröße, mit Rückfallwert
const pinsel = radius > 1 ? radius : 4;
ctx.beginPath();
ctx.arc(touch.clientX - rect.left, touch.clientY - rect.top, pinsel, 0, Math.PI * 2);
ctx.fill();
}
}, { passive: false });// Wichtig · Fallstricke
- Hardwareabhängig: Viele Geräte, vor allem Desktop-Touchscreens und manche iOS-Versionen, messen die Kontaktgröße nicht. Du bekommst dann einen festen Wert (
1,0oder einen konstanten Schätzwert). Rechne deshalb immer mit einem Rückfallwert. - Gedrehte Ellipse:
radiusYgilt relativ zur Rotation ausrotationAngle. Wenn du nur die Bildschirmachsen auswertest, ohne die Drehung zu berücksichtigen, liegst du bei schräg aufgelegten Fingern daneben. - Einheit: Der Wert ist in CSS-Pixeln angegeben, nicht in Gerätepixeln. Er hängt also vom Zoom und von
devicePixelRatioab. - Schreibgeschützt: Eine Zuweisung wird stillschweigend ignoriert. Einen eigenen Wert kannst du nur beim Erzeugen über
new Touch({ radiusY: … })setzen, zum Beispiel für Tests. - Kompatibilität: Touch Events gibt es nur auf Geräten mit Touch-Unterstützung. Desktop-Firefox aktiviert sie nicht standardmäßig. Für geräteübergreifenden Code bieten sich Pointer Events an. Dort entspricht
PointerEvent.heightungefähr2 × radiusY, allerdings ohne Drehung. - preventDefault: Wenn du in
touchmovedas Scrollen verhindern willst, musst du den Listener mit{ passive: false }registrieren.