SVG Zoom to Component - PullRequest
       15

SVG Zoom to Component

0 голосов
/ 30 марта 2012

Я пытаюсь реализовать опцию приближения к компоненту, когда пользователь нажимает клавишу 'e', ​​и она масштабируется прямо на компонент. Я хочу, чтобы для этого был только один уровень масштабирования, так как я делаю ползунок масштабирования для случая, когда пользователь хочет увеличить масштаб всей SVG с нарастающей скоростью.

Вот несколько скриншотов с примерами. 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

Для каждого из приведенных выше примеров я выбираю компонент с текстом «тестирование» и увеличиваю его.

Вот jsfiddle того, что я имею до сих пор http://jsfiddle.net/6Jg2A/3/

Под компонентом я имею в виду svg. Который содержит изображение, текст и прямоугольник.

Это еще не полностью работает. Например, если вы выберете розовый компонент и нажмете e для увеличения, вы увидите, что он действительно не масштабируется правильно.

Я думаю, что мне также нужно перевести компоненты, я просто пытаюсь понять, как это сделать.

Интересно, может ли кто-нибудь помочь. Спасибо.

Редактировать: Кроме того, коэффициент масштабирования должен быть динамическим в зависимости от размера компонента, я думаю. Другими словами, при увеличении масштаба компонента конечный результат должен быть увеличенным компонентом, который не зависит от его фактического размера. (Надеюсь это имеет смысл)

1 Ответ

1 голос
/ 30 марта 2012

Будет проще увеличить весь холст svg, а не каждый элемент в отдельности.Вы также захотите получить преобразование от элемента, к которому вы масштабируете, и настроить свойство translate холста.

Я обновил ваш JSFiddle, чтобы показать быструю и грязную альтернативу, котораяработы: http://jsfiddle.net/6Jg2A/5/

...