Как добавить click-and-drag для масштабирования изображения в SVG? - PullRequest
Новая
       1

Как добавить click-and-drag для масштабирования изображения в SVG?

5 голосов
/ 04 сентября 2011

Я хочу, чтобы посетители масштабировали изображение с помощью перетаскивания мышью: 

<html>
    <body>
        <svg>
            <image>

Есть ли библиотека JavaScript, которая мне поможет?

Я замечаю У Рафаэля есть методы перетаскивания , но мне все равно придется написать много JS:

  1. Найдите углы изображения
  2. Сделать область возле углов выбираемой
  3. Нарисуйте значки для углов, чтобы можно было выбрать их
  4. Добавить клик, перетащить в углы
  5. Обновить размеры изображения

Я мог бы сделать все это, но это отнимает много времени. Есть ли скрипт с открытым исходным кодом, который я должен использовать? Другие предложения?

Ответы [ 3 ]

5 голосов
/ 16 сентября 2011

Я нашел это решение в этом посте: Draggables и Resizables в SVG .

В ответе вы найдете ссылку jsfiddle: http://jsfiddle.net/tmkfs/. Вы можете изменить размер окна, щелкнув и перетащив его в угол.Надеюсь, этот код поможет вам.

1 голос
/ 15 сентября 2011

Вы должны взглянуть на SvgKit Он предоставляет хорошую библиотеку для манипулирования - генерирует svg, включая обработку событий, используя javascript.

Из официальной документации:

Дополнения к объекту SVGKit для обработки событий. В SVG это может быть сложно получить от координат мыши до локальных координат. SVGEvent имеет подпрограммы для включения перетаскиваемых предметов, вращающихся предметов и предотвратить панорамирование и масштабирование элементов.

События демо здесь .

1 голос
/ 05 сентября 2011

Не то, что я знаю. Мне нужно сделать то же самое, и я удивлен, что я еще не нашел плагин или даже пример того, как сделать это с Rahpeal.js. Так как многие люди хотят использовать SVG или Rapheal.js, я удивлен, что нет встроенного способа сделать это (я бы подумал, что Scale + Drag сделает это, но это не так. так легко, как казалось бы).

Мне нужна эта функциональность, поэтому я сам ее создавал. Я столкнулся с небольшим затруднением (задокументировано здесь: Перетаскивание Raphael.js со шкалой вызывает странное поведение при прыжке ), но просто заставил его работать. Когда я закончу, я могу опубликовать свое решение в jsfiddle или на github, когда я закончу, если хотите.

...