PDA

Visualizza la versione completa : Drawing Canvas non funzionante


Francoiky
14-06-2011, 20:42
Salve a tutti! Cercando di capire come funzioni il nuovo HTML5 mi sono imbattuto in un problema: queste poche righe di codice non funzionano e non capisco il perché. Qualcuno può aiutarmi?


<!DOCKTYPE html>
<html>
<head>
<script type="text/javascript">
var canvas;
var mouseDown = 0;
var context;
var mouseX;
var mouseY;
function drawRect()
{
if (mouseDown == 1)
{
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.fillRect(mouseX,mouseY,10,10);
}
}
function getMousePosition(event)
{
mouseX = event.screenX;
mouseY = event.screenY;
}
</script>
</head>
<body style="background-color: grey;">
<center>
<canvas id="canvas" style="width: 80%;height: 97%;border-style: ridge;" onmousedown="mouseDown = 1;" onmouseup="mouseDown = 0;" onmousemove="getMousePosition(event); drawRect();"></canvas>
<center>
</body>
</html>

Grazie in anticpo. ;)

Blake1992
15-06-2011, 13:31
<!DOCKTYPE html>
<html>
<head>
<script type="text/javascript">
var canvas;
var mouseDown = 0;
var context;
var mouseX;
var mouseY;
function drawRect()
{
if (mouseDown == 1)
{
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.fillRect(mouseX,mouseY,10,10);
}
}
function getMousePosition(event)
{
if (mouseDown == 1)
{
mouseX = event.offsetX;
mouseY = event.offsetY;
drawRect();
}
}
initCanvas = function(){
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.width = context.width;
context.canvas.addEventListener('mousedown' , function() { mouseDown = 1; },false );
context.canvas.addEventListener('mousemove' , getMousePosition ,false );
context.canvas.addEventListener('mouseup' , function() { mouseDown = 0; } ,false );
context.canvas.addEventListener('mouseleave' , function() { mouseDown = 0; } ,false );
}
</script>
</head>
<body style="background-color: grey;" onload='initCanvas()'>
<center>
<canvas id="canvas" style="width: 80%;height: 97%;border-style: ridge"></canvas>
<center>
</body>
</html>

Così scrive... però su chrome i quadrati risultano spostati... non so se sia un errore generico o solo di chrome quindi fammi sapere come va =)

Francoiky
15-06-2011, 14:50
I quadrati risultano spostati perché in:

context.fillRect(mouseX,mouseY,10,10)
dovrebbe essere *(mouseX - 5, mouseY - 5, 10, 10). Il codice non l'ho "ottimizzato", era solo per provare.

P.S.: mi spieghi questo passaggio?

initCanvas = function(){
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.width = context.width;
context.canvas.addEventListener('mousedown' , function() { mouseDown = 1; },false );
context.canvas.addEventListener('mousemove' , getMousePosition ,false );
context.canvas.addEventListener('mouseup' , function() { mouseDown = 0; } ,false );
context.canvas.addEventListener('mouseleave' , function() { mouseDown = 0; } ,false );
}

Comunque, grazie ;)

EDIT:
non avevo capito in che senso "spostati" :messner:
Questo succede perchè non ho regolato il rapporto tra le coordinate del mouse (che sono rispetto allo schermo) e quelle del quadrato da disegnare nel canvas (che sono rispetto al canvas stesso). Come detto prima il codice è solo di prova... una volta riuscito a farlo funzionare sarei passato ad ottimizzarlo.

Blake1992
15-06-2011, 15:17
Iniziando dalle cose semplici:

context.width = context.width;
serve a svuotare il canvas nel caso ci fosse qualcosa sopra.

context.canvas.addEventListener('mousedown' , function() { mouseDown = 1; },false );
context.canvas.addEventListener('mousemove' , getMousePosition ,false );
context.canvas.addEventListener('mouseup' , function() { mouseDown = 0; } ,false );
context.canvas.addEventListener('mouseleave' , function() { mouseDown = 0; } ,false );
Questi sono degli EventListener. A dire il vero li ho scoperti ieri pure io ma sono molto simili a quelli di ActionScript3.
Quello che fanno è richiamare una funzione al verificarsi di un determinato evento.
La sintassi è questa:
object.addEventListener (NomeEvento, function, useCapture);
NomeEvento è un identificativo per il tipo di evento che ti interessa (es: 'mousedown', 'click' etc)
Function è la funzione che viene richiamata al verificarsi dell'evento. Se non vengono specificati parametri viene passato l'evento.
useCapture è un valore Booleano che spacifica se l'evento debba essere catturato o no. Personalmente lo metto sempre a false :malol:

Se avessi bisogno di chiamare una funzione passando l'evento più altri parametri usa:
object.addEventListener ('event', function (e) { NomeFunzione(e, par1, par2);}, false);

Probabilemente non è il modo migliore ma funziona ;)


EDIT: non avevo capito in che senso "spostati" Questo succede perchè non ho regolato il rapporto tra le coordinate del mouse (che sono rispetto allo schermo) e quelle del quadrato da disegnare nel canvas (che sono rispetto al canvas stesso). Come detto prima il codice è solo di prova... una volta riuscito a farlo funzionare sarei passato ad ottimizzarlo.

Non è quello... lo avevo pensato anch'io ma non c'entra. Comunque lo spostamento aumenta costantemente man mano che ci sia allontana dall'origine (0,0). Se scopri quella costante basta che fai:


MouseX = MouseX * costante;

Per trovare la costante fai un rapporto fra la X ipotetica e la X reale.
e lo stesso per la Y. Dovrebbe funzionare ;)

fcaldera
15-06-2011, 15:22
attenzione: doctype, non "docktype"

Loading