Ottieni la lunghezza di una riga SVG, tag rettangolo, poligono e cerchio

Question

Sono riuscito a trovare la lunghezza dei percorsi in svg, ma ora voglio trovare la lunghezza per i tag line, rect, poligono e circle da SVG, Sono davvero perso in questo momento e indizi? o ci sono già alcune funzioni come quella del percorso?

Answer 1

Nel caso in cui nessun altro vuole trovare la lunghezza del questi tag ho creato alcune funzioni per ciascuno di essi, li ho testati e ho detto che funzionano abbastanza bene, questo era quello di cui avevo bisogno.

var tools = { 


      /** 
      * 
      * Used to get the length of a rect 
      * 
      * @param el is the rect element ex $('.rect') 
      * @return the length of the rect in px 
      */ 
      getRectLength:function(el){ 
       var w = el.attr('width'); 
       var h = el.attr('height'); 

       return (w*2)+(h*2); 
      }, 

      /** 
      * 
      * Used to get the length of a Polygon 
      * 
      * @param el is the Polygon element ex $('.polygon') 
      * @return the length of the Polygon in px 
      */ 
      getPolygonLength:function(el){ 
       var points = el.attr('points'); 
       points = points.split(" "); 
       var x1 = null, x2, y1 = null, y2 , lineLength = 0, x3, y3; 
       for(var i = 0; i < points.length; i++){ 
        var coords = points[i].split(","); 
        if(x1 == null && y1 == null){ 

         if(/(\r\n|\n|\r)/gm.test(coords[0])){ 
          coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); 
          coords[0] = coords[0].replace(/\s+/g,""); 
         } 

         if(/(\r\n|\n|\r)/gm.test(coords[1])){ 
          coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); 
          coords[0] = coords[1].replace(/\s+/g,""); 
         } 

         x1 = coords[0]; 
         y1 = coords[1]; 
         x3 = coords[0]; 
         y3 = coords[1]; 

        }else{ 

         if(coords[0] != "" && coords[1] != ""){    

          if(/(\r\n|\n|\r)/gm.test(coords[0])){ 
           coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); 
           coords[0] = coords[0].replace(/\s+/g,""); 
          } 

          if(/(\r\n|\n|\r)/gm.test(coords[1])){ 
           coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); 
           coords[0] = coords[1].replace(/\s+/g,""); 
          } 

          x2 = coords[0]; 
          y2 = coords[1]; 

          lineLength += Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2)); 

          x1 = x2; 
          y1 = y2; 
          if(i == points.length-2){ 
           lineLength += Math.sqrt(Math.pow((x3-x1), 2)+Math.pow((y3-y1),2)); 
          } 

         } 
        } 

       } 
       return lineLength; 

      }, 

      /** 
      * 
      * Used to get the length of a line 
      * 
      * @param el is the line element ex $('.line') 
      * @return the length of the line in px 
      */ 
      getLineLength:function(el){ 
       var x1 = el.attr('x1'); 
       var x2 = el.attr('x2'); 
       var y1 = el.attr('y1'); 
       var y2 = el.attr('y2'); 
       var lineLength = Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2)); 
       return lineLength; 

      }, 

      /** 
      * 
      * Used to get the length of a circle 
      * 
      * @param el is the circle element 
      * @return the length of the circle in px 
      */ 
      getCircleLength:function(el){ 
       var r = el.attr('r'); 
       var circleLength = 2 * Math.PI * r; 
       return circleLength; 
      }, 


      /** 
      * 
      * Used to get the length of the path 
      * 
      * @param el is the path element 
      * @return the length of the path in px 
      */ 
      getPathLength:function(el){ 
       var pathCoords = el.get(0); 
       var pathLength = pathCoords.getTotalLength(); 
       return pathLength; 
      } 
     } 

Answer 2

penso che si sta guardando il problema in modo non corretto:

lunghezza rectangle = 2 * (width + height)

lunghezza della linea (utilizzare teorema di Pitagora per qualsiasi non verticale linea c^2 = a^2 + b^2) o utilizzare (x1 a x2) per orizzontale (Y1 a Y2) per verticale

lunghezza cerchio = 2 × π × raggio ... ecc

Answer 3

Ho cercato di usare la risposta specificato da ZetCoby per i poligoni, ma nei test ho trovato che la lunghezza del percorso ritorna è sbagliato.

Esempio:

<polygon points="10.524,10.524 10.524,24.525 24.525,24.525 24.525,10.524" style="fill:none;stroke-width:0.2;stroke:black"></polygon> 

Il poligono sopra dovrebbe avere una lunghezza di 56, ma la funzione getPolygonLength(el) restituisce un valore 61.79898987322332.

Ho scritto un algoritmo per calcolare correttamente la lunghezza del percorso di un poligono SVG, quindi ho pensato di doverlo restituire poiché questo è il primo hit su google durante la ricerca di questo problema.

Ecco la mia funzione. Godetevi ...

function polygon_length(el) { 
    var points = el.attr('points'); 
    points = points.split(' '); 
    if (points.length > 1) { 
    function coord(c_str) { 
     var c = c_str.split(','); 
     if (c.length != 2) { 
     return; // return undefined 
     } 
     if (isNaN(c[0]) || isNaN(c[1])) { 
     return; 
     } 
     return [parseFloat(c[0]), parseFloat(c[1])]; 
    } 

    function dist(c1, c2) { 
     if (c1 != undefined && c2 != undefined) { 
     return Math.sqrt(Math.pow((c2[0]-c1[0]), 2) + Math.pow((c2[1]-c1[1]), 2)); 
     } else { 
     return 0; 
     } 
    } 

    var len = 0; 
    // measure polygon 
    if (points.length > 2) { 
     for (var i=0; i<points.length-1; i++) { 
     len += dist(coord(points[i]), coord(points[i+1])); 
     } 
    } 
    // measure line or measure polygon close line 
    len += dist(coord(points[0]), coord(points[points.length-1])); 
    return len; 
    } else { 
    return 0; 
    } 
} 

Answer 4

In SVG 2 tutti gli elementi della geometria avranno una proprietà lunghezza di percorso, ma come di maggio 2017 questo è ancora da attuare nella maggior parte dei browser.

Vedere https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement per ulteriori informazioni.

Possiamo futuro risposta s' prova @zetcoby con:

if(el.pathLength) { 
    return el.pathLength; 
} 
else { 
    // rest of code... 
}