CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 13:27:18

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

DESSINER DES POLYGONES AVEC LA SOURIS

Information sur la source

Note :
Aucune note

Catégorie :Graphique Classé sous :dessin, polygone, canvas, souris, main Niveau :Initié Date de création :14/06/2010 Date de mise à jour :14/06/2010 16:28:21 Vu :3 784

Auteur : sebcap26

Ecrire un message privé

Site perso

Commentaire sur cette source (6)

Ajouter un commentaire et/ou une note

Description

Ce code vous permettra de tracer des polygones très simplement avec votre souris.

Je pense l'avoir fait assez simple pour qu'il soit facilement adaptable à vos besoins.

Il est également possible de les sauvegarder avec la fonction save (qu'il faudra adapter à vos besoins, elle ne fait qu'afficher la liste des points).

J'ai également mis un nombre maximum de points car j'en ai besoin pour mon application, mais c'est facilement adaptable.

Source

<html>
<head>
<script type="text/javascript">
/*
* JavaScript polygon drawing
* Sébastien CAPARROS
*/
//radius of click around the first point to close the draw
var END_CLICK_RADIUS = 5;
//the max number of points of your poygon
var MAX_POINTS = 8;
var mouseX = 0;
var mouseY = 0;
var isStarted = false;
var points = null;
var canvas = null;
var ctx = null;
window.onload = function() {
//initializing canvas and draw color
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
changeColor("red");
canvas.addEventListener("click", function(e) {
var x = e.clientX-canvas.offsetLeft;
var y = e.clientY-canvas.offsetTop;
if(isStarted) {
//drawing the next line, and closing the polygon if needed
if(Math.abs(x - points[0].x) < END_CLICK_RADIUS && Math.abs(y - points[0].y) < END_CLICK_RADIUS) {
isStarted = false;
} else {
points[points.length] = new Point(x, y);
if(points.length >= MAX_POINTS) {
isStarted = false;
}
}
} else if(points == null) {
//opening the polygon
points = new Array();
points[0] = new Point(x, y);
isStarted = true;
}
}, false);
//we just save the location of the mouse
canvas.addEventListener("mousemove", function(e) {
mouseX = e.clientX - canvas.offsetLeft;
mouseY = e.clientY - canvas.offsetTop;
}, false);
//refresh time
setInterval("draw();", 100);
}
//changes the color of the draw
function changeColor(color) {
ctx.strokeStyle = color;
}
//object representing a point
function Point(x, y) {
this.x = x;
this.y = y;
}
//resets the application
function reset() {
isStarted = false;
points = null;
}
//alerts the point list
function save() {
if(points == null) {
alert("Rien a sauvegarder !");
} else {
var s = "";
for(var a in points) {
//inversing y axis by (canvas.height - points[a].y)
s += "(" + points[a].x + "," + (canvas.height - points[a].y) + ")\n";
}
alert(s);
}
}
//draws the current chape
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
if(points != null && points.length > 0) {
ctx.moveTo(points[0].x, points[0].y);
for(i = 1 ; i < points.length ; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
if(isStarted) {
ctx.lineTo(mouseX, mouseY);
} else {
ctx.lineTo(points[0].x, points[0].y);
}
}
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>
<br /><br />
<input type="button" value="Sauvegarder" onclick="save();" /> 
<input type="button" value="Effacer" onclick="reset(); " /> 
Couleur : <select id="color" onchange="changeColor(this.options[this.selectedIndex].value);">
<option value="red" selected="selected">Rouge</option>
<option value="blue" selected="selected">Bleu</option>
<option value="green" selected="selected">Vert</option>
<option value="black" selected="selected">Noir</option>
<option value="yellow" selected="selected">Jaune</option>
</select>
</body>
</html>

<html>
	<head>
		<script type="text/javascript">
			/*
			 * JavaScript polygon drawing
			 * Sébastien CAPARROS
			 */
		
			//radius of click around the first point to close the draw
			var END_CLICK_RADIUS = 5;
			//the max number of points of your poygon
			var MAX_POINTS = 8;
			
			var mouseX = 0;
			var mouseY = 0;
			var isStarted = false;
			var points = null;
			
			var canvas = null;
			var ctx = null;
			window.onload = function() {
				//initializing canvas and draw color
				canvas = document.getElementById("canvas");
				ctx = canvas.getContext("2d");
				changeColor("red");
				
				canvas.addEventListener("click", function(e) {
					var x = e.clientX-canvas.offsetLeft;
					var y = e.clientY-canvas.offsetTop;
					if(isStarted) {
						//drawing the next line, and closing the polygon if needed
						if(Math.abs(x - points[0].x) < END_CLICK_RADIUS && Math.abs(y - points[0].y) < END_CLICK_RADIUS) {
							isStarted = false;
						} else {
							points[points.length] = new Point(x, y);
							if(points.length >= MAX_POINTS) {
								isStarted = false;
							}
						}
					} else if(points == null) {
						//opening the polygon
						points = new Array();
						points[0] = new Point(x, y);
						isStarted = true;
					}
				}, false);
				
				//we just save the location of the mouse
				canvas.addEventListener("mousemove", function(e) {
					mouseX = e.clientX - canvas.offsetLeft;
					mouseY = e.clientY - canvas.offsetTop;
				}, false);
				
				//refresh time
				setInterval("draw();", 100);
			}
			
			//changes the color of the draw
			function changeColor(color) {
				ctx.strokeStyle = color;
			}
			
			//object representing a point
			function Point(x, y) {
				this.x = x;
				this.y = y;
			}
			
			//resets the application
			function reset() {
				isStarted = false;
				points = null;
			}
			
			//alerts the point list
			function save() {
				if(points == null) {
					alert("Rien a sauvegarder !");
				} else {
					var s = "";
					for(var a in points) {
						//inversing y axis by (canvas.height - points[a].y)
						s += "(" + points[a].x + "," + (canvas.height - points[a].y) + ")\n";
					}
					alert(s);
				}
			}
			
			//draws the current chape
			function draw() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
			
				ctx.beginPath();

				if(points != null && points.length > 0) {
					ctx.moveTo(points[0].x, points[0].y);
					
					for(i = 1 ; i < points.length ; i++) {
						ctx.lineTo(points[i].x, points[i].y);
					}
					
					if(isStarted) {
						ctx.lineTo(mouseX, mouseY);
					} else {
						ctx.lineTo(points[0].x, points[0].y);
					}
				}
				
				ctx.stroke();
			}
		</script>
	</head>
	<body>
		<canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>
		<br /><br />
		<input type="button" value="Sauvegarder" onclick="save();" />&nbsp;
		<input type="button" value="Effacer" onclick="reset(); " />&nbsp;
		Couleur : <select id="color" onchange="changeColor(this.options[this.selectedIndex].value);">
			<option value="red" selected="selected">Rouge</option>
			<option value="blue" selected="selected">Bleu</option>
			<option value="green" selected="selected">Vert</option>
			<option value="black" selected="selected">Noir</option>
			<option value="yellow" selected="selected">Jaune</option>
		</select>
	</body>
