Динамическое изменение размеров полигонов SVG

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

Помимо использования SVG, есть ли другой способ изменить размер и перетащить графику многоугольника динамически?

источник

2012-01-20 user1159545

Вы можете самостоятельно работать с элементами SVG. В частности, вы можете найти точки многоугольника и добавить дескрипторы HTML-элементов, которые перетаскиваются с помощью jQuery. (Я предполагаю, что проблема заключается в том, что пользовательский интерфейс jQuery не работает с моделью позиционирования SVG.) Вот полный пример, который я только что написал (протестирован в Safari 5 и Firefox 9).

(Отказ от ответственности:. Я не обычный пользователь JQuery, этот код может быть unidiomatic способами, кроме того, не используя JQuery для всего)

<!DOCTYPE html> 
 
<html><head> 
 
    <title>untitled</title> 
 

 
    <style type="text/css" media="screen"> 
 
    .handle { 
 
     position: absolute; 
 
     border: 0.1em solid black; 
 
     width: 1em; 
 
     height: 1em; 
 
    } 
 
    </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 

 
    <script type="text/javascript"> 
 
    function draggablePolygon(polygon) { 
 
    var points = polygon.points; 
 
    var svgRoot = $(polygon).closest("svg"); 
 
    
 
    for (var i = 0; i < points.numberOfItems; i++) { 
 
     (function (i) { // close over variables for drag call back 
 
     var point = points.getItem(i); 
 

 
     var handle = document.createElement("div"); 
 
     handle.className = "handle"; 
 
     document.body.appendChild(handle); 
 

 
     var base = svgRoot.position(); 
 
     // center handles over polygon 
 
     var cs = window.getComputedStyle(handle, null); 
 
     base.left -= (parseInt(cs.width) + parseInt(cs.borderLeftWidth) + parseInt(cs.borderRightWidth))/2; 
 
     base.top -= (parseInt(cs.height) + parseInt(cs.borderTopWidth) + parseInt(cs.borderBottomWidth))/2; 
 

 
     handle.style.left = base.left + point.x + "px"; 
 
     handle.style.top = base.top + point.y + "px"; 
 

 
     $(handle).draggable({ 
 
      drag: function (event) { 
 
      setTimeout(function() { // jQuery apparently calls this *before* setting position, so defer 
 
       point.x = parseInt(handle.style.left) - base.left; 
 
       point.y = parseInt(handle.style.top) - base.top; 
 
      },0); 
 
      } 
 
     }); 
 
     }(i)); 
 
    } 
 
    } 
 
    </script> 
 
</head><body> 
 
    <p> 
 
    (Offset to test) 
 
    <svg id="theSVG" width="500" height="500" style="border: 2px inset #CCC;"> 
 
     <polygon id="x" points="200,200 100,100 100,1" fill="green" /> 
 
     <polygon id="y" points="200,200 100,100 1,100" fill="red" /> 
 
    </svg> 
 
    </p> 
 
    <script type="text/javascript"> 
 
    draggablePolygon(document.getElementById("x")); 
 
    draggablePolygon(document.getElementById("y")); 
 
    </script> 
 

 
</body></html>

Вы также можете прикрепить событие обработчик многоугольника SVG и реализует перетаскивание (я тестировал, и это может сработать), но тогда вам придется щелкнуть по текущим границам многоугольника, который является нетипичным интерфейсом и, возможно, сложным, и реализовать собственное тестирование на удар.

Для этого вы должны добавить обработчик onmousedown к элементу многоугольника. Затем извлеките свои точки, найдите, что находится в зоне действия щелчка, сохраните начальную позицию мыши, а затем обработчик onmousemove измените x и y точки, когда положение мыши изменится.

источник

2012-01-20 23:02:22

Спасибо тонну! Я работаю над перетаскиванием - щелчок внутри границ - это именно то, что я хочу. Также я пытаюсь обозначить эти многоугольники с помощью svg-text, но я не понял, как обновить текстовую позицию, изменяя размер полигона. Можете ли вы дать какой-либо намек? – user1159545

Конечно, я добавил намек. К сожалению, я не сохранил код, который я написал в первую очередь. –

Эй, я столкнулся с проблемой, что мне нужны обновленные координаты многоугольника, поскольку я изменяю его размер. Когда я проверяю измененный элемент многоугольника с firebug, он все еще имеет старые точки в нем, хотя он был изменен. Любая идея, как это решить? – user1159545

Динамическое изменение размеров полигонов SVG

ответ

Смежные вопросы