Javascript Rubberband
Beschreibung
Um mit der Maus Bereiche zu markieren wird ein sogenanntes Rubberband (dt. Gummiband) benutzt. Die Funktionsweise ist aus Grafikprogrammen bekannt oder auch dem Windows Desktop. Wenn die Maus mit gedrückter linken Maustaste bewegt wird, wird ein rechteckiger Kasten gebildet, der den Bereich der ausgewählt werden soll markiert.
Dazu habe ich diese kleine Skript geschrieben, dass einfach in eine Seite eingebunden werden kann. Mit Hilfe von Events kann das Verhalten gesteuert werden.
Funktionsweise
Das Javascript Rubberband basiert auf ein globales Objekt Namens Rubber, da es nur ein Rubberband geben kann. Die ini()-Funktion starten es. Wenn nun die Maus gedrückt wird erscheint ein Rechteck mit einer gepunkteten Linie. Die Events Rubber.onstart, Rubber.onmove und Rubber.onend werden gefeuert, den Eventfunktionen wird ein Objekt als Parameter übergeben, dass die Position und Größe des Rubberbands hat. Geben die Funktion false zurück wird der Event unterbrochen. D.h. beim onstart Event, wird das Band nicht angezeigt beim move Event nicht vergrößert und beim end Event nicht beendet.
Verwendung
Eingebunden wird das Skript mit den üblichen script-Tag:
<script type="text/javascript" src="rubber.js"></script>
Rubber.ini()
Dann muss es initialisiert werden
Rubber.ini([EventHandler]); |
Der optionale Parameter EventHandler ist eine Funktionsreferenz auf einen EventListener, z.b. addEvent(), falls eigene Eventlistener verwendet werden müssen. Ohne diese Angabe verwendet das Skript [object].onmousedown. Der Aufruf des EventHandler erfolgt so
eventHandler(object, 'onevent', func), der erste Parameter ist das Objekt auf dem der Event stattfindet, der zweite ein String mit dem Eventnamen (inklusive on) und der dritte die Referenz auf die Funktion. Will man also z.b. die addEventListener() Funktion des Firefox einbinden müßte der Aufruf so aussehen:
Rubber.ini( function(obj, evt, func) { obj.addEventListener(evt.substring(2), func, false); return false; } ); |
Events
Das Rubberband feuert drei Events, alle Events haben ein Objekt als Parameter, das die Position und die Größe des Rubberbands definieren.
- onstart(rect)
- Wird gefeuert, wenn die Maustaste gedrückt wird.
- onmove(rect)
- Wird beim ziehen gefeuert, in
rectzeigt auf das Rechteck vor der Berechnung des Mausposition, d.h. wird hierfalsezurückgegeben, wird das Rubberband nicht mehr vergrößert. - onend(rect)
- Wird gefeuert, wenn die Maustaste losgelassen wurde.
Beispiel
Ein typisches Beispiel ist ein Bild bei dem ein Auschnitt markiert werden soll.
| Orginal: | Auschnitt auf die Orginalgröße vergrößert: | onmove Event: |
|
|
Rubber.onmove = function(r) {
r.width = ;
r.height = ;
r.top = ;
r.left = ;
}
|
Download
ähnliche Artikel
- 24. Januar 2009 -- Rubberband 2 (1)
Ich habe das Rubberband überarbeitet und hier ein...
- 18. November 2011 -- LED Editor (1)
LED Scroller Chareditor Dieses Skript dient zum...
- 13. Mai 2009 -- String Erweiterungen (5)
Eine der Eigenschaften von Javascript, die sie von...
5035 mal gelesen.
9 Kommentare
direkt zum Formular »
Seiten:
16. November 2008: 20:31
Hallo,
tolles Beispiel!
Einziges Manko ist dass nach dem Schneiden das Bild verzerrt ist wenn das Seitenverhältnis sich ändert. Kann man das ändern so dass das Bild sich so ändert dass es die Maße des Ausschnitts hat?
Gruß Andreas
16. November 2008: 23:19
Eine tolle Funktion, aber nicht ganz fertig.
Zum Beispiel wird beim Ziehen des Rahmens r.top und r.left nicht verändert.
Ich habe einer vergleicgbare Funktion mal in einem Kontaktforum gesehen, da konnte man sein Portrait zurechtschneiden.
MfG Kalle
17. November 2008: 0:55
Wieso sollte beim ziehen die Position des rubberbandes geändert werden?
@Andreas: Das Beispiel zeigt nur die Funkktionalität und die Events des rubberband, es muss dann entsprechend den eigenen Bedürfnissen angepaßt werden, in der onend Eventfunktion.
17. November 2008: 17:30
Hallo,
fürchte es ist nicht möglich,
ich habe schon mehrere Stunden damit zugebracht das herauszufinden.
schade.
Andreas
17. November 2008: 17:53
Die Frage dabei ist, was möchtest? Das Beispielskript brechnet ja den zoom Faktor anhand der Größe des Auschnitts. Ich hab mal ein Beispiel online gestellt, wo du den Zoomfaktor verändern kannst.
18. November 2008: 9:40
Ja super genau so meinte ich das.
Danke.
Gruß Andreas
7. September 2010: 14:20
[…] habe das Rubberband überarbeitet und hier ein Beispiel, wie aus einem vorhandenen Bild damit ein Ausschnitt markiert […]
13. Mai 2011: 6:29
Hi,
tausend Dank für dieses aufgeräumte Script. Das hat mir viel gebracht, und vor allem viel Arbeit/Fummelei gespart! Großen Respekt… Eine kleine Schönheitsanmerkung: Es heißt original, nicht orginal ;-) Aber das Script funktioniert natürlich auch mit Rechtschreibfehler im Variablennamen. VIELEN VIELEN DANK!
Sebastian
13. Mai 2011: 7:32
Freut mich.
Und danke für den Hinweis auf das Original, dass war mir gar nicht bewußt. Man lernt nie aus.