</html>

Conclusion

J'ai cherché un code tout fait pendant pas mal de temps, mais je n'ai rien trouvé. Ce n'est finalement pas bien compliqué d'ailleurs.

Je me suis donc lancé, et voilà le résultat.

Ce code ne fonctionnera sous internet explorer que si vous incluez une librairie du type excanvas.

Historique

14 juin 2010 16:28:21 :: Ajout d'un select permettant la modification de la couleur.

Sources du même auteur

SIMULER UN SERVEUR COMET (EN PUSH) EN PHP ET JS

Toutes les sources de sebcap26

Sources de la même categorie

JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator

SPHERE 3D DÉFORMABLE par phm

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma

CALCULATRICE HEURE par m22001111

Toutes les sources de la catégorie Graphique

Sources en rapport avec celle ci

SPHERE 3D DÉFORMABLE par phm

DOODLE JUMP EN JAVASCRIPT par Toshy62

ACTIONJS - FRAMEWORK JAVASCRIPT (HTML5 CANVAS) par Neoziro

COULEUR DE FOND SELON POSITION SOURIS par mailliam

CANVAS I3D : 3D SOUS JAVASCRIPT SANS WEGGL par Hakumbaya

Commentaires et avis

Commentaire de mehdi7604 le 15/06/2010 14:45:32

