web-dev-qa-db-fra.com

Zoom et panoramique d'images svg à l'aide de raphael.js ou d'une autre bibliothèque js

J'ai besoin d'un petit script qui affiche un fichier SVG (image vectorielle) dans un cadre doté de 2 fonctions.

  1. L’image peut être balayée (déplacée pour regarder différentes parties de L’image svg avec le curseur) de la même manière que pour google maps.

  2. L’image SVG peut être agrandie et réduite de la même manière, même sur des cartes Google , Mais il n’est pas nécessaire de charger de nouvelles images car l’image est un vecteur.

Pour un script similaire, j'ai vu qu'il fonctionne avec les formats d'image normaux, voir http://jibbering.com/routeplanner/

javascriptsvgraphael
24
Chandan Jog

Si quelqu'un est toujours intéressé, je viens de trouver cette implémentation de Panoramique et zoom pour Raphaël. Encore un très jeune projet, mais assez intéressant, je pense:

https://github.com/escobar5/raphael-pan-zoom

Démo en ligne ici: http://htmlpreview.github.com/?https://raw.github.com/escobar5/raphael-pan-zoom/master/examples/complete-map/index. html

16
Daniel Alder

Raphaël est bon, mais pas assez bon. 

Consultez cette page: http://code.google.com/p/svgpan/ . Il fait exactement ce que vous avez demandé.

20
Washa Wu

Le SVGPan d’Andrea a été transformé en un plugin plus convivial (- espérons-le) Raphäel :)

12
Daniel Assange

Vous devez d’abord apprendre à installer une fonction qui étend Raphael à la prise en charge du zoom ... Http://www.irunmywebsite.com/raphael/additionalhelp.html?q=addownmethodstocanvas

Ensuite, vous voulez implémenter le plugin de zoom de Wout ... Http://github.com/wout/raphael-zoom

4
Chasbeen

Vous pouvez essayer les scripts de la page de test IE9 http://ie.Microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtml Nécessite un petit ajustement avec les identifiants, mais a bien fonctionné pour moi.

1
Spadar Shut

J'ai fini par utiliser le svg-pan-zoom qui est dérivé de SVGPan, mais permet d'effectuer un zoom/un panoramique d'un élément svg arbitraire dans votre code HTML et d'ajouter des contrôles. 

SVGPan fonctionne très bien si votre page complète est juste un SVG chargé (comme dans l'exemple de tigre), mais pas si votre svg est quelque part plus profond dans le code HTML. 

0
nathanvda