изменить размер группы элементов SVG

Question

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

Answer 1

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

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

НТН, Кевин