C'est beau .
Pourquoi on ne peut pas dépasser 8 cotés?

Commentaire de sebcap26 le 15/06/2010 15:52:46

Pour mon application, il ne fallait pas que ca dépasse 8 côtés. Mais c'est facilement réglable, il suffit de modifier la ligne 12 :

var MAX_POINTS = 8;

Tu peux aussi enlever le nombre maximum en supprimant les lignes 36 à 38 :

if(points.length >= MAX_POINTS) {
isStarted = false;
}

Commentaire de jdmcreator le 15/06/2010 19:23:32

Bonjour,

Quand je testes ton script sur cette page : http://espacejavascript.com/exemple.php?id=224 sous Safari 4,

et que je scrolle la page jusqu'en bas et que je tente de dessiner, la ligne ne s'écrie pas sur le curseur.

Donc, un bug à réglé ;)

Commentaire de gselles le 21/06/2010 11:12:06

Bonjour,
Sous IE8 malgré l'insertion du script excanvas.js je récupère l'erreur suivante:
Cet objet ne gère pas cette propriété ou cette méthode
sur la ligne
canvas.addEventListener("click", function(e) {

Que faut-il en penser?
Amicalement.

Commentaire de jdmcreator le 21/06/2010 16:11:24

addEventListener n'existe pas sous IE 8 et - (il sera présent dans IE9) . Il faut plutôt utiliser attachEvent.

Commentaire de gselles le 21/06/2010 20:54:48

Merci, ça marche avec attachEvent.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

dessin d'un polygone, prog javascript [ par bichonade ] slt...bienvenue à toute la communauré..je cherche à faire une application qui me parraissait simple.. Sur ma page HTML est dsiposé probleme de clic [ par missceline33 ] Bonjour, j'ai un petit problème de compatibilité de mon site avec les différents navigateurs. J'avais d'ailleurs poster un message &#22 cherche code pour appeler chapitre concerné dans une Main Frame face au bouton déclecheur situé dans la Left Frame [ par fireworks ] cherche code pour appeler chapitre concerné dans une Main F face au bouton déclecheur situé dans la Left FrameMerci si l'on peut m'aide detection couleur [ par dockblue ] bonjour voila mon probleme dans une page web j'insere des graphiques ( des courbes mathematiques) au format jpg, est il possible en passant la souris innerhtml dans une autre page [ par jimmy28 ] Bonjour,Voilà, j'ai 2 pages : "main" et "search"dans la page "main", j'ai :<p id="parag">      test</p> probleme d'impression [ par goth ] bonjour, voila le pb : j'ai deux frame : menu et main. dans la frame menu il y a un bouton appelant une fonction d'impression dans main : parent.main. Une frame un peu vieille [ par Caryl ] J'ai un souci avec une frame, je m'explique. Mon site débute avec la page index.php qui crée deux frames haut et main (qui recoivent chacune Son au passage de la souris [ par hugo37 ] Bonjour à toutes et à tous! Je construit un site avec beaucoup de dhtml et de java et j'ai un petit soucis parceque je n'arrive pas &#2 Position de la souris [ par SDK_akira ] Bonjour ^^ Je cherche un moyen de recuperer la position de la souris en javascript, c'est possible ? (j'ai cherché mais je n'ai rien trouvé click souris => y mais scrollbar [ par lili_jazzy ] bonjour,je vais essayer d'etre claire!!!j'ai une page avec une scrollbar pour descendre dans la page.je souhaite recupèrer le y ou j'ia cliqu&#23

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP