Raphael JavascriptライブラリのSVGポリゴンをレンダリングする

Question

私が知る限り、現在、Raphael JavascriptライブラリにSVGポリゴンを表示する方法はありません。私はSVGで読み込む必要のあるアプリケーションを構築していて、それらをRaphaelで表示しますが、これらのSVGの多くはポリゴンを使用しています。例えば、私はこの形式の多角形でSVGに読んでいる

：だから

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

、私はパスにポリゴンポイントを変換する方法がある...と思いましています私はラファエルを描くことができますか？私はPythonとPHPを使用していくつかのアプリケーションを見てきましたが、これまで厳密にjavascriptであるものは見つかりませんでした。

ご協力いただければ幸いです。 ありがとう

Answer 1

Paper.pathを参照してください。独自のパスを指定することができます。例えば。赤い三角：あなたの編集に対応して

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

：

あなたは、文字列として、属性、およびL x,yでフォーマットx,y内のすべての座標を交換するポイントを取ることができるはず - SVGのための有効なパスを作ります。最初にmoveToコマンドが必要な場合もあります。だから、この：

260.5,627.75 259.563,628.313 258.625,628.563 

なる：

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

ラファエルは、整数、小数ではないにしたいようです。

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

これを実現するには：だから、でなければならないであろう

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

あなたはちょうどそれが仕事をしたい場合：

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; 
} 

を使用すると、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; 
} 

編集：ここでアクションで上記の両方を参照してください。
最後に http://phrogz.net/svg/convert_polys_to_paths.svg

、あなたは文字列（.getAttribute('points')）としてのポイントを持っているだけでパスデータを希望する場合：

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

（最も簡単な最もコンパクトな）ソリューションポリゴン/ポリラインでのポイントは常に絶対的なので、おそらくこのようなものです：

ポリゴン：

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

ポリライン：

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

"L" は本当にパス文字列（ "D" 属性）で必要とされないためです。 「M」は、第1の絶対のmoveToを意味し、次に続くすべての座標が暗黙絶対linetosている（または、「M」で始まる場合、あなたは相対linetosを得ます）。

Answer 4

あなたがラファエルオブジェクトに全体のSVGファイルを変換するためにhttp://readysetraphael.com/を使用することができ、それは簡単です！

Answer 5

私はこれが役に立てば幸い、解決策を考え出した：

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); 
}