30-03-2012, 08:35 AM
(29-03-2012, 07:09 PM)Argorate a écrit : http://raphaeljs.com/ ça fait joli, mais s'il faut décrire les zones a la main avec toutes les coordonnées des points dans le code, j'ai pas fini ^^ Comment définit-on les formes avec cet outil?
Car "ma" méthode utilise les <map> et du coup aucun problème de onmouseover, je définis les coordonnées en plaçant les points sur l'image (ça crée les coordonnées correspondant à la forme tout seul du coup...), le seul truc chiant c'est l'histoire des différentes couleurs qui oblige plusieurs images.
J'imagine que ta balise MAP utilise l'attribut Poly pour faire une zone bien tordue.
Tu dois donc avoir une succession de coordonnées à l'intérieur au format X1, Y1, X2, Y2, X3, Y3, ...
Convertir ça en chemin (path) pour SVG ou RaphaelJS devrait être super simple.
Pour faire court, il suffit d'utiliser l'attribut path avec une syntaxe proche de path="MX1 Y1 LX2 Y2 LX3 Y3 ... Z"
Le M indique à quelle coordonnée commence ton dessin
Le L demande à tracer une ligne vers les coordonnées sélectionnées
Le Z indique que le dessin est fermé
La conversion n'est vraiment pas compliquée et permet une intégration hyper rapide dans RaphaelJS. De cette manière, tu éviteras de mettre le doigt dans le SVG pure, ce qui semble te rebuter.
Maintenant, si tu veux dessiner tes propres formes, tu peux toujours utiliser SVG-Edit qui fonctionne avec un simple navigateur.
Le code généré est assez propre et facilement réutilisable.
A part utiliser SVG/RaphaelJS ou Canvas, je ne vois pas d'autre alternative à ton problème.
Quand on te dit qu'un projet est terminé à 90%, prépare toi pour les 90% suivant
Ninety-Ninety Rule
"Une guerre de religions, c'est quand deux peuples s'entretuent pour savoir qui a le meilleur ami imaginaire"
Vu sur IRC
Ninety-Ninety Rule
"Une guerre de religions, c'est quand deux peuples s'entretuent pour savoir qui a le meilleur ami imaginaire"
Vu sur IRC