Sujet Précédent Sujet Suivant

Dessiner un trait lorsque l'on clique sur une image

Résolu/Fermé
MrLemon Messages postés 74 Date d'inscription mercredi 8 avril 2020 Statut Membre Dernière intervention 24 mai 2020 - 19 mai 2020 à 23:32
MrLemon Messages postés 74 Date d'inscription mercredi 8 avril 2020 Statut Membre Dernière intervention 24 mai 2020 - 24 mai 2020 à 23:09
Bonjour, j'aimerais pouvoir finaliser un projet de fin d'année et pour cela il faut que je finisse un mini jeu. Ce mini jeu consiste à relier deux images entre elles si elles correspondent.

Le point que je n'arrive pas c'est qu'il faut que je récupère le clic gauche de ma souris et que lorsque les 2 clics correspondent au zone que j'ai prédéfini, un trait se dessine entre les 2 zones (qui sont les images)
Merci d'avance à ceux qui répondront !
Voici mon code : 
<script language="Javascript">
    var canvas = document.getElementById("canvas") ;
	var ctx = canvas.getContext("2d");
    var img = new Image(); 
	img.src = "C:/fresque/Fresque_05_bis.png";
	img.onload = function(){ 
		ctx.drawImage(img, 50, 1170);
   
	};
	var img2 = new Image(); 
	img2.src = "C:/fresque/Fresque_07_bis.png";
	img2.onload = function(){ 
		ctx.drawImage(img2, 50, 590);
		
	};	
	 
	var img3 = new Image(); 
	img3.src = "C:/fresque/Fresque_17_bis.png";
	img3.onload = function(){ 
		ctx.drawImage(img3, 50, 300);
		
	};	

    var img4 = new Image(); 
	img4.src = "C:/fresque/Fresque_23_bis.png";
	img4.onload = function(){ 
		ctx.drawImage(img4, 50, 880);
		
	};	
	
	 var img5 = new Image(); 
	img5.src = "C:/fresque/Fresque_25_bis.png";
	img5.onload = function(){ 
		ctx.drawImage(img5, 50, 10);
		
	};	
	
	
	 var img6 = new Image(); 
	img6.src = "C:/fresque/Fresque_06_bis.png";
	img6.onload = function(){ 
		ctx.drawImage(img6, 1100, 880);
		
	};
	
	
	 var img7 = new Image(); 
	img7.src = "C:/fresque/Fresque_08_bis.png";
	img7.onload = function(){ 
		ctx.drawImage(img7, 1100, 300);
		
	};
	
	
	 var img8 = new Image(); 
	img8.src = "C:/fresque/Fresque_18_bis.png";
	img8.onload = function(){ 
		ctx.drawImage(img8, 1100, 590);
		
	};
	
	
	 var img9 = new Image(); 
	img9.src = "C:/fresque/Fresque_26_bis.png";
	img9.onload = function(){ 
		ctx.drawImage(img9, 1100, 1170);
		
	};
	
	
	 var img10 = new Image(); 
	img10.src = "C:/fresque/Fresque_24_bis.png";
	img10.onload = function(){ 
		ctx.drawImage(img10, 1100, 10);
		
	};
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
20 mai 2020 à 12:03
Bonjour,

Pas testé.. mais ceci devrait répondre en grande partie à ta question
https://gist.github.com/dflima/3907737 
window.onload = function() {
	var clicks = 0;
	var lastClick = [0, 0];

	var canvas = document.getElementById('exemploCanvas');

	canvas.addEventListener('click', draw, false);

	function draw(e) {
		ctx = this.getContext('2d');

		x = getClick(e)[0]; // - this.offsetLeft;
		y = getClick(e)[1]; // - this.offsetTop;

		if (clicks != 1) {
			clicks++;
		} else {
			ctx.beginPath();
			ctx.moveTo(lastClick[0], lastClick[1]);
			ctx.lineTo(x, y, 6);

			ctx.strokeStyle = '#000000';
			ctx.stroke()

			clicks = 0;
		}
		lastClick = [x, y];
	}

	function getClick(e) {
		var x, y;

		if (e.pageX != undefined && e.pageY != undefined) {
			x = e.pageX;
			y = e.pageY;
		} else {
			x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
		}

		return [x, y];
	}
	}

