Dessiner des lignes sur votre page web
Soyez le premier à donner votre avis sur cette source.
Vue 39 342 fois - Téléchargée 1 559 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
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
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; "> </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; "> </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; "> </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
- Dessin en pointillés a relier
- Dessin pointillé a relier - Meilleures réponses
- Html tracer une ligne - Meilleures réponses
- Relier avec des fleches - Forum - Flash
- Dessiner un rectangle en langage c - Forum - C
- Dessin turtle python - Guide
- C / C++ / C++.NET : Dessiner un rectangle - Guide
- Canvas dessiner avec la souris - Guide
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 ;)
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?
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.
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).
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.