Javascript ist Toll!

24. Januar 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

Download

Code: rubber.js

ähnliche Artikel

Comments (1)
7451 mal gelesen.

Ein Kommentar

Leave a comment »

Seiten:

1. Kommentar 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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot
marketing-bankruptcy
marketing-bankruptcy
marketing-bankruptcy
marketing-bankruptcy