1
MrLemon Messages postés 74 Date d'inscription mercredi 8 avril 2020 Statut Membre Dernière intervention 24 mai 2020
20 mai 2020 à 12:35
Merci cela va beaucoup m'aidé !
0
MrLemon Messages postés 74 Date d'inscription mercredi 8 avril 2020 Statut Membre Dernière intervention 24 mai 2020
20 mai 2020 à 12:40
Pouvez-vous m'expliquer les principales lignes du code ?
0
Réponse 2 / 2
MrLemon Messages postés 74 Date d'inscription mercredi 8 avril 2020 Statut Membre Dernière intervention 24 mai 2020
24 mai 2020 à 23:09
Le projet final : 
<!doctype html>
<html>
<head>
  <title>Les Fresque du Climat par Erwan et Clara</title>
  <link rel="stylesheet" href="feuille de style.css" />
</head>

 <body>
  <h1> La Fresque du Climat</h1>
  <p>Pour lancer la presentation de la fresque du climat, cliquer sur le lien ci-dessous :</p>
  <p><a href = "javascript:run_python()"><font face = 'Cooper'>    Fresque du climat</font></a></p>
  <p>Pour vous exercez, voici un petit jeu :</p>
  <canvas id="canvas" width="1550" height="1420" style = "border:5px solid #000000;"></canvas>
  <p><img src="Conclusion.png"/></p>
  <p> Notre lycee : <a href="http://porte-normandie-lyc.spip.ac-rouen.fr/" : target="_blank" > Lycee Porte de Normandie</a></p>
	<script language="Javascript">
    
	var canvas = document.getElementById("canvas") ; //fait réf. au canvas//
	var ctx = canvas.getContext("2d");               //dessine sur le canvas en 2d//
    var img = new Image();                           // création d'image //
	img.src = "Fresque_05_bis.png";
	img.onload = function(){ 
		ctx.drawImage(img, 50, 1170);
   
	};
	var img2 = new Image(); 
	img2.src = "Fresque_07_bis.png";
	img2.onload = function(){ 
		ctx.drawImage(img2, 50, 590);
		
	};	
	 
	var img3 = new Image(); 
	img3.src = "Fresque_17_bis.png";
	img3.onload = function(){ 
		ctx.drawImage(img3, 50, 300);
		
	};	

    var img4 = new Image(); 
	img4.src = "Fresque_23_bis.png";
	img4.onload = function(){ 
		ctx.drawImage(img4, 50, 880);
		
	};	
	
	 var img5 = new Image(); 
	img5.src = "Fresque_25_bis.png";
	img5.onload = function(){ 
		ctx.drawImage(img5, 50, 10);
		
	};	
	
	
	 var img6 = new Image(); 
	img6.src = "Fresque_06_bis.png";
	img6.onload = function(){ 
		ctx.drawImage(img6, 1100, 880);
		
	};
	
	
	 var img7 = new Image(); 
	img7.src = "Fresque_08_bis.png";
	img7.onload = function(){ 
		ctx.drawImage(img7, 1100, 300);
		
	};
	
	
	 var img8 = new Image(); 
	img8.src = "Fresque_18_bis.png";
	img8.onload = function(){ 
		ctx.drawImage(img8, 1100, 590);
		
	};
	
	
	 var img9 = new Image(); 
	img9.src = "Fresque_26_bis.png";
	img9.onload = function(){ 
		ctx.drawImage(img9, 1100, 1170);
		
	};
	
	
	 var img10 = new Image(); 
	img10.src = "Fresque_24_bis.png";
	img10.onload = function(){ 
		ctx.drawImage(img10, 1100, 10);
		
	};
	

  function run_python()
   {
    var w = new ActiveXObject("WScript.Shell"); 
    w.run('cmd /c "python C:\\fresque\\Le_rechauffement_climatique.py"'); 
   }
	
  
	</script>
 
	<script type="text/javascript">
	window.onload = function() {
	var clicks = 0;
	var lastClick = [0, 0];

	var canvas = document.getElementById('canvas');

	canvas.addEventListener('click', draw, false);

	function verification(x1, y1, x2, y2){
        if ((((x1>60)&&(x1<460) ) && (y1>311)&&(y1<551)) && (((x2>1100)&&(x2<1500) ) && (y2>1512)&&(y2<1753))){
            console.log("ok");
            return [true, 450, 120, 1100, 1260];
        }
        if ((((x1>60)&&(x1<460) ) && (y1>602)&&(y1<842)) && (((x2>1100)&&(x2<1500) ) && (y2>891)&&(y2<1132))){
				console.log("ok");
				return [true,450,420,1100,710];
		}
		if ((((x1>60)&&(x1<460) ) && (y1>892)&&(y1<1132)) && (((x2>1100)&&(x2<1500) ) && (y2>602)&&(y2<842))){
				console.log("ok");
				return [true,450,710,1100,420];
			
		}	
		if ((((x1>60)&&(x1<460) ) && (y1>1182)&&(y1<1422)) && (((x2>1100)&&(x2<1500) ) && (y2>312)&&(y2<552))){
				console.log("ok");
				return [true,450,1000,1100,130];
			
		}	
		if ((((x1>60)&&(x1<460) ) && (y1>1443)&&(y1<1681)) && (((x2>1100)&&(x2<1500) ) && (y2>1152)&&(y2<1393))){
				console.log("ok");
				return [true,450,1290,1100,1000];
							
		}
		
		
		
		else {
            return [false, 0, 0, 0, 0];
        }
    }
function draw(e) {
        ctx = this.getContext('2d');

        x = getClick(e)[0]; // - this.offsetLeft;
        y = getClick(e)[1]; // - this.offsetTop;
        console.log(x,y);

        if (clicks != 1) {
            clicks++;
            console.log(clicks)
            lastClick = [x, y];
        } else {
            console.log(lastClick[0], lastClick[1], x, y);
            verif= verification(lastClick[0], lastClick[1], x, y)
            if (verif[0]) {

                ctx.strokeStyle = 'black';
                ctx.lineWidth=6;
                ctx.beginPath();
                ctx.moveTo(verif[1], verif[2]);
                ctx.lineTo(verif[3], verif[4]);

                ctx.stroke()

                clicks = 0;
            } else {
                clicks = 0;
            }

    }
    }

	function draw(e) {
        ctx = this.getContext('2d');

        x = getClick(e)[0]; // - this.offsetLeft;
        y = getClick(e)[1]; // - this.offsetTop;
        console.log(x,y);

        if (clicks != 1) {
            clicks++;
            console.log(clicks)
            lastClick = [x, y];
        } else {
            console.log(lastClick[0], lastClick[1], x, y);
            verif= verification(lastClick[0], lastClick[1], x, y)
            if (verif[0]) {

                ctx.strokeStyle = 'black';
                ctx.lineWidth=6;
                ctx.beginPath();
                ctx.moveTo(verif[1], verif[2]);
                ctx.lineTo(verif[3], verif[4]);

                ctx.stroke()

                clicks = 0;
            } else {
                clicks = 0;
            }

    }
    }
	function getClick(e) {
		var x, y;

		if (e.pageX != undefined && e.pageY != undefined) {
			x = e.pageX;
			y = e.pageY;
		} else {
			x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
		}

		return [x, y];
	}
	}
	</script>
	

 </body>
</html>
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Lien phishing android
mcafferty -
mcafferty -

8 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
Sur la plage...
kriiisss -
Utilisateur anonyme -

6 réponses