Javascript ist Toll!

24. January 2009 - 14:21

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;
	}
);
.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:

Attribute

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

Beispiel

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

js/rubber2_beispiel.js
 

Download

rubber.js

ähnliche Artikel

Comments (1)
1083 mal gelesen.

Ein Kommentar

Leave a comment »

Seiten:

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

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