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)

javascript

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

window.onload = function() {

	Rubber.ini(addEvent);

	var onmove = null;

	var orginal = document.getElementById('bild');

	var p = getPos(orginal);

	// Eine Kopie des Bildes anlegen 

	// und daneben platzieren

	var copy = orginal.cloneNode(true);

	var container = document.createElement('div');

	container.style.position = 'absolute';

	container.style.display = 'inline';

	container.style.width = orginal.offsetWidth + 'px';

	container.style.height = orginal.offsetHeight + 'px';

	container.style.overflow = 'hidden';

	copy.style.position = 'absolute';

	copy.style.top = '50%';

	copy.style.left = '50%';

	copy.style.display = 'none';

	container.appendChild(copy);

	orginal.parentNode.appendChild(container);

	// Das Rubberband soll nur auf dem Bild aktiv sein

	Rubber.bound(

	new Rect(p.top, p.left, orginal.height, orginal.width )

	);

    // onmouseup

	// Den Ausschnitt berechnen und anzeigen

	Rubber.onend = function(r) {

		var o = getPos(orginal);

		container.firstChild.style.position = 'absolute';

		container.firstChild.style.display = '';

		// Die Position der Kopie im Container berechnen

		var top = r.top - o.top;

		var left =  r.left - o.left;

		container.firstChild.style.top = -(r.top - o.top)  + 'px';

		container.firstChild.style.left = -(r.left - o.left) + 'px';

		// Nur den Auschnitt anzeigen

		container.style.width =  r.width + 'px';

		container.style.height =  r.height + 'px';

		// Den Container zentriert neben dem Orginal anzeigen

		left = o.left + o.width + o.width/2 - r.width/2;

		top = o.top + o.height/2 - r.height/2;

		container.style.top = top  + 'px';

		container.style.left = left + 'px';

		return true;

    }

}

// Hilfsfunktion

var getPos = function(obj) {

	var top = 0;

	var left = 0;

	var o = obj;

	do {

		top += parseInt(o.offsetTop);

		left += parseInt(o.offsetLeft);

		o = o.offsetParent;

	} while(o);

	return { top: top, left: left, width:obj.offsetWidth, height:obj.offsetHeight};

};

Download

rubber.js