[HTML5 e JS] Cliccare sull'oggetto

treled · Messaggio da **treled** » sabato 24 maggio 2014, 17:33

Salve, volevo sapere se qualcuno mi aiutasse ad sistemare il codice che sto modificando da un'esempio:
http://www.html5freecode.com/Canvas-_Select_an_Object_by_Mouse_Click_(Hit_Detection).htm

il mio codice è cosi:

Codice: Seleziona tutto

<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<br>
<canvas id="myCanvas" width="400" height="230" onclick="DefinePaths(event)"></canvas>
<script>
    var cnv = document.getElementById('myCanvas');
    var ctx = cnv.getContext('2d');
    var deg = Math.PI/180;
	DefinePaths(null);
	

function drawRect(x, y, w, h, fillColor, strokeColor)
{
	strokeColor = strokeColor || '#000000';
	ctx.fillStyle = fillColor;
	ctx.fillRect(x, y, w, h);
	ctx.strokeStyle = strokeColor;
	ctx.strokeRect(x, y, w, h);
}
function DefinePaths(event){
	drawRect(100, 40, 50, 50, 'blue', '');
	if (event!=null){
			if (IsInPath(event)) 	
			color_blue();
			else color_blue();
			
		}
	drawRect(200, 40, 50, 50, 'red', '');
	if (event!=null){
			if (IsInPath(event)) 	
			color_red();
			else color_red();
			
		}
}	


function IsInPath(event) {
	var bb, x, y
	bb = cnv.getBoundingClientRect()
	x = (event.clientX-bb.left) * (cnv.width/bb.width)
	y = (event.clientY-bb.top) * (cnv.height/bb.height)
	return ctx.isPointInPath(x,y)
}

function color_blue(){
    drawRect(100, 40, 50, 50, 'darkblue', '#ffbf18');
	console.log('blue');
	alert('blue');
}

function color_red(){
    drawRect(100, 40, 50, 50, 'darkred', '#ffbf18');
	console.log('red');
	alert('red');
}
</script>

c'è qualcuno che sa come sistemare e non fare tante funzioni per ogni colore?

grazie mille.

eaghezzi · Messaggio da **eaghezzi** » sabato 24 maggio 2014, 18:56

scrivi una unzione color_color(colore_scelto) e sostituisci tutte le chiamate

treled · Messaggio da **treled** » sabato 24 maggio 2014, 19:08

ok, ho fatto cosi.. ma mi sa che non mi va più l'if dove c'è la funzione IsInPath:
mi protesti darmi una mano?

Codice: Seleziona tutto

<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<br>
<canvas id="myCanvas" width="400" height="230" onclick="DefinePaths(event)"></canvas>
<script>
    var cnv = document.getElementById('myCanvas');
    var ctx = cnv.getContext('2d');
    var deg = Math.PI/180;
	DefinePaths(null);
	

function drawRect(x, y, w, h, fillColor, strokeColor)
{
	strokeColor = strokeColor || '#000000';
	ctx.fillStyle = fillColor;
	ctx.fillRect(x, y, w, h);
	ctx.strokeStyle = strokeColor;
	ctx.strokeRect(x, y, w, h);
}
function DefinePaths(event){
	drawRect(100, 40, 50, 50, 'blue', '');
	if (event!=null){
			if (IsInPath(event)) 	
			{
				color_color('blue');
			}
			
		}
	drawRect(200, 40, 50, 50, 'red', '');
	if (event!=null){
			if (IsInPath(event)) 	
			{
				color_color('red');
			}
			
		}
}	


function IsInPath(event) {
	var bb, x, y
	bb = cnv.getBoundingClientRect()
	x = (event.clientX-bb.left) * (cnv.width/bb.width)
	y = (event.clientY-bb.top) * (cnv.height/bb.height)
	return ctx.isPointInPath(x,y)
}


function color_color(colore_scelto){
    ctx.strokeStyle= colore_scelto;
	console.log('' + colore_scelto +'');
}
</script>

treled · Messaggio da **treled** » lunedì 26 maggio 2014, 13:32

ciao ho ridotto il codice che ora ho fatto il modo che mi viene ingrandito solo il bordo pero non mi funziona ancora bene.. vi allego il codice:

Codice: Seleziona tutto

<!DOCTYPE html>
<html>
<head>
<title>Test select object click</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="230" onclick="DefinePaths(event)"></canvas>
<script>
    var cnv = document.getElementById('myCanvas');
    var ctx = cnv.getContext('2d');
    var deg = Math.PI/180;
	DefinePaths(null);
	
function DefinePaths(event){
   drawRect(20, 10, 150, 150, 'red', 'blue')
	if (event!=null){
		if (IsInPath(event)) 	SelStyle() 
		else 					DifStyle()
	}else 						DifStyle()

	drawRect(220, 10, 150, 150, 'yellow', 'blue')
	if (event!=null){
		if (IsInPath(event)) 	SelStyle() 
		else 					DifStyle()
	}else 						DifStyle()
	
}

function IsInPath(event) {
	var bb, x, y
	bb = cnv.getBoundingClientRect()
	x = (event.clientX-bb.left) * (cnv.width/bb.width)
	y = (event.clientY-bb.top) * (cnv.height/bb.height)
	return ctx.isPointInPath(x,y)
}

function DifStyle(){
    ctx.lineWidth= 10;
}

function drawRect(x, y, w, h, fillColor, strokeColor)
{
	strokeColor = strokeColor || '#000000';
	ctx.fillStyle = fillColor;
	ctx.fillRect(x, y, w, h);
	ctx.strokeStyle = strokeColor;
	ctx.strokeRect(x, y, w, h);
}
</script>
</body>
</html>

come posso risolvere il problema?

nessuno sa come fare?

grazie mille.

Messaggio da **Zoff** » mercoledì 28 maggio 2014, 0:14

Qual'è il problema?
Hai scritto solo "non funziona ancora bene".

Forum Ubuntu-it