在Raphael中渲染SVG多邊形Javascript庫

據我所知，目前沒有辦法在Raphael Javascript庫中顯示SVG多邊形。我正在構建一個需要讀取SVG的應用程序，並將它們顯示在Raphael中，但是，其中很多SVG使用多邊形。在Raphael中渲染SVG多邊形Javascript庫

例如，我在SVG閱讀與此格式的多邊形：

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

所以，我不知道......是有辦法的多邊形點轉換成路徑，其我可以拉斐爾？我見過一些使用python和PHP的應用程序，但到目前爲止我找不到任何嚴格的javascript。

任何幫助將不勝感激。感謝

來源

2012-03-13 Munzilla

你想要一個JavaScript的解決方案嗎？什麼是您的源數據：一個包含''元素的實際SVG文件？結果你只需要返回路徑的'd'屬性值？或者你想將多邊形就地轉換爲新的''元素？ – Phrogz 2012-03-13 19:12:18

見Paper.path。你可以指定你自己的路徑。例如。紅色三角形：

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

在回答您的編輯：

你應該能夠拿分屬性，作爲一個字符串，並更換所有的座標格式x,y與L 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)

來源

2012-03-13 19:07:11 James

我編輯了這個問題。我正在尋找更多的方法來將多邊形點轉換成Raphael路徑。 – Munzilla 2012-03-13 19:12:35

不要忘記你的正則表達式中的負值。另請注意，多邊形/多段線點之間不需要有逗號;他們可能會使用空格。爲什麼「地板」而不是「圓」？在SVG Path數據中，第一次出現後不需要重複命令名稱。最後，由於多邊形會自行關閉（而不是折線），所以在數據的末尾需要一個「Z」或「z」。 – Phrogz 2012-03-13 19:51:26

如何將折線轉換爲點數組？ – NevenHuynh 2014-03-31 07:39:06

如果你只是希望它的工作：

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

來源

2012-03-13 19:23:22 Phrogz

最簡單的（和最緊湊）的解決方案可能是這樣的事情，因爲在多邊形/折線點始終是絕對的：

多邊形：

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

折線：

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

這是因爲，是不是真的需要在路徑字符串（「d」屬性）「L」。「M」表示首先是一個絕對的moveto，然後所有的座標都是隱式的絕對linetos（或者如果你以「m」開頭，那麼你會得到相對的linetos）。

來源

2012-03-14 19:50:08

您可以使用http://readysetraphael.com/將整個SVG文件轉換爲raphael對象，這很容易！

來源

2013-05-22 09:00:54

我想出了一個解決方案，希望這有助於：

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

來源

2013-07-31 17:12:43 user1971075

在Raphael中渲染SVG多邊形Javascript庫

回答

相關問題