изменить размер группы элемента SVG - PullRequest
1 голос
/ 21 октября 2010

Я работаю над приложением SVG и теперь хочу позволить пользователю изменить размер объекта с помощью перетаскиваемых углов, очень похоже на SVG-edit (http://svg -edit.googlecode.com / svn / trunk / editor / svg-editor.html).Функциональность должна работать следующим образом: пользователь выбирает объект SVG, перетаскивает его на основное «холст» и, однажды на «холсте», появляются четыре угла снаружи объекта, пользователь может перетаскивать каждую из угловых точек.& перетащите, чтобы увеличить объект.Объекты будут иметь прямоугольную форму и созданы с использованием контуров, без использования функции SVG 'rect'.Есть ли у кого-нибудь предложения относительно того, как это должно быть реализовано?Заранее спасибо

1 Ответ

1 голос
/ 19 июля 2011

Этого можно достичь, обернув элементы, размер которых вы изменяете, в элемент ag, а затем применив преобразование к этому элементу.Давайте возьмем простой случай перетаскивания правого нижнего угла.Сначала вам нужно определить ограничивающую рамку данного элемента.Вы можете добавить события mousedown, mousemove, mouseup к этому элементу или использовать некоторый элемент-заполнитель (например, прямоугольник), который служит ручкой для перетаскивания для изменения размера.Здесь важно отметить, что если вы отслеживаете, используя маленькую форму, плохие вещи обязательно произойдут.Пользователь легко перетаскивает его так быстро, что мышь выходит за пределы формы, тем самым отменяя операцию перетаскивания.Чтобы обойти это, я обычно использую прозрачную форму поверх всего холста с перевернутыми точечными событиями.Я регистрирую свои события отслеживания мыши там.Таким образом, вы можете отслеживать мышь, не беспокоясь о том, что вы выйдете из фигуры.

Итак, вернемся к изменению размера.Вам нужно будет сравнить текущую позицию с новой позицией.Я бы, вероятно, использовал бы отношение длины от длины слева вверху к длине справа внизу, разделенное на длину верхнего левого и нового правого нижнего угла, который ты перетаскиваешь.Теперь вы можете построить преобразование, которое масштабирует данный элемент на эту величину.Однако, здесь все становится немного сложнее, и это может быть, если у вас возникли трудности.Сначала вам нужно перевести верхний левый угол в начало координат, затем масштабировать, а затем перевести начало координат обратно.Это даст эффект оставления верхнего левого угла в его текущем местоположении при изменении размера остального содержимого элемента g.

HTH, Кевин

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...