在SVG中「展開」多邊形的最有效方法是什麼？

我在我的SVG文件中有一個polygon元素。它實際上是一套公寓平面圖的裁剪路徑。目前剪切路徑不會捕捉樓層平面圖的牆壁，我需要這樣做。在SVG中「展開」多邊形的最有效方法是什麼？

有沒有辦法'擴大'多邊形的某種價值？我試過用transform=translate() scale()從中心縮放它，但效果與'擴展'不同。

爲了說明這個問題，這裏是一個畫面：

enter image description here

原來的多邊形充滿了灰色和我有一個藍色的點的座標。我希望多邊形變成像黑色虛線一樣並獲得綠色點的座標。

來源

2014-01-21 yentsun

您認爲transform =「scale（2）」與擴展有什麼不同？ –

@Robert Longson：我認爲弗朗西斯·漢姆斯的回答給出瞭解釋。 – yentsun

正如你已經指出的那樣，縮放並不是答案 - 除非你對一個非常粗糙的剪輯感到滿意

更簡單的解決方案（試圖操縱多邊形座標）是將剪輯路徑更改爲一個面具，並繪製一個足夠的行程多邊形揭示你的牆壁。

來源

2014-01-21 22:35:56

我也在考慮利用筆畫寬度。我會試一試。 – yentsun

將剪輯路徑更改爲掩碼完成了這項工作，謝謝！ – yentsun

您的多邊形不是凸多邊形，因此其縮放的「中心」最好從其邊界框的中心選取。您可以根據您希望較大的多邊形超出原始多邊形的單位來計算比例。 myPolygon是您的基礎多邊形的克隆。我編輯這個修復了一些錯別字。對不起:(......在未來，我將使用的jsfiddle。

var myScale=1.025 
    var myPolygon=basePolygon.cloneNode(true) 
//---append to you root SVG--- 
mySVG.appendChild(myPolygon) 
    var bb=myPolygon.getBBox() 
    var bbx=bb.x 
    var bby=bb.y 
    var bbw=bb.width 
    var bbh=bb.height 
    var cx=bbx+.5*bbw 
    var cy=bby+.5*bbh 

    myPolygon,setAttribute("transform","translate("+(cx)+" "+(cy)+")scale("+myScale+")translate("+(-cx)+" "+(-cy)+")")

然後返回縮放多邊形（myPoly）的屏幕點（mySVG是根SVG）

//---changes all transformed points to screen points--- 
function screenPolygon(myPoly,mySVG) 
{ 
    var sCTM = myPoly.getCTM() 
    var pointsList = myPoly.points; 
    var n = pointsList.numberOfItems; 
    for(var m=0;m<n;m++) 
    { 
     var mySVGPoint = mySVG.createSVGPoint(); 
     mySVGPoint.x = pointsList.getItem(m).x 
     mySVGPoint.y = pointsList.getItem(m).y 
     mySVGPointTrans = mySVGPoint.matrixTransform(sCTM) 
     pointsList.getItem(m).x=mySVGPointTrans.x 
     pointsList.getItem(m).y=mySVGPointTrans.y 
    } 
    //---force removal of transform-- 
    myPoly.setAttribute("transform","") 
    myPoly.removeAttribute("transform") 
}

來源

2014-01-21 20:46:44

感謝新學期學習 - '凸'！ – yentsun

在SVG中「展開」多邊形的最有效方法是什麼？

回答

相關問題