0/5 (19 avis)
Vue 40 732 fois - Téléchargée 1 613 fois
//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; }
28 mai 2009 à 09:10
27 mai 2009 à 20:56
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 ;)
29 avril 2008 à 13:32
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?
29 avril 2008 à 12:08
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.
22 avril 2008 à 17:04
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.