Zoom et de panoramique des images svg utilisant Raphael.js ou d'une autre bibliothèque [fermée]

Question

Je suis dans le besoin d'un petit script qui affiche une SVG (image vectorielle) dans un cadre qui a 2 fonctions;

1. L'image peut être éreinté (déplacé pour regarder les différentes parties de l'image svg avec le curseur) simmilar à google maps.

2. L'image SVG peut être zoomée et sur également à Google simmilar cartes sauf il n'y aura pas besoin de charger de nouvelles images que l'image est un vecteur.

Pour un script simmilar j'ai vu qui fonctionne avec des formats d'image normale voir http://jibbering.com/routeplanner/

Answer 1

Si quelqu'un est toujours intéressé: Je viens de découvrir cette mise en œuvre de Pan et Zoom pour Raphaël. Encore un projet très jeune, mais assez intéressant, je pense:

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

Démo en ligne ici:

Answer 2

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é.

J'ai tirais SVGPan Andrea dans un (je l'espère) plus convivial Raphäel plug-in :)

Vous devez d'abord apprendre comment installer une fonction qui étend Raphaël pour soutenir le zoom ... http://www.irunmywebsite.com/raphael/additionalhelp.html?q= addownmethodstocanvas

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

Vous pouvez essayer les scripts de page de test IE9 http: // par exemple. microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtml nécessite un peu de peaufinage avec ids, mais a bien fonctionné pour moi.

Je fini par utiliser le svg-pan-zoom qui est dérivé de SVGPan, mais permet zoomin / panoramique d'un élément de svg arbitraire au sein de votre HTML, et peut ajouter des contrôles.

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

Answer 3

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é.

Answer 4

J'ai tirais SVGPan Andrea dans un (je l'espère) plus convivial Raphäel plug-in :)

Answer 5

Vous devez d'abord apprendre comment installer une fonction qui étend Raphaël pour soutenir le zoom ... http://www.irunmywebsite.com/raphael/additionalhelp.html?q= addownmethodstocanvas

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

Answer 6

Vous pouvez essayer les scripts de page de test IE9 http: // par exemple. microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtml nécessite un peu de peaufinage avec ids, mais a bien fonctionné pour moi.

Answer 7

Je fini par utiliser le svg-pan-zoom qui est dérivé de SVGPan, mais permet zoomin / panoramique d'un élément de svg arbitraire au sein de votre HTML, et peut ajouter des contrôles.

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