Canvas mit der Maus schieben und zoomen

Das blanke Rad zoomt jetzt, die linke Maustaste zieht die Flaeche. Eine
gewoehnliche PC-Maus kam vorher nicht an den Ausschnitt heran: Zoomen ging
nur mit Strg/Cmd, Schieben nur ueber Leertaste oder mittlere Taste.

Die Radschritte laufen exponentiell ueber deltaY statt in festen Spruengen,
mit Umrechnung der deltaMode-Einheiten -- ohne die zoomt Firefox pro Rastung
um ein Vielfaches weniger als Chrome. Waagerechtes Wischen und Shift+Rad
schieben weiter, damit sich ein Trackpad nicht wie eine Zoomwippe anfuehlt.
Im Bearbeiten-Modus behaelt das Element unter dem Zeiger die linke Taste.
Nach einem echten Zug wird der Klick geschluckt, sonst sprang die Auswahl
auf die Slide, ueber der die Maus zufaellig losliess.

Dabei zwei aeltere Fehler mitgenommen:

setZoom rechnete den Zeigerpunkt per Dreisatz auf scrollLeft hoch und
uebersah das Polster der Flaeche. Der Inhalt lief pro Schritt um 60 x
(Faktor-1) px weg. Der Punkt wird jetzt gemessen statt gerechnet.

Der Bearbeiten-Zug leitete seinen Massstab aus der Border-Box von .strip ab.
Die misst Breite mal Massstab hoch zwei, weil .strip ein Flex-Kind der schon
skalierten Huelle ist -- geteilt wurde also durch das Quadrat, das Element
wanderte bei eingepasster Ansicht um das 5,6-fache der Mausbewegung.

Geprueft mit echten Rad- und Zieh-Ereignissen ueber das DevTools-Protokoll,
15 Pruefungen gegen beide Dateien.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
dejanandClaude Opus 5 committed 2026-08-06 17:58:04 +02:00
1 parent 1359c6eba8
commit 94e1b9a84a
3 files changed
+148 -34

No files matched your search

+14
View File
@@ -59,6 +59,20 @@ aus dem Browser einmalig hineingeschrieben.
Im Bearbeiten-Modus lassen sich Elemente ziehen, mit den Pfeiltasten
pixelweise schieben (`⇧` = 10 px) und über `A−`/`A+` in der Größe ändern.
### Auf der Fläche bewegen
| Maus | Wirkung |
|---|---|
| Ziehen | Ausschnitt schieben |
| Rad | Zoomen, auf den Zeiger zu |
| `⇧` + Rad | Waagerecht schieben |
| Leertaste-Ziehen, mittlere Taste | Schieben, auch im Bearbeiten-Modus |
Ein gewöhnliches Mausrad genügt, ohne Zusatztaste. Im Bearbeiten-Modus zieht
die linke Taste das Element unter dem Zeiger — die Fläche schiebt man dort mit
gedrückter Leertaste oder der mittleren Taste. `Fit` unten rechts setzt den
Maßstab zurück.
## Aufbau
```