polígonos representación SVG en la biblioteca Rafael Javascript

Question

Por lo que yo sé, no existe actualmente ninguna manera de mostrar polígonos SVG en la biblioteca Rafael Javascript. Estoy construyendo una aplicación que necesita leer en SVG y los muestra en Raphael, sin embargo, muchos de estos SVG usan polígonos.

Por ejemplo, estoy leyendo en un SVG con un polígono en este formato:

<polygon points="260.5,627.75 259.563,628.313 258.625,628.563 258.25... 

Por lo tanto, me pregunto ... ¿hay una manera de convertir los puntos de polígonos en un camino que Podría dibujar en Raphael? He visto algunas aplicaciones que usan Python y PHP, pero hasta ahora no puedo encontrar nada que sea estrictamente JavaScript.

Cualquier ayuda sería muy apreciada. Gracias

Answer 1

Ver Paper.path. Puedes especificar tu propia ruta. P.ej. un triángulo rojo:

paper.path('M 50 0 L 100 100 L 0 100 Z').attr('fill', 'red') 

En respuesta a su edición:

Usted debe ser capaz de tomar los puntos de atributo, como una cadena, y reemplazar todas las coordenadas en el formato x,y con L x,y - - Eso hará una ruta válida para SVG. Sin embargo, es posible que desee un comando moveTo inicialmente. Por lo tanto, la siguiente:

260.5,627.75 259.563,628.313 258.625,628.563 

se convertiría en:

M 260.5,627.75 L 259.563,628.313 L 258.625,628.563 

Raphael parece querer enteros, no decimales.Por lo que tendría que ser:

M 260,627 L 259,628 L 258,628 

Para que esto suceda:

var polygonPoints = '260.5,627.75 259.563,628.313 258.625,628.563'; 
var convertedPath = polygonPoints.replace(/([0-9.]+),([0-9.]+)/g, function($0, x, y) { 
    return 'L ' + Math.floor(x) + ',' + Math.floor(y) + ' '; 
}).replace(/^L/, 'M'); // replace first L with M (moveTo) 

Answer 2

Si lo que desea que funcione:

var polys = document.querySelectorAll('polygon,polyline'); 
Array.prototype.forEach.call(polys,convertPolyToPath); 

function convertPolyToPath(poly){ 
    var path = document.createElementNS('http://www.w3.org/2000/svg','path'); 
    var points = poly.getAttribute('points').split(/\s+|,/); 
    var x0=points.shift(), y0=points.shift(); 
    var pathdata = 'M'+x0+','+y0+'L'+points.join(); 
    if (poly.tagName=='polygon') pathdata+='z'; 
    path.setAttribute('d',pathdata); 
    poly.parentNode.replaceChild(poly,path); 
    return path; 
} 

Si quieres rodar en el SVG DOM:

function convertPolyToPath(poly){ 
    var path = document.createElementNS(poly.ownerSVGElement.namespaceURI,'path'); 
    var segs = path.pathSegList; 
    var pts = poly.points; 
    for (var i=0,len=pts.numberOfItems;i<len;++i){ 
    var pt = pts.getItem(i); 
    var func = i==0 ? 'createSVGPathSegMovetoAbs' : 'createSVGPathSegLinetoAbs'; 
    segs.appendItem(path[func](pt.x,pt.y)) 
    } 
    if (poly.tagName=='polygon') segs.appendItem(path.createSVGPathSegClosePath()); 
    poly.parentNode.replaceChild(poly,path); 
    return path; 
} 

Editar: Ver las dos anteriores en acción aquí:
http://phrogz.net/svg/convert_polys_to_paths.svg

Por último, si usted tiene los puntos como una cadena (.getAttribute('points')) y sólo quiere los datos de trayectoria:

function svgPolyPointsToPathData(points,closePath){ 
    points = points.split(/\s+|,/); 
    var pathdata = 'M'+points.shift()+','+points.shift()+'L'+points.join(); 
    if (closePath) pathdata+='z'; 
    return pathdata; 
} 

Answer 3

El más simple (y la mayoría solución compacta) es probablemente algo como esto, ya que los puntos en un polígono/polilínea son siempre absoluta:

polígono:

var pathstr = "M" + yourPolygonElm.getAttribute("points") + "Z"; 

polilínea:

var pathstr = "M" + yourPolylineElm.getAttribute("points"); 

Esto se debe a "L" no es realmente necesario en la cadena de ruta (el atributo "d"). "M" significa primero un movimiento absoluto, y luego todas las coordenadas que siguen son linetos absolutos implícitos (o si comienzas con "m" entonces obtienes linetos relativos).

Answer 4

puede usar http://readysetraphael.com/ para convertir el archivo SVG completo a un objeto raphael, ¡es más fácil!

Answer 5

me ocurrió una solución, espero que esta ayuda:

this.createPolygon(304,0,0,500,912,500,608,0,'red'); 

createPolygon: function(x1,y1,x2,y2,x3,y3,x4,y4,color){ 
    return this.stage.path('M '+x1+' '+y1+' L '+x2+' '+y2+' L '+x3+' '+y3+' L '+x4+' '+y4+' Z').attr('fill',color); 
}