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, FunktionObject
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; } );
- .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
ähnliche Artikel
- 29. April 2009 -- Online Molmassen Rechner (29)
Ein kleines Javascript aus der Welt der Chemie. Der...
- 12. Februar 2009 -- LED Laufschrift mit Javascript (0)
Es gibt eine neue Version.10.2.2013 Seit dem 18.11.2011...
- 29. September 2008 -- aufgleitende Javascript Popups (1)
Das folgende Skript öffnet ein HTML Element mit einer...
7589 mal gelesen.
Ein Kommentar
Leave a comment »
Seiten:
22. April 2013: 19:18
Hi,
super Sache. Genau das habe ich gesucht. Und der erste Googletreffer gleich ein Erfolg. Werde das morgen sofort mal ausprobieren.
Grüße Alex
Das Neuste
Kategorien
am meisten gelesen
zuletzt kommentiert
Archiv
Wortwolke
linux Drag&Drop String prototype LED Datenschutz Javascript Laufschrift Firefox Tool Bugs Privatsphäre Animation about:config google Wordpress LED Scroller OOP Browser überwachung