Javascript ist Toll!

Javascript Rubberband

Beschreibung

Um mit der Maus Bereiche zu markieren wird ein sogenanntes Rubberband (dt. Gummiband) benutzt. Die Funktionsweise ist aus Grafikprogrammen bekannt oder auch dem Windows Desktop. Wenn die Maus mit gedrückter linken Maustaste bewegt wird, wird ein rechteckiger Kasten gebildet, der den Bereich der ausgewählt werden soll markiert.

Dazu habe ich diese kleine Skript geschrieben, dass einfach in eine Seite eingebunden werden kann. Mit Hilfe von Events kann das Verhalten gesteuert werden.

Funktionsweise

Das Javascript Rubberband basiert auf ein globales Objekt Namens Rubber, da es nur ein Rubberband geben kann. Die ini()-Funktion starten es. Wenn nun die Maus gedrückt wird erscheint ein Rechteck mit einer gepunkteten Linie. Die Events Rubber.onstart, Rubber.onmove und Rubber.onend werden gefeuert, den Eventfunktionen wird ein Objekt als Parameter übergeben, dass die Position und Größe des Rubberbands hat. Geben die Funktion false zurück wird der Event unterbrochen. D.h. beim onstart Event, wird das Band nicht angezeigt beim move Event nicht vergrößert und beim end Event nicht beendet.

Verwendung

Eingebunden wird das Skript mit den üblichen script-Tag:

<script type="text/javascript" src="rubber.js"></script>

Rubber.ini()

Dann muss es initialisiert werden

Rubber.ini([EventHandler]);

Der optionale Parameter EventHandler ist eine Funktionsreferenz auf einen EventListener, z.b. addEvent(), falls eigene Eventlistener verwendet werden müssen. Ohne diese Angabe verwendet das Skript [object].onmousedown. Der Aufruf des EventHandler erfolgt so eventHandler(object, 'onevent', func), der erste Parameter ist das Objekt auf dem der Event stattfindet, der zweite ein String mit dem Eventnamen (inklusive on) und der dritte die Referenz auf die Funktion. Will man also z.b. die addEventListener() Funktion des Firefox einbinden müßte der Aufruf so aussehen:

Rubber.ini( function(obj, evt, func) {

	obj.addEventListener(evt.substring(2), func, false); 

	return false;

	}

);

Events

Das Rubberband feuert drei Events, alle Events haben ein Objekt als Parameter, das die Position und die Größe des Rubberbands definieren.

onstart(rect)

Wird gefeuert, wenn die Maustaste gedrückt wird.

onmove(rect)

Wird beim ziehen gefeuert, in rect zeigt auf das Rechteck vor der Berechnung des Mausposition, d.h. wird hier false zurückgegeben, wird das Rubberband nicht mehr vergrößert.

onend(rect)

Wird gefeuert, wenn die Maustaste losgelassen wurde.

Beispiel

Ein typisches Beispiel ist ein Bild bei dem ein Auschnitt markiert werden soll.

Orginal:	Auschnitt auf die Orginalgröße vergrößert:	onmove Event:
		Rubber.onmove = function(r) { r.width = ; r.height = ; r.top = ; r.left = ; }

window.onload = function() {

	Rubber.ini();

	var info = document.getElementById('info');

	var onmove = document.getElementById('onmove');

	Rubber.onstart = function(r) {

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

		var p = getPos(orginal);

		// Nur der Bereich des Bildes kann markiert werden.

		return (r.top >= p.top && r.left >= p.left 

		&& (r.width + r.left) <= (orginal.width + p.left)

		&& (r.height + r.top) <= (orginal.height + p.top)

		);

	}

	Rubber.onmove = function(r){

		var s = this.getSize();

		var p = this.getPos();

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

		var p = getPos(orginal);

		if(onmove) {

		var out = onmove.getElementsByTagName('span');

		out[0].innerHTML = s.width;

		out[1].innerHTML = s.height;

		out[2].innerHTML = p.top;

		out[3].innerHTML = p.left;

		}

		// Nur der Bereich des bildes

		return (r.top >= p.top && r.left >= p.left 

		&& (r.width + r.left) <= (orginal.width + p.left)

		&& (r.height + r.top) <= (orginal.height + p.top)

		);

    }

    Rubber.onend = function() {

		/*

		Hier wird der Auschnitt berechnet, der markiert wurde

		und in einem DIV mit der Größe des Orginalbildes angezeigt

		d.h. es kann zu Verzerrungen kommen.

		*/

		var s = this.getSize();

		var p = this.getPos();

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

		var zoom = document.getElementById('zoom');

		var zoom_faktor_x = parseInt( orginal.width / s.width * 100) / 100;

		var zoom_faktor_y = parseInt( orginal.height / s.height * 100) / 100;

		// Die Größe des Bildes

		zoom.firstChild.width = parseInt( orginal.width * zoom_faktor_x) ;

		zoom.firstChild.height = parseInt( orginal.height * zoom_faktor_y) ;

		// Die Position des Bildes

		var top = p.top - getPos(orginal).top;

		var left = p.left -  getPos( orginal).left;

		zoom.firstChild.style.top = -(top * zoom_faktor_y) + 'px';

		zoom.firstChild.style.left = -(left* zoom_faktor_x) + 'px';

		zoom.firstChild.style.display = 'inline';

		if(!info) return true;

		info.innerHTML = '<pre><small>'

		+ 'Position im Bild :<b>' + top + 'px</b> x <b>' + left + 'px</b> (oben x links)<br>'

		+ 'Größe            :<b>' +  s.width  + 'px</b> x <b>' +  s.height + 'px</b> (breite x höhe)<br>'

		+ 'zoom x/y         : ' + zoom_faktor_x + ' x ' + zoom_faktor_y 

		+ '= ' + zoom.firstChild.height + ' x ' + zoom.firstChild.width + '<br>'

		+ '</small></pre>'

		;

		return true;

    }

}

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};

};

Download

rubber.js