webentwicklung-frage-antwort-db.com.de

Zoomen und Schwenken von SVG-Bildern mit raphael.js oder einer anderen js-Bibliothek

Ich brauche ein kleines Skript, das ein SVG (Vektorbild) innerhalb eines Frames anzeigt, der 2 Funktionen hat.

  1. Das Bild kann verschoben werden (bewegt werden, um verschiedene Teile von Des svg-Bildes mit dem Cursor anzuzeigen), ähnlich wie bei Google Maps.

  2. Das SVG-Bild kann auch ähnlich wie bei Google-Karten (.____.) Vergrößert und verkleinert werden, es sei denn, Sie müssen keine neuen Bilder laden, da das Bild Ein Vektor ist.

Für ein ähnliches Skript habe ich gesehen, dass es mit normalen Bildformaten funktioniert, siehe http://jibbering.com/routeplanner/

24
Chandan Jog

Wenn noch jemand interessiert ist: Ich habe gerade diese Implementierung von Pan und Zoom für Raphael gefunden. Noch ein sehr junges Projekt, aber interessant genug denke ich:

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

Online-Demo hier: http://htmlpreview.github.com/?https://raw.github.com/escobar5/raphael-pan-zoom/master/examples/complete-map/index. html

16
Daniel Alder

Raffael ist gut, aber nicht gut genug. 

Schauen Sie sich diese Seite an: http://code.google.com/p/svgpan/ . Es macht genau das, wonach Sie gefragt haben.

20
Washa Wu

Ich habe Andreas SVGPan in ein (hoffentlich) freundlicheres Raphäel Plugin :) abgeleitet.

12
Daniel Assange

Zunächst müssen Sie lernen, wie Sie eine Funktion installieren, mit der Raphael das Zoomen unterstützt ... http://www.irunmywebsite.com/raphael/additionalhelp.html?q=addownmethodstocanvas

Als Nächstes möchten Sie das Zoom-Plugin von Wout implementieren ... http://github.com/wout/raphael-zoom

4
Chasbeen

Sie können die Skripts von der IE9-Testseite aus ausprobieren http://ie.Microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtml Erfordert ein wenig Optimierung der IDs, aber es hat für mich gut funktioniert.

1
Spadar Shut

Ich habe am Ende das svg-pan-zoom verwendet, das von SVGPan abgeleitet ist, aber das Zoomen/Schwenken eines beliebigen svg-Elements innerhalb Ihres HTML-Codes ermöglicht und Steuerelemente hinzufügen kann. 

SVGPan funktioniert gut, wenn Ihre komplette Seite nur eine geladene SVG-Datei ist (wie im Beispiel für Tiger), aber nicht, wenn sich Ihre SVG-Datei irgendwo tiefer in der HTML-Datei befindet. 

0
nathanvda