all html : Le portail des webmaster

liste des forums liste des discussions Participer à la discussion

Message publié le jeudi 31 décembre 2009 - 11h10 par Tyra3l.

Bonjour à tous,

Je bloque sur un problème en javascript :

en effet je dois pouvoir créer un cercle de diamètre x (x étant un rayon en km prédéfini) et pouvoir diminuer ou agrandir le rayon de ce cercle avec la souris en maintenant le clic sur le bord du cercle et en tirant ou poussant (un peu à la manière d'un drag & resize...). Le cercle doit aussi diminuer ou s'agrandir en même temps que la souris... (pas que le cercle diminue d'un coup lorsqu'on lâche le clic...).

J'ai déjà un code le faisant mais en utilisant une image avec ce code :

<script type="text/javascript">

/* ... Coordonnées à accorder avec l'API Google Maps lors de l'intégration ... */

var ox=false, oy=false, centrex=700, centrey=450;

function agrandit()
{
ox=document.getElementById('carte').offsetLeft;
oy=document.getElementById('carte').offsetTop;
}

/* ... Tâche exécutée lors du relachement du bouton de la souris ... */

window.onmouseup = function ()
{
ox=false;
};

/* ... Tâche exécutée lorsque l'on bouge la souris ... */
/* ... Récupération des coordonnées du curseur de la souris ... */
/* ... Actions d'agrandissement ou de rétrécissement sur l'image ... */

window.onmousemove = function (e)
{
e = e || window.event;
var x = e.clientX, y = e.clientY;
/* ... Attention ox !== false est différent de ox ou != ox ... */
if(ox!==false)
{
var rayon=Math.round(Math.sqrt(Math.pow(x-ox-centrex,2)+Math.pow(y-oy-centrey,2)));
document.getElementById('disque').width=2*rayon;
document.getElementById('disque').style.left=(centrex-rayon)+'px';
document.getElementById('disque').style.top=(centrey-rayon)+'px';
}
};
</script>

Malheureusement ça ne répond pas exactement à ce que je souhaite, il faut vraiment que le cercle (voire le disque) se dessine et que je puisse modifier son rayon grâce à la souris.

J'ai vu le code de jhenaff pour drag & resize de div, ici : http://www.javascriptfr.com/codes/DRAG-AND-DROP-REDIMENSIONNEMENT_39451.aspx, j'aimerai bien un truc dans le genre mais pour un cercle et non des div...

Enfin le cercle doit stocker son rayon dans une variable car après ce cercle servira pour une intégration de géolocalisation avec l'API google maps...

J'ai fait pas mal de recherches et de tests par moi-même mais en vain vu mon niveau en JS...

Merci d'avance si vous pouviez me redépanner...

• participer

Message publié le jeudi 31 décembre 2009 - 11h46 par Bul. mon site : http://bul.fr.nf m'écrire : http://bul.chez.com/mas/?bul

bonjour,

>>..que le cercle (voire le disque) se dessine et que je puisse
>>modifier son rayon grâce à la souris...
pas sûr que cela soit aussi simple (?)

avec les "anciennes" versions des navigateurs,
il y avait incompatibilité pour dessiner
FF : XUL IE : urn:schemas-microsoft-com:vml
( les autres navigateurs, mon foie, je ne sais pas )

avec les nouvelles versions, rechercher du coté de "CANVAS" ?
il existe probablement des script qui le fassent
en tenant compte de ces incompatibilité (?) si elles
n'ont pas été levées.
je n'ai pas eu l'occasion de faire.

après, changer la taille de ce cercle/disque
n'en est que l'application
( et rien à voir avec le redimensionnement d'un div, d'une
image... qui ne fait que jouer avec le ...width/...height )

@+

• participer

Message publié le vendredi 01 janvier 2010 - 10h44 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

Joli Bul !...

Je ne savais pas que ceci fusse possible !... je te remercie Beaucoup pour cette classe que je ne connaissait pas ... mais qui me servira Beaucoup !...

@ Tyra3l .. https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes#section_10

je pense que ce que tu devrais faire, c'est :

lors du 'mousedown', tu crées un nouveau cercle avec pour centre le centre de la div conteneur et pour rayon la position de la souris- la position du centre ...

Durant le déplacement, idem, tu recrées +/- systématiquement l'objet, ou fouille du coté des fonctions de redimensionnement ... fais un test de rapidité et fluidité d'exécution !

lors du mouseup, soit tu recrées à nouveau une nouvelle image avec canvas ... soit tu récupère le rayon et le centre pour aller faire construire une image en php (ajax) tout en sauvegardant les données ...

Tout dépend du But final de ton script !


ça n'a pas l'air bien complexe, ... mais c'est un Bon code pour commencer l'année !...

@++

• participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.