Javascript ist Toll!

Rubberband 2

Ich habe das Rubberband überarbeitet und hier ein Beispiel, wie aus einem vorhandenen Bild damit ein Ausschnitt markiert werden kann. Das Rubber-Objekt ist nach Außen weitestgehend gleich geblieben, intern sind aber neue Dinge hinzugekommen. Eine Funktion createBox(), erzeugt das DIV das für das Rubberband gebraucht wird, mit der entsprechenden Funktionalität und die Klasse Rect() bietet Methoden an, um Berechnungen mit dem Rechteck durch zu führen

Methoden

.ini([Eventhandler])

Initialisierung des Rubberbands.

Der Wert von Eventhandler, muss eine Referenz auf eine Funktion sein, die einen Event registrieren kann. Die Parameter die der Funktion übergeben werden sind Object, Eventname, Funktion

Object ist das Objekt, das den Event empfängt
Eventname der Name des Events ohne on
Funktion ist eine Referenz auf die Funktion die ausgeführt werden soll.

Da das Rubberband Events auf das Dokument registriert, kann es leicht zu Konflikten mit anderen Skripten kommen. Daher ist es ratsam hier eine Funktion zu übergeben, die z.b. addEventListener() verwendet oder meine addEvent() Funktion.

Beispiel (funktioniert nicht im IE)

Rubber.ini( function(obj, evt, func) { obj.addEventListener(evt, func, false); return false; } );

Rubber.ini( function(obj, evt, func) { obj.addEventListener(evt, func, false); return false; } );

.bound( Rect | top, left, width, height)

Diese Funktion begrenzt den Bereich in dem das Rubberband aktiv ist. Das Objekt Rect muss lediglich die vier Eigenschaften left, top, width, height haben.

.getSize()

gibt die Größe des RB zurück

.getPos()

gibt die Position des RB zurück

Events

Das RB feuert folgende Events:

• onstart
• onmove
• onend

Attribute

Mit folgenden statischen Attribute kann das Aussehen des Rubberband verändert werden. Der Zugriff erfolgt über Rubberband.eigenschaft = wert

• .borderSize (default: 1px)
• .borderColor (default: #ff0)
• .borderStyle (default: dashed)

Beispiel

Ein "Gummiband" um ein Bildausschnitt zu beschneiden.
Das Bild

Download

Code: rubber.js