Tracciatura di un rettangolo con il mouse.

**Marcolino's** · 25-11-2015, 18:38

Ciao,
dovrei creare una semplice applicazione per fare il cropping di un immagine, senza usare librerie come jcrop o jimp, mi basterebbe tracciare un rettangolo su un area con il mouse, tracciando però i contorni di questo rettangolo mentre si forma.
Idee?

**br1** · 26-11-2015, 09:29

semplice (e vecchia) pagina di esempio:

codice:

<html><head>
<script>
document.onselectstart = new Function("return true;");
document.ondragstart   = new Function("return false;");
r_on = false;
x0=0;
y0=0;
x1=0;
y1=0;
iw=0;
ih=0;
il=0;
it=0;
bordo=2;


function getPageCoords(element) { 
// thanks to 'Martin Honnen' for this function 
	var coords = {x: 0, y: 0}; 
	while (element) { 
		coords.x += element.offsetLeft; 
		coords.y += element.offsetTop; 
		element = element.offsetParent; 
	} 
	return coords; 
} 


function getMouseCoords(e) { 
	if(!e) e = window.event;
	var coords = {x: 0, y: 0}; 
	coords.x = e.x -1;
	coords.y = e.y -1;
    if(navigator.appName == "Netscape") {
		coords.x += window.pageXOffset;
		coords.y += window.pageYOffset;
	}
    if (navigator.appVersion.indexOf("MSIE") != -1){
		if (navigator.appVersion.indexOf("Mac") == -1){
			coords.x += document.body.scrollLeft;
			coords.y += document.body.scrollTop;
		}
	}
	return coords
}


function r_misura(obj) {
	iw = obj.width;
	ih = obj.height
	p = getPageCoords(obj);
	il = p.x;
	it = p.y;
	obj.alt='t='+it+' l='+il+' w='+iw+' h='+ih
}


function r_start(obj) {
	p = getMouseCoords();
	x0 = p.x -1;
	y0 = p.y -1;
	x1 = x0;
	y1 = y0;
	r_on = true;


	d = document.getElementById('re1').style;
	d.top=y0;
	d.left=x0;
	d.height=0;
	d.width=0;
	d.display='none';
}


function r_move(obj) {
	if (r_on) {
		p = getMouseCoords()
		x1 = p.x-1;
		y1 = p.y-1;
//		x1 = (x1<x0)?x1-1:x1;
//		y1 = (y1<y0)?y1-1:y1;


		d = document.getElementById('re1').style;
// riordino e correggo le coordinate per l'immagine
		ix0 = (x1<x0)?x1-1:x0;
		iy0 = (y1<y0)?y1-1:y0;
		ix1 = (x1>x0)?x1:x0;
		iy1 = (y1>y0)?y1:y0;
// limito l'escursione
		ix0 = (ix0<il)?il:ix0;
		iy0 = (iy0<it)?it:iy0;
		ix1 = (ix1>iw+il)?iw+il:ix1;
		iy1 = (iy1>ih+it)?ih+it:iy1;
		if (ix1-ix0>bordo && iy1-iy0>bordo) {
			d.display=''
			d.top=iy0;
			d.left=ix0;
			d.width=ix1-ix0-bordo;
			d.height=iy1-iy0-bordo;
		} else {
			d.display='none'
		}


		f = document.misure;
		f.myTop.value=y0-it;
		f.myLeft.value=x0-il;
		f.myBottom.value=y1-it;
		f.myRight.value=x1-il;
		f.myHeight.value=y1-y0;
		f.myWidth.value=x1-x0;
	}
}


function r_stop() {
	r_on = false;
}


</script>
<meta http-equiv="imagetoolbar" content="no" />
</HEAD>


<BODY bgcolor=cyan>
<img src="image2.jpg" 
	onload="r_misura(this)"
	onmousedown="r_start(this)" 
	onmousemove="r_move(this)" 
	onmouseup="r_stop(this)"
>
<img src="ghost.gif" name="re1" id="re1"
	style="border:2px dotted red;position:absolute;top:0;left:0;display:none;">
<hr>
<form name="misure">
Top:<input type=text name=myTop size=3>
Left:<input type=text name=myLeft size=3>
Bottom:<input type=text name=myBottom size=3>
Right:<input type=text name=myRight size=3>
Height:<input type=text name=myHeight size=3>
Width:<input type=text name=myWidth size=3>
<input type=reset value="Clear"
	onclick="x0=0;y0=0;document.getElementById('re1').style.display='none'">
</form>
</BODY>
</HTML>

l'immagine ghost.gif e' una semplice gif 16x16 trasparente

**Marcolino's** · 26-11-2015, 20:15

Grande BR1 non mi resta che adattarla.

Discussione: Tracciatura di un rettangolo con il mouse.

Strumenti discussione

Ricerca discussione

Visualizza

Tracciatura di un rettangolo con il mouse.

Permessi di invio