Javascript ist Toll!

6. June 2008 - 12:46

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 rect zeigt auf das Rechteck vor der Berechnung des Mausposition, d.h. wird hier false zurü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 = ;
}
js/rubber_beispiel.js
 

Download

rubber.js

ähnliche Artikel

  • 24. January 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. May 2009 -- String Erweiterungen (5)

    Eine der Eigenschaften von Javascript, die sie von...

Comments (9)
422 mal gelesen.

9 Kommentare

Leave a comment »

Seiten:

1. Comment von: Andreas
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

2. Comment von: Kalle
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

3. Comment von: Struppi
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.

4. Comment von: Andreas
17. November 2008: 17:30

Hallo,
fürchte es ist nicht möglich,
ich habe schon mehrere Stunden damit zugebracht das herauszufinden.

schade.
Andreas

5. Comment von: Struppi
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.

6. Comment von: Andreas
18. November 2008: 9:40

Ja super genau so meinte ich das.
Danke.

Gruß Andreas

7. Pingback von: Rubberband 2 [Javascript ist Toll!]
7. September 2010: 14:20

[…] habe das Rubberband überarbeitet und hier ein Beispiel, wie aus einem vorhandenen Bild damit ein Ausschnitt markiert […]

8. Comment von: Sebastian
13. May 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

9. Comment von: Struppi
13. May 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.

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful