Как программно переместить полигон в SVG? - PullRequest
Новая
       16

Как программно переместить полигон в SVG?

5 голосов
/ 29 мая 2011

Здесь ( SVG, перетаскиваемый с использованием JQuery и Jquery-svg , принятый ответ) - это реализация функции перетаскивания для перемещения по кругу. Он основан на изменении атрибутов cx и cy объекта подвижного круга.

Как я могу перетаскивать многоугольник?

Как я могу использовать любой другой элемент, который не имеет cx, cy координат?

Должен ли я пересчитать все точки объекта?

Я надеюсь, что есть более простой способ. Я планирую использовать JavaScript + jQuery

1 Ответ

4 голосов
/ 30 мая 2011

Существует простой способ сделать это без пересчета точек.Вам просто нужно перевести форму, используя свойство transform.Допустим, у вас есть какая-либо фигура в вашем SVG (в случае, если я хочу показать вам, я собираюсь использовать элемент shape), и что вы можете перемещать эту фигуру только тогда, когда событие mousedown, затем вызывается mousemoveи что это действие заканчивается, когда кнопка мыши отпущена.Затем процедура выглядит следующим образом с использованием тегов jQuery и svg в качестве селекторов: 

$("svg").mousedown(function(e){
    /* Getting initial coordinates of pointer */
    var GetInitCoordx = e.clientX;
    var GetInitCoordy = e.clientY;

    /* When mouse is moved while down, then applies the transformation. */
    $(this).bind("mousemove.customName", function(e){
        $("svg").find("path").attr("transform", "translate("+String(e.clientX-GetInitCoordx)+","+String(e.clientY-GetInitCoordy)+")");
    });

    /* When mouse button is released, move event is unbind */
    $(this).mouseup(function(e){
        $(this).unbind("mousemove.customName");
    );}
});

Основная идея заключается в следующем.Я уже разработал приложение с использованием такого подхода, и оно отлично работало для меня в Chrome, IE9 и Opera.В любом случае, вы можете согреть меня, если я допустил ошибку в коде, но я хотел, чтобы вы получили то, что использованный мной подход очень прост в реализации.

Кроме того, помните, что выможно установить уникальные значения свойств для ваших элементов svg, чтобы вы могли идентифицировать их при выборе с помощью селекторов jQuery.

...