begin process at 2012 02 11 23:52:46
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > DESSINER DES LIGNES SUR VOTRE PAGE WEB

DESSINER DES LIGNES SUR VOTRE PAGE WEB


 Information sur la source

Note :
10 / 10 - par 3 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :ligne, tracer, segment, dessiner, drawline Niveau :Débutant Date de création :24/03/2006 Vu / téléchargé :29 375 / 1 153

Auteur : MaX3315

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (19)
Ajouter un commentaire et/ou une note


 Description

Cliquez pour voir la capture en taille normale
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

  • //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;
  • }
//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

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture ONGLET À TABULATION MULTI BLOC
Source avec Zip SHOWMODALDIALOG POUR TOUS LES NAVIGATEURS MODERNES
Source avec Zip Source avec une capture AUTO SCROLLER DE NEWS
Source avec Zip Source avec une capture GÉNÉRATEUR DE CHAÎNE POUR LA FONCTION DATE() DE PHP4
Source avec Zip Source avec une capture MASQUAGE DES EMAILS AUX ROBOTS DE RÉCUPÉRATION D'EMAILS (ANT...

 Sources de la même categorie

Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS par kazma
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture DESSINER DES CERCLES/DISQUES/LIGNES EN JAVASCRIPT par macsou01
Source avec Zip ENLEVER LA LIGNE POINTILLÉE QUI ENTOURE LE SWF par Sylouric
Source avec Zip INVITE DE COMMANDE par stfou
Source avec Zip QUI EST EN LIGNE - TEMPS PRESQUE RÉEL - JAVASCRIPT ET PHP par josh666
Source avec Zip QUELQUES LIGNES - FAIRE DES FIGURES EN TRAÇANT DES LIGNES par bultez

Commentaires et avis

Commentaire de polo998 le 24/03/2006 22:32:48

franchement y a de l'idéé , ca pourrait servir dans plein de choses
moi perso je cherchai exactement ce script pour mon map viewer ...
mais une pitie question :  une fois la ligne tracée je voudrai que sa position reste meme si
j'en trace une autre ... ou sinon comment recupérer les position de x et y a la fin du tracé ( genre endX et endY,
enfin bref de quoi pouvoir retracer la ligne automatiquement meme apres un reload
merci a ceux qui resoudront mon probleme et puis surtout épargnez mon ignorance en javascript je debute hihi...
sinon jmet bien un petit 10/10 (un grand jveu dire lol)

Commentaire de MaX3315 le 24/03/2006 22:40:50

Faut dire que j'ai posté ce script pour compléter le script de bultez avec son calculateur de distance. Donc l'important dans cette soucre était que la fontion qui trace la ligne. Après de quel manière on obtient les coordonnées j'ai pas travaillé le truc de cet exemple car pour ma par ca ne faisait pas partit de ma problématique.

Mais je pense que je posterai une version plus puissante permettant de dessiner de multiples lignes, des formes, des polygones.... Combiner à une libriaie de dessin côté serveur tel que GB cela peus devenir vraiment intéressant :-)

La suite à venir donc. Alors un peu de patience Polo998 ;-)

Commentaire de cube45 le 25/03/2006 13:04:40

Le code marche impeccable sous IE 6 mais sous Opéra il fait pas des points mais des batons (pas . mais | O_o).Je pense que, par soucis de compatibilité, il vaudrait mieux mettre des . et non des div avec une couleur de fond.Pour Polo998, en javascript on ne peut pas sauvegarder quelque chose après un reload sauf avec des cookies ou du PHP.;-)

Commentaire de MaX3315 le 25/03/2006 18:57:21

En fait la solution au problème sous Opera c'est que dans mes div j'ai mis un espace &nbsp;. Et j'ai précisé en style font-size:1px;

Ce qu'il est préféralbe mais je suis allez au plus vite c'est d'insérer à la place de cet espace ume image transparente de 1px x 1px.

J'en prends note est corrigeré cela dans une version un peus plus aboutis de ce script (epaisseur de la ligne, dégradés, etc...)

Commentaire de polo998 le 25/03/2006 22:55:35

<< en javascript on ne peut pas sauvegarder quelque chose après un reload sauf avec des cookies ou du PHP. >>
uiii je sais c'est daiileur ce que j'ai deja prévu dans un piti script en php mais mon problème n'est pas la ...
moi ce qui m'importe c'est de faire passer la valeur des positions de x et y a la fin du tracé dans une url pointant vers mon script php.
sinon comme me l'a conseiller MaX3315 je patienterai ou je chercherai comment faire a partir du code de bultez .
vla et puis chez moi le script ne fonctionne pas avec mozilla (mais ca doit etre moi je crois)

Commentaire de MaX3315 le 26/03/2006 09:17:32

Je me lance dans la transformation de ce code en mini-illustrator.

L'idée et de stocké dans des objets (layers) des listes d'objet (formes) qui eux même contiennent une liste d'object (lignes).

Il s'agira en gros d'un liste de liste de liste. :p
Sous cette forme il sera très facile de créer une liste sauvegardable dans un format texte ou plutôt XML. UIl suffira de générer ce code XML, de le mettre dans un textarea et de posté le formulaire vers un script serveur pour la sauvegarde, ou encore la génération d'une image via du GD...

Bref je m'attaque dès aujoud'hui à ce projet :-)
Si vous êtes intérésser pour suivre l'évolution de ce projet je vous invite à me communiquer vos coordonnée par Message privé. Car je ne posterai sur Codes sources que la version finie et fonctionnelle.

Commentaire de Krackoum le 05/06/2006 21:04:43

cool , perso je cherche à realiser une interface de dessin ( genre paint)
et grossomodo:
pouvoir charger une image et la modifier en ligne puis la sauvegarder, ou la poster ds un forum ...
ce qui donne à un gone la possibilité de colorier dessiner et publier son dessin =)
je te demanderai par mp comme tu l indique pour savoir où ca en est ^_°

