selezionare oggetti nel canvas

**iacoposk8** · 21-05-2011, 20:32

ciao a tutti!
ho una domanda difficilissima
se secondo voi è impossibile ditemelo che penso ad un altra soluzione
come faccio a selezionare qualunque figura col canvas?
se è un quadrato/rettangolo è facile
se è un cerchio, magari con la funzione sine si riesce per vedere se dove ho cliccato è un punto compreso nell'area del cerchio.
ma se è una linea che fa a zig-zag per esempio?
seprei controllare se il punto cliccato e nell'area del rettangolo che circoscrive la linea, ma è impreciso perchè in questo rettangolo immaginario potrebbero esserci altre figure e io le vedrei tutte come la stessa...
spero di essermi spiegato, se non è chiaro ditemelo che riscrivo

grazie

**iacoposk8** · 24-05-2011, 07:34

SOLUZIONE tratta da Making and Moving Selectable Shapes on an HTML5 Canvas

codice:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<body style="margin:0;">
<canvas id="canvas" width="400" height="300">This text is displayed if your browser does not support HTML5 Canvas.</canvas><span id="ex"></span>
<script type="text/javascript">
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');

ctx.fillStyle = '#FFC02B';
ctx.fillRect(40,40,40,40);

var mx, my;
$(document).ready(function(){
	$("#canvas").mousedown(function(e){
		mx=e.pageX; my=e.pageY;

    		var imageData = ctx.getImageData(mx, my, 1, 1);

    		if (imageData.data[3] > 0) {$("#ex").html("c'è");}
		else{$("#ex").html("non c'è");}
		$("#ex").append("
R:"+imageData.data[0]+" G:"+imageData.data[1]+" B:"+imageData.data[2]+" A:"+imageData.data[3]);
	});
});
</script>
</body>

Discussione: selezionare oggetti nel canvas

Strumenti discussione

Ricerca discussione

Visualizza

selezionare oggetti nel canvas

Permessi di invio