Canvas über MouseWheel skalieren funktioniert nicht

[Rolf B]

Hallo Steffen,

ich habe jetzt wenig Lust, mich tief in deinen Code einzuarbeiten, aber dies hier fällt mir auf:

• Du arbeitest viel zu viel mit globalen Variablen

• Du definierst Funktionen mit let someFunc = function(..) { ...}; - wieso? Erstens dürftest Du kein Interesse daran haben, diese Variablen zu überschreiben. Es müsste also zumindest const sein. Zum zweiten - was spricht gegen das gute alte function someFunc(...) { ... };? Das reduziert einigen Kopfschmerz, vor allem hast Du dann das function hoisting und bist nicht gezwungen, deinen Code bottom-up zu notieren. Die

• Du registrierst Events mit window.onXXXX. Das ist eigentlich veraltet, man verwendet heutzutage window.addEventListener("mousedown", function(event) { ... }) - an der Stelle ergeben anonyme Funktionen dann wieder einen Sinn.

• Du solltest in deinen Canvas-Mouseevents nicht mit clientX und clientY arbeiten, sondern mit offsetX und offsetY. Dann brauchst Du keine eigene Offset-Berechnung mehr, und die Breite der Border ist auch schon berücksichtigt. Die hast Du nämlich vergessen, weswegen die Maus bei Dir 5 Pixel daneben zielt.

• Du musst allerdings für Zeichenoperationen die aktuelle Skalierung und Translation des Canvas berücksichtigen. Denn auch clientX und clientY sind Bildschirmkoordinaten. Ohne Skalierung und Translation stimmen Bildschirm- und Canvaskoordinaten überein, aber wenn Du um 20% vergrößerst, dann sind an den Offsetkoordinaten (100,100) die Canvas-Koordinaten (83.3, 83.3). D.h. dein mathematisches Modell entspricht nicht der Wirklichkeit.

• Ich kenne keine Canvas-Funktion, die diese Operation für Dich übernimmt. Eigentlich solltest Du durch Anwendung der im Context hinterlegten Transformationsmatrix deine Mausposition in eine Canvas-Position umrechnen können, und umgekehrt. Mir fehlen im Geometrie-API aber die entsprechenden Operatoren (oder ich bin zu blöd, sie zu finden; das Geometrie-API ist relativ neu und ich habe es noch nicht benutzt). Man braucht dafür aber keine Matrixrechnerei. Ich würde Dir deshalb raten, Dir die Koeffizienten für Translation und Skalierung zu merken und damit die Position in die Canvasposition zu übersetzen.

Das ist alles nicht simpel, ich fürchte, beim Matheanteil musst Du nochmal von vorn beginnen.

Rolf