Commentaire de MaX3315 le 08/06/2006 18:08:28

>>Krackoum
Le projet de mini Illustrator est en cours à l'adresse suivante:
http://codessources.votre-web.com/js/myIllustrator/

Ce qui comme à fonctionner:
- les calques (ajout/suppression  cf le - et +)
- le niveau d'opacité des calque  cf saisie audessus de la liste)
- le multi document
- le tracé des lignes
- les propriétés des lignes couleur, epaisseur, espacement.
- la gestion de la boite à outils (Pour l'instant il n'y a que l'outil ligne, mais il sera aisé de créer d'auter outils (rectangle, cerlcle, spirale, etc...)

ATTENTION: aucun test sur vos saisies clavier n'est effectué donc faites bien attention à bien renseigner des entiers (ou une couleur).


Ce que j'ai pas encore du totu traité:
-le format d'export  (XML maison ou SVG, le second me prendra plus de temps)
-l'export en image via php et GD....  beaucoup de boulot

Des pistes d'extension:
-gestion d'effets sur les calcuqes qui pourront être généré à l'export (hallo, ombre porté, etc...)

J'attends vos commentaires

NB: pour l'instant le script ne fonctionne que sous Firefox, mais il sera facillement ouvert à IE également (juste un petit problème d'interprètation des CSS qui cache la feuille du document sous IE).

Commentaire de ralecul le 27/06/2006 23:57:29

Tout simplement super comme idée ! -> 10/10

Je cherchais depuis longtemps un moyen de faire tourner une image en javascript (pour une boussole).
Et grâce à ta source je peut dessiner les aiguilles avec des div, génial ...

J'utilise donc ta source dans mon système de visite virtuelle : MyFlashPano (dans le fichier pano.js)
http://www.javascriptfr.com/codes/MYFLASHPANO-VERSION-JAVASCRIPT-SYSTEME-VISITE-VIRTUELLE-PANORAMA-360_38341.aspx

J'ai laissé tes commentaires, mais j'ai modifié légèrement ta source (point de départ et d'arrivée identique aux autres...)

Merci

Commentaire de Mickapro le 31/08/2006 16:49:02

Bravo, c'est exactement le script que je cherchais !

Commentaire de MaX3315 le 31/08/2006 17:24:05

Heureux que ca puisse servir :)

Commentaire de jediNoobiewan le 23/09/2006 16:43:37

Bravo pour ton code...par contre domage que ça prenne autant de ressources ^^

Commentaire de MaX3315 le 23/09/2006 16:52:59

C'est sur c'est pas de l'OnpenGL lol.
Pour baisser un peu l'usage du CPU tu peux éventuellement tracer des lignes en pointillées, cela fera autant de point en point (donc de div) à replacer.

Commentaire de MaX3315 le 23/09/2006 16:54:40

Oups... il fallait comprendre "de points en Moins" :)

Commentaire de CMcode le 22/04/2008 17:04:00

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).

Commentaire de NaarGuileh le 29/04/2008 12:08:35

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.

Commentaire de MaX3315 le 29/04/2008 13:32:17

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?

Commentaire de Aikanaru le 27/05/2009 20:56:49

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 ;)

Commentaire de MaX3315 le 28/05/2009 09:10:33

De rien c'est fait pour :)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

tracer une ligne verticale [ par aimie ] Bonjour !!je suis entrain de développer un éditeur de sommaire; pour cela, je voudrais tracer une ligne verticale me permettant d'aligner les titre et afficher une ligne ou un textarea après un clic sur un lien [ par aimie ] Bonjour !!je voudrais affiché une ligne ou un textarea après avoir cliqué sur un lien(tout ceci sans changer de fenêtre).En effet j'ai un code où j'ai popo-up communiquante [ par GoldPegasus ] voila j'ai un problème, j'aimerai changer la couleur d'une ligne d'un table a l'ouverture d'une pop-up. pour cela j'utilise windows.opener cependant Ajout de ligne dans un tableau en ajax [ par f6xara ] Bonjour, Voilà j'ai un problème sous IE seulement (sous firefox ça marche bien)J'ai fais une centrale de réservations en Ajax. Lors de l'ajout d'une p Ajout de ligne Array() [ par DomJ ] Salut tout le monde, je voudrais savoir comment faire un genre d'ajout de ligne dans un New arraycomme ceci par exemple:a=new Array();a[1]='Bonjours'e Incompréhention d'une ligne de code [ par BeebopMcFly ] Bonjour à tous !!Voici mon problème, j'ai besoin de savoir ce que signifie cette ligne de code.usr = `id | sed -e 's/^[^(]*(\([^)]*\)).*/\1/'`On a ess Afficher des cellules en fonction de l'état d'un groupe de boutons radio [ par fanfouer ] Bonjour,Je cherche a realiser un tableau a affichage variable en fonction de l'état d'un groupe de bouton radio.La structure de mon tableau est la sui Boutons sur zone clickable... [ par Bubuss ] Salut,Voilà mon problème :J'ai une ligne &lt;TR&gt; d'un tableau avec un evenement "onclick" et une fonction JS associée ainsi qu'un changement CSS su calendrier qui ne fonctionne pas [ par da vince ] Salut, I need some help...Pourquoi ça marche pas?J'ai pas de message d'erreur mais rien ne s'affiche dans le navigateur...PS: y-a-t-il moyen de joindr Exécuter une ligne de commande dos [ par lunnatick ] Bonjour, je voudrais savoir s'il est possible en java script d'exécuter une ligne de commande dos propre à windows xp, y-a-t-il un forumeur ici qui pu


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,792 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales