Sujet Précédent Sujet Suivant

Problème paint minimalisé en javascript

Fermé
Mike0931 - 17 mai 2010 à 17:18
 Mike0931 - 17 mai 2010 à 18:25
Bonjour,

J'ai un petit projet à faire qui est de créer une sorte de logiciel paint en javascript et html.
Le programme doit permettre de dessiner une ligne, un rectangle et un cercle...
Les formes doivent rester apparente sur la canvas.

J'ai réussi à écrire le code qui dessine les 3 formes en fonction du déplacement du curseur mais lorsque je change de forme, la forme précédent disparaît.

Je ne trouve pas la solution.

En expérant que vous pourrez m'aider, voici le code : 

<!-- saved from url=(0022)http://internet.e-mail -->
<html>
 <head>
  <script type="application/javascript">
	var etat;
	var ctx;
	var MonTableau = new Array();
	var forme;
	
function ligne()
{	
	forme = "ligne";
}

function carre()
{	
	forme = "carre";
}

function cercle()
{
	forme = "cercle";
}
	
function drawLine(xDeb, yDeb, xFin, yFin)
{
	ctx.strokeStyle = 'rgb(255,0,0)';
	ctx.beginPath(); 
	ctx.moveTo(xDeb, yDeb);
	ctx.lineTo(xFin, yFin);
	ctx.stroke();
}

function drawRectangle(xDeb, yDeb, xFin, yFin)
{
	ctx.strokeStyle = 'rgb(255,0,0)';
	ctx.strokeRect (xDeb, yDeb, xFin-xDeb, yFin-yDeb);
}

function drawCercle(xDeb, yDeb, xFin, yFin)
{
	ctx.strokeStyle = 'rgb(255,0,0)';
	ctx.beginPath();
	ctx.arc(xDeb, yDeb, Math.sqrt(((xFin-xDeb)*(xFin-xDeb))+((yFin-yDeb)*(yFin-yDeb))), 0, Math.PI*2, true); 
	ctx.stroke();
}
 
function draw() 
{

	ctx.fillStyle = "rgb(200,200,200)";
	ctx.fillRect (0, 0, 600, 600);
	
	if (forme == "carre"){
		drawRectangle(MonTableau[0], MonTableau[1], MonTableau[2], MonTableau[3]);
	}
	else if (forme == "ligne"){
		drawLine(MonTableau[0], MonTableau[1], MonTableau[2], MonTableau[3]);
	}
	else if (forme == "cercle"){
		drawCercle(MonTableau[0], MonTableau[1], MonTableau[2], MonTableau[3]);
	}

}

function load()
{
	etat=0;
	var canvas = document.getElementById("canvas");
	ctx = canvas.getContext("2d");
	ctx.fillStyle = "rgb(200,200,200)";
	ctx.fillRect (0, 0, 600, 600);

	draw();
	
}

function press(event)
{
	switch(etat)
	{
		case 0:
			etat=1;
			MonTableau[0] = event.clientX-parseInt(document.getElementById("position").style.left);
			MonTableau[1] = event.clientY-parseInt(document.getElementById("position").style.top);
			MonTableau[2] = event.clientX-parseInt(document.getElementById("position").style.left);
			MonTableau[3] = event.clientY-parseInt(document.getElementById("position").style.top);
			draw();
		break;
		case 1:
		break;
		case 2:
		break;
	}
}

function release(event)
{
	switch(etat)
	{
		case 0:
		break;
		case 1:
			etat=0;
			draw();
		break;
		case 2:
			MonTableau[2] = event.clientX-parseInt(document.getElementById("position").style.left);
			MonTableau[3] = event.clientY-parseInt(document.getElementById("position").style.top);
			etat=0;
			draw();
			//load();

		break;
	}
	
}

function move(event)
{
	switch(etat)
	{
		case 0:
		break;
		case 1:
			MonTableau[2] = event.clientX-parseInt(document.getElementById("position").style.left);
			MonTableau[3] = event.clientY-parseInt(document.getElementById("position").style.top);
			etat=2;
			draw();
		break;
		case 2:
			MonTableau[2] = event.clientX-parseInt(document.getElementById("position").style.left);
			MonTableau[3] = event.clientY-parseInt(document.getElementById("position").style.top);
			etat=2;
			draw();
		break;
	}
}

</script>
</head>
<body onload="load()">
<div id="position" style="position:absolute; left:0px; top:0px;">
   <canvas id="canvas"  onmousedown="press(event)" onmouseup="release(event)" onmousemove="move(event)" width="600" height="600"></canvas></div>
<div id="position" style="position:absolute; left:0px; top:0px;">
	<button type="button" onclick="ligne();">
	  Ligne
	</button> 
	<button type="button" onclick="carre();">
	  Rectangle
	</button> 
	<button type="button" onclick="cercle();">
	  Cercle
	</button> 
	<button type="button" onclick="load();">
	  Reset
	</button> 
</div>
   </body>
</html>


Merci de votre aide

A voir également:

2 réponses

Réponse 1 / 2
Jaina_ Messages postés 78 Date d'inscription mardi 4 mai 2010 Statut Membre Dernière intervention 1 juin 2010 9
Modifié par Jaina_ le 17/05/2010 à 17:54
Salut !

J'ai regardé de plus près ton code et c'est très intéressant je ne savais pas qu'on pouvais faire de telle chose en javascript :P Le problème vient de la fonction draw().
Tu appelles constamment cette fonction et son action est de vider le canvas : 
ctx.fillRect (0, 0, 600, 600);

Donc à chaque nouveau objet, à chaque déplacement, ton canvas est vidé. Mets la fonction ctx.fillRect (0, 0, 600, 600); en commentaire pour mieux comprendre.

Soit tu trouves une autre solution que de redessiner le canvas à chaque action.
Soit tu crées un tableau qui va stocker tes objets, tu récupères les données de monTableau[1], monTableau[2] etc. et tu les redessines à chaque appel à la fonction draw(). (Mais ça risque de devenir lourd si tu as beaucoup d'objets)

ps : ton bouton reset ne fonctionne pas complètement, pour cela, dans function load(), enlève le draw(); il ne sert à rien !

Voilà bon courage !
0
Réponse 2 / 2
Mike0931
17 mai 2010 à 18:25
Merci de ta réponse, le problème vient effectivement de là mais quand j'enlève cette fonction et que je veux dessiner une ligne (par exemple) il n'y en a pas qu'une qui se trace mais plusieurs...
Est-ce qu'il existe une autre fonction que ctx.fillRect ?

Encore merci de ta réponse
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Logiciel gratuit équivalent à Paint.Net pour Mac
fiesta500 -
Utilisateur anonyme -

5 réponses
Retrouver l'outil baguette magique sur paint
Coline -
Coline -

9 réponses
comment passez une image couleur en noir et blanc avec paint
michelVENIARD -
Me -

3 réponses