Image Frame - Bild bewegen

D

demo1987

Mitglied
Hallo,

ich weiß nicht ob ich den richtigen Titel benutzt habe deshalb erkläre ich es besser kurz.

Ich arbeite an einem Skript bei dem man mittels HTMl canvas und viel JS Objekte auf einem Bild positionieren kann. Dabei habe ich ein Problem.

Es wird ein Bild eingebunden (kartenausschnitt als SVG) auf dem ich dann arbeiten kann.

Dieser Ausschnitt ist aber auf der Bildfläche so verteilt das er mit Bildlaufleisten bewegt werden muss.

Wie kann ich es einstellen das dieses Bild mit der Maus bewegt werden kann?

So wie man es bei Google Maps kennt, ich drücke auf den Punkt auf der Map und ziehe ihn in eine Richtung und das Bild bewegt sich mit, so das ich die Bildlaufleisten nicht mehr habe sondern eine Art Frame indem ich das Bild bewegen kann?

Ich hoffe man versteht was ich meine und ich hoffe das ich das richtige Forum gewählt habe.

ByTheWay: Ich habe mehrere Fragen mit diesem Skript und könnte Hilfe gebrauchen, also wenn jemand Interesse hat gegen ene kleine Entlohnung mich dabei zu ünterstützen wäre ich daran sehr interessiert.
 
Vielen Dank für das Beispiel. Das ist nur leider nicht das was ich suche.

Ich weiß auch garnicht so recht wie ich nach solchem Code suchen soll, es gibt so viele JS Frameworks wie jQuery, da muss es doch vorgefertigte Funktionen für solche Anforderungen geben :-/

Aber trotzdem vielen Dank für deine Mühe!
 
Also so wie ich dich verstanden habe, möchtest du einen Marker haben, der folgendes bewirkt: wenn er mit der Maus an den Rand deiner Karte gezogen wird, soll sich die Karte in diese Richtung bewegen. Oder verstehe ich das falsch?
 
Ja, genau das gleiche was bei Google Maps möglich ist.

Ich klicke in das Kartenfenster, halte die linke Maustatste gedrückt und ziehe bzw. verschiebe damit den Kartenausschnitt.

Mein Kartenfenster ist im Moment ein Bild in einer Art Frame, aber das ist auch nicht wichtig.

Ich möchte eher wissen wie ich ein großes Bild (ob als PNG oder SVG das ist egal - in einem Beispielformat von 1920x1080px) einbinde sodass ich den Ausschnitt verschieben und in dem Zusammenhang vielleicht auch zoomen kann.
 
Naja, dann ist mein Ansatz doch gar nicht so falsch. Letztendlich lautet deine Lösung wie folgt: du brauchst eine Box, in welcher du überwachst, ob gerade ein Marker per Drag'n'Drop bewegt wird. Wenn dies der Fall ist, überwachst du, ob er sich am Rand deiner Box befindet. Wenn ja, dann sorge dafür, dass die Karte (wie in meinem obrigen Beispiel), die sich innerhalb der Box befindet, bewegt wird. Sobald das Drag'n'Drop beendet ist, hört dies auf. Das kannst du wunderbar mit setInterval lösen (oder bei jQuery auch mit animate oder ähnlichem), wobei der Intervall startet, wenn du den Rand mit deinem Marker berührst, und der Intervall beendet wird, wenn du den Marker fallen lässt oder den Rand nicht mehr berührst.
 
Der Ansatz ist perfekt, keine Frage.

Nur wie bekomem ich das Event jetzt so in dass das Bild nicht durch die Mausbewegung sondern dirch ein links Klick und halten der Maustatse bewegt wird?

Ich bin was Javascript angeht im Moment noch in der Lernphase also bite nicht über dumme fragen wundern.

Deshalb suche ich auch jemanden der mir helfen und mir das was da passiert vielleicht auch erklären kann.

Ich wälze zur Zeit schon Bücher und Lernvideos ;-)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück