Dessiner des lignes sur votre page web

Soyez le premier à donner votre avis sur cette source.

Vue 39 103 fois - Téléchargée 1 554 fois

Description

Bon tout est dit dans le titre, mais je vais quand même redévelopper.
Je vous propose aujourd'hui une fonction qui va vous permettre de dessiner des lignes en pointillé. Il suffira simplement de l'appeler en spécifier les coordonnées des deux points à relier, la couleur, l'espacement en pixel des pointillés ainsi qu'un bloc div ou sera inscrit le code html généré par cette fonction.

Démonsatrtion en ligne ici : http://codessources.votre-web.com/js/drawLine/demo.html

Source / Exemple :


//Fonction permettant de tracer une ligne en JS
// Cette fonction créer autant de bloc div flottant que nécessaire et la place de manière régulière le long du segment à tracer.
//	Arguments:
//		-	x1,y2 coordonnés du début du segment
//		-	x2,y2 coordonnés de la fin du segment
//		-	color couleur du tracé
//		-	espacementPointillé, entier décrivant en pixel l'espacement entres les points du tracé
//		-	divId, id d'un élement HTML comme un div par exemple. Cet objet servira de container pour le code HTML des points.
//						Je conseille d'utiliser un div flottant placé en 0,0 de dimension 0,0 en position:absolute
function drawLine(x1,y1,x2,y2,color,espacementPointille,divId)
{
	if(espacementPointille<1) { espacementPointille=1; }
	
	//on calcule la longueur du segment
	var lg=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
	
	//on determine maintenant le nombre de points necessaires
	var nbPointCentraux=Math.ceil(lg/espacementPointille)-1;
	
	//stepX, stepY (distance entre deux points de pointillés);
	var stepX=(x2-x1)/(nbPointCentraux+0);
	var stepY=(y2-y1)/(nbPointCentraux+0);
	
	//on recreer un point apres l'autre
	var strNewPoints='';
	for(var i=1 ; i<nbPointCentraux ; i++)
	{
		strNewPoints+='<div style="font-size:1px; width:1px; heigth:1px; background-color:'+color+'; position:absolute; top:'+Math.round(y1+i*stepY)+'px; left:'+Math.round(x1+i*stepX)+'px; ">&nbsp;</div>';
	}
	
	//pointe de depart
	strNewPoints+='<div style="font-size:1px; width:3px; heigth:3px; background-color:'+color+'; position:absolute; top:'+(y1-1)+'px; left:'+(x1-1)+'px; ">&nbsp;</div>';
	//point d'arrive
	strNewPoints+='<div style="font-size:1px; width:3px; heigth:3px; background-color:'+color+'; position:absolute; top:'+(y2-1)+'px; left:'+(x2-1)+'px; ">&nbsp;</div>';

	
	//on suprimme tous les points actuels et on mets les nouveaux div en place
	//obj container des points
	var myContainer=document.getElementById(divId);
	myContainer.innerHTML=strNewPoints;
}

Conclusion :


Code testé avec succès sous IE7 et Firefox.
Devrais être compatible Opera et Safari aussi (si quelqu'un peut confirmer).

Démonstration en ligne ici : http://codessources.votre-web.com/js/drawLine/demo.html

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
170
Date d'inscription
mercredi 18 juin 2003
Statut
Membre
Dernière intervention
11 mai 2009

De rien c'est fait pour :)
Messages postés
3
Date d'inscription
mercredi 21 mai 2008
Statut
Membre
Dernière intervention
27 mai 2009

Merci beaucoup MAX pour ton code, j'ai peu m'en inspirer pour une fonction que j'avais a réalisé dans le cadre d'un projet de BTS IRIS.

En fait, il fallait qu'un utilisateur puisse faire des polygones sur une image et sauvegarder la forme créée.

Voila, encore merci et bonne continuation ;)
Messages postés
170
Date d'inscription
mercredi 18 juin 2003
Statut
Membre
Dernière intervention
11 mai 2009

Salut Naarguileh,

Effectivement ton lien est vraiment sympa. C'est surtout une exploitation complète et OPTIMISER de cette technique... ca pourrait bien me redonner un coup de foué pour avancé le projet de mini illustrator en ligne, étant donné que j'avais déjà gérer toute la partie de gestion de calque, de document.

Est-ce que ton travail de sauvegarde en XML est du code ouvert?
Messages postés
17
Date d'inscription
samedi 15 mars 2003
Statut
Membre
Dernière intervention
29 avril 2008

Salut à tous,

Vous devriez jeter un œil ici aussi si vous voulez : http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

C'est super bien foutu je trouve, et cross browser.

Je m'en suis servi au boulot avec une autre de ses librairies pour du drag'n drop, et j'ai du effectivement coder un système de stockage en XML comme l'a évoqué MAX3315 plus haut.
Messages postés
1
Date d'inscription
jeudi 3 mai 2007
Statut
Membre
Dernière intervention
22 avril 2008

Super code, je vais tenter de m'en inspirer.

J'essaye de trouver le moyen de pouvoir tracer une ou plusieurs formes (cercle, rectangle avec fond transparent) sur une image (photo) le tout en javascript. Le but est de pouvoir définir des commentaires à des zones d'une image. Une fois définis, ces commentaires apparaitraient comme popup lors du passage de la souris dessus (à la mode facebook).
Afficher les 19 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.