Komponenten gesucht: Karte verschieben, Einstellen eines Winkels

[Camping_RIDER]

Aloha ;)

Gesucht werden jetzt JavaScript-basierte (kein Flash!) Komponenten, mit denen sich folgende Funktionalitäten ohne großen Overhead und Cross-Browser-kompabtibel bis einschließlich IE 8 (der muss leider unbedingt auch noch unterstützt werden bei dem Projekt) ergänzen lassen.

Komplexe Anforderung. Das wird dich eine Weile bebeschäftigen. Deshalb kann ich dir hier auch keine fertige Lösung bieten, aber auf jeden Fall Anregungen, die dich in die richtige Richtung weisen.

Und: mit dem IE8 wirst du sicher Schwierigkeiten bekommen. Dazu später mehr.

1. Verschieben der Grafik im Container (die gesamte Grafik kann grundsätzlich auch größer sein als der Ausschnitts-Container, weswegen in solchen Fällen eben immer nur ein Ausschnitt der Grafik gezeigt werden kann, vgl. Google Maps) durch Bewegen der gedrückten Maus.
   (Was man recht zahlreich findet, sind Komponenten, wo ein Zoom beim reinen Überfahren eines Grafik-Containers mit der Maus stattfindet, wozu allerdings die komplette Grafik im Container gezeigt werden muss. Das ist hier nicht anwendbar.)

Das geht noch. Als allererstes: Der Container sollte mit overflow:hidden formatiert sein. Außerdem sollte das img-Element mit position:relative formatiert sein.

Der Eventhandler, den du hier zunächst brauchst, ist onmousedown, bezogen auf das img-Element. Bei onmousedown wird im Eventhandler [link:http://www.sitepoint.com/javascript-this-event-handlers/@title=this].dragging = true; gesetzt (eine benutzerdrfinierte Variable, und bei onmouseup dasselbe auf false. Weiterhin notierst du bei onmouesedown die aktuelle Mausposition (die du aus dem Eventobjekt mit den Eigenschaften screenX und screenY bzw. dem IE-Pendant erhältst) in this.startX bzw. this.startY...

Du brauchst dann einen weiteren Eventhandler mit onmousemove auf dem img-Element. Falls this.dragging true ist: Über dessen Eventobjekt und this.startX/Y ermittelst du die Differenz an x- und y-Werten, die die Maus zurückgelegt hat. Diese addierst du auf this.style.top und this.style.left ...

Voila, fertig.

Das geht alles auch im IE8 - manchmal brauchst du dafür vllt. ein einfaches Polyfill (siehe u.a. obigen Link bei this), aber grundsätzlich wirds funktionieren.

2. Komponente zum Einstellen eines Winkels: Hier sollte sich - grob beschrieben - in etwa ein kleinerer Kreis auf einem Kreisrand befinden. Über Drehen des kleineren Kreises auf dem Kreisrand soll der Winkel eingestellt werden können. Hat den Vorteil, dass sich die Bedienart intuitiv aufdrängt. Vielleicht gibt es einen speziellen Ausdruck für die Sorte von Winkel-Einstell-Komponente, womit man dann auch leichter was finden würde, den ich aber nicht kenne.

Das ist ein Problem. Nicht nur, weil es etwas komplizierter zu machen wäre, als deine erste Frage - das wäre kein Problem.

Das Problem kommt auf, wenn du Support für IE8 forderst. Denn der IE8 kennt keine Möglichkeit, Bilder zu drehen. (Außer über Transformationsmatrizen, eine Lösung Marke IE-Eigenbau - damit können wir's als Fallback versuchen - der Weg wird aber schmerzhaft) Deshalb hier zunächst die Frage: Wieso der IE8-Support? Für alle noch unterstützten Windowsversionen ist mindestens der IE9 erhältlich...

Ich gehe gern diesen Weg des Schmerzes mit dir... Wenn wirklich nötig. Ab IE9 wirds ungleich einfacher weil standardkonform...

(Wenn es so was gar nicht fertig gibt, wär die Ausweichlösung, so was wie einen Slider zu verwenden.)

Chrm. Lies die Überschrift. SelfHTML. Fertige Lösungen wirst du hier (für gewöhnlich) überhaupt nicht finden.

Vielleicht hast du Glück und einer der jQuery-Anhänger kennt noch eine evtl. unaufwändigere Lösung mit jQuery. Wenn dem nicht so ist - mit Vanilla-Javascript helfe ich gerne weiter.

Grüße,

RIDER