Redimensionar y arrastrar polígonos SVG dinámicamente

Tengo dificultades para encontrar una forma de cambiar el tamaño y arrastrar ding polígono svg con el mouse. Desafortunadamente jQueryUi no funciona para los elementos svg. También revisé la biblioteca de Raphael, pero no puedo encontrar documentación/fragmentos sobre cómo realizar esto.Redimensionar y arrastrar polígonos SVG dinámicamente

Además de usar SVG, ¿hay alguna otra manera de cambiar el tamaño y arrastrar un gráfico de polígono de forma dinámica?

Fuente

2012-01-20 user1159545

Puede trabajar con los elementos SVG usted mismo. En particular, puede encontrar los puntos del polígono y agregar identificadores de elementos HTML que se pueden arrastrar con jQuery. (Asumo que el problema que tienes es que jQuery UI no funciona con el modelo de posicionamiento SVG.) Aquí hay un ejemplo completo que acabo de escribir (probado en Safari 5 y Firefox 9).

(Negación:. No soy un usuario regular de jQuery, este código puede ser unidiomatic de maneras además de no usar jQuery para todo)

<!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>

También puede adjuntar un evento manejar el polígono SVG e implementar el arrastre (lo probé y esto podría funcionar), pero luego tendría que hacer clic dentro de los límites actuales del polígono, que es una interfaz de usuario atípica y posiblemente complicada, e implementar su propia prueba de impacto.

Para esto, agregaría un controlador onmousedown al elemento de polígono. A continuación, recupere sus puntos, encuentre cuál está en el rango de la posición de clic, almacene la posición inicial del mouse y luego haga que un manejador onmousemove modifique y y a medida que cambia la posición del mouse.

Fuente

2012-01-20 23:02:22

¡Gracias ton! Estoy trabajando en arrastrar y hacer clic dentro de los límites es exactamente lo que quiero. También estoy tratando de etiquetar estos polígonos con svg-text, pero no descubrí cómo actualizar la posición del texto, mientras cambio el tamaño del polígono. ¿Puedes darme alguna pista? – user1159545

Claro, agregué una pista. Desafortunadamente no guardé el código que escribí primero. –

Oye, estoy enfrentando el problema, que necesito las coordenadas actualizadas del polígono a medida que lo estoy redimensionando. Cuando inspecciono un elemento de polígono redimensionado con Firebug, todavía tiene los puntos antiguos, aunque se cambió de tamaño. Alguna idea de como resolver esto? – user1159545

Redimensionar y arrastrar polígonos SVG dinámicamente

Respuesta

Cuestiones relacionadas