2012-03-29 6 views
0

J'essaie d'implémenter une option de zoom vers un composant où l'utilisateur appuie sur la touche 'e' et effectue un zoom sur le composant. Je veux seulement qu'il y ait un niveau de zoom pour cela, puisque je fais un curseur de zoom pour quand l'utilisateur veut zoomer le svg entier à un rythme incrémental.SVG Zoom au composant

Voici quelques captures d'écran exemples http://i274.photobucket.com/albums/jj265/Erebel55/before_zoom.png
http://i274.photobucket.com/albums/jj265/Erebel55/after_zoom.png

http://i274.photobucket.com/albums/jj265/Erebel55/before_zoom2.png
http://i274.photobucket.com/albums/jj265/Erebel55/after_zoom2.png

Pour chacun des exemples ci-dessus, je sélectionne le composant avec le texte « testing » et un zoom sur il.

Voici le jsFiddle de ce que j'ai jusqu'à présent http://jsfiddle.net/6Jg2A/3/

En composant, je veux dire un dans le svg. Qui contient une image, du texte et rect.

Il ne fonctionne pas encore complètement. Par exemple, si vous sélectionnez le composant rose et appuyez sur e pour zoomer, vous pouvez voir qu'il ne fait pas vraiment un zoom correct.

Je pense que j'ai besoin de traduire les composants aussi, j'essaie juste de comprendre comment faire cela. Vous vous demandez si quelqu'un pourrait vous aider? Merci. Edit: Aussi, le facteur de zoom doit être dynamique en fonction de la taille des composants, je pense. En d'autres termes, lorsque vous effectuez un zoom avant sur un composant, le résultat final doit être un composant zoomé qui ne dépend pas de sa taille réelle. (J'espère que cela a du sens)

Répondre

1

Il sera plus facile de zoomer sur la totalité de la toile svg, pas chaque élément séparément. Vous souhaiterez également récupérer la transformation de l'élément sur lequel vous effectuez un zoom et ajuster la propriété translate de la zone de dessin.

J'ai mis à jour votre jsFiddle montrer une alternative rapide et sale qui fonctionne: http://jsfiddle.net/6Jg2A/5/

+0

Merci beaucoup pour ces conseils! Cela a l'air très bien. Si je voulais augmenter le facteur d'échelle pour dire 4, je suppose que je devrais également changer le facteur de traduction. Aussi ... disons que nous avons 2 composants. Le composant A est plus grand que le composant B. Cependant, si j'effectue deux zooms séparés sur A et B, ils devraient avoir la même taille (après le zoom), puis revenir à la position précédente (des tailles différentes). Par conséquent, je pense que je dois faire quelques calculs basés sur la taille des composants pour le facteur de zoom ou quelque chose comme ça. Faites-moi savoir si cela a un sens. – erebel55

+0

Je vais modifier la question originale pour inclure cela, désolé pour une longue lecture. – erebel55