{"id":87,"date":"2010-05-26T14:20:46","date_gmt":"2010-05-26T13:20:46","guid":{"rendered":"http:\/\/saladtomatonion.com\/blog\/?p=87"},"modified":"2019-09-06T14:43:30","modified_gmt":"2019-09-06T12:43:30","slug":"du-dessin-vectoriel-dans-une-page-web-sans-adobe-flash","status":"publish","type":"post","link":"https:\/\/saladtomatonion.com\/blog\/2010\/05\/26\/du-dessin-vectoriel-dans-une-page-web-sans-adobe-flash\/","title":{"rendered":"Du dessin vectoriel dans une page web… sans Adobe Flash"},"content":{"rendered":"

\"\"<\/a>Peu de personnes se sont frott\u00e9es au dessin interactif dans une page web. Lorsque l’on veut dessiner de fa\u00e7on vectorielle (c’est \u00e0 dire pour r\u00e9sumer que le dessin est \u00ab\u00a0lisse\u00a0\u00bb \u00e0 toutes les \u00e9chelles), on n’a pas r\u00e9ellement d’autre choix que d’utiliser du Flash (qui est une technologie propri\u00e9taire). Sauf si on s’int\u00e9resse au SVG, au VML, et \u00e0 Rapha\u00eblJS<\/a>.<\/p>\n

Je ne reviendrai pas sur le d\u00e9bat houleux entre Apple et Adobe concernant, entre autres, le portage d’un Flash Player sur les plateformes touch<\/em> (iPhone, iPad, iPod touch).\u00a0 Cependant, il se trouve que ce dont je vais parler ici fonctionne effectivement sur mon iPhone.<\/p>\n

Le SVG<\/a> (un exemple de fichier SVG ici<\/a>) c’est un format ouvert d\u00e9riv\u00e9 du XML destin\u00e9 \u00e0 d\u00e9crire des trac\u00e9s vectoriels. Le logiciel Inkscape<\/a>, un Illustrator open-source sauvegarde les fichiers justement dans ce format. Un format XML, \u00e7a veut donc dire des \u00e9l\u00e9ments du DOM manipulables comme toutes les autres balises HTML!<\/p>\n

Il existe une limite. Le SVG est bien interpr\u00e9t\u00e9 par Firefox, Opera ou Safari, mais Internet Explorer ne sait pas quoi en faire, pas avant la version 9 apparemment. Cependant, il sait afficher un autre type de description vectorielle : le VML<\/a>.<\/p>\n

C’est l\u00e0 qu’intervient Rapha\u00eblJS<\/a> en se positionnant comme couche d’abstraction sur le choix SVG\/VML, et comme outil efficace pour la cr\u00e9ation et la manipulation des balises de dessin.<\/p>\n

Rapha\u00eblJS propose une interface simple pour dessiner des primitives ou des courbes param\u00e9tr\u00e9es, de changer leurs param\u00e8tres, et d’animer tout \u00e7a.<\/p>\n

Tout commence par la d\u00e9finition d’une surface de dessin, qu’on peut cr\u00e9er \u00e0 partir de rien, ou bien inclure dans un \u00e9l\u00e9ment existant. Voici un exemple :<\/p>\n

\/*\n  Cr\u00e9ation d'une surface de dessin\n  \u00e0 l'int\u00e9rieur de l'\u00e9l\u00e9ment d'id \"mondiv\"\n  et de 500 pixels de c\u00f4t\u00e9\n*\/\nsurface = Raphael(\"mondiv\", 500, 500);\n<\/pre>\n
C’est ensuite cette surface qui dispose des m\u00e9thodes utilis\u00e9es pour le dessin<\/p>\n
obj = surface.line(0,0,100,100);\n<\/pre>\n
On remarque que j’ai gard\u00e9 une r\u00e9f\u00e9rence sur l’objet cr\u00e9\u00e9 (obj), mais j’aurais tr\u00e8s bien pu ne pas le faire. Dans mon cas, je peux r\u00e9utiliser cette r\u00e9f\u00e9rence pour d’autres op\u00e9rations :<\/p>\n
obj.attr(\"stroke-width\",5).move(50,50);\n\/\/ \u00e9paisseur du trait \u00e0 5\n\/\/ d\u00e9placement aux coordonn\u00e9es 50,50<\/pre>\n
Les op\u00e9rations sur les objets de dessins revoient toujours une r\u00e9f\u00e9rence sur eux-m\u00eames, je peux donc encha\u00eener les commandes!<\/p>\n
Je vous enjoins \u00e0 aller voir les exemples sur le site de Rapha\u00eblJS<\/a>, et particuli\u00e8rement le tigre<\/a> ou le curver<\/a>. Essayez le zoom de page pour plonger dans les d\u00e9tails des dessins!<\/p>\n
Et enfin, un exemple maison. Cliquez dans l’image pour un peu d’interaction!<\/p>\n