SVG /拉斐爾：規模路徑+送生成的/計算的路徑

比方說，我有這個SVG路徑（某些圖標）作爲一個字符串：SVG /拉斐爾：規模路徑+送生成的/計算的路徑

"M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466zM16,28.792c-1.549,0-2.806-1.256-2.806-2.806s1.256-2.806,2.806-2.806c1.55,0,2.806,1.256,2.806,2.806S17.55,28.792,16,28.792zM16,21.087l-7.858-6.562h3.469V5.747h8.779v8.778h3.468L16,21.087z"

我可以擴展它（例如，使用raphael.js），如下所示：

icon = paper.path("M16,1.466C7.973,...").attr({fill: "#000", stroke: "none"}); 
icon.transform("s4T50,50");

這最後一行縮放圖像x4，並將整個事物向下和向右移動。

到目前爲止好，但我需要在SVG文件使用生成的路徑。

所以我的問題：如何在轉換完成後得到結果或計算的路徑？

來源

2012-07-17 Hoff

拉斐爾1.x的。 – Duopixel 2012-07-17 18:10:33

也看到http://stackoverflow.com/questions/8350254/how-to-apply-transform-matrix-to-path-coordinates-in-raphael-js-2 – Duopixel 2012-07-17 18:12:28

感謝Duopixel，我設法得到拉斐爾的舉行從這裏1.5.2：http://code.google.com/p/jsplumb/source/browse/trunk/js/lib/raphael-1.5.2-min.js?r=859 - 這似乎工作，雖然結果不是我預測的100％。一旦我把它整理出來，我會發佈一個完整的答案。乾杯! – Hoff 2012-07-17 23:19:27

路徑保持完全一樣，所以你不能在這裏得到你想要的。

我們假定你是通過點和比例尺拉斐爾週期，當你改變它協調起來。但是，它並沒有這樣做 - 相反，它將轉換函數應用於渲染器。

例如，您.transform("s4T50,50");您生成的路徑後，這是在DOM：

<path 
    style="" 
    fill="#000000" 
    stroke="none" 
    d="M16,1.466...39V14.525H23.858L16,21.087Z" 
    transform="matrix(4,0,0,4,2,2)" 
    stroke-width="0.25" 
/>

現在，我不寒而慄，甚至嘗試去想象這是如何工作的VML，但是，這就是生活。無論如何，你可以得到是一個不同的邊界框與icon.getBBox() - 該部分是真實的屏幕像素座標系統。原始信息，但有助於：

 before transform  after icon.transform() 

height 29.067999999999998  116.27199999999999 
width 29.067999999999998  116.27199999999999 
x  1.466     7.864000000000014 
x2  30.534     124.13600000000001 
y  1.466     7.864000000000014 
y2  30.534     124.13600000000001

來源

2012-07-17 18:02:14 pp19dd

功能Raphael.transformPath似乎是你在找什麼。

icon = paper.path(Raphael.transformPath("M16,1.466C7.973,...", "s4T50,50")).attr({fill: "#000", stroke: "none"});

來源

2012-07-18 14:15:31

請檢查我的回答here和試驗檯here。

有一個功能flatten_transformations（），它可以烤（或應用）轉變成路徑。它可以處理所有路徑段（也是弧）。您可以選擇是將所有路徑段轉換爲M：s和C：s，還是保持原樣。 H和V是唯一不能保留的，它們必須轉換爲L：s，因爲變換可以使垂直和水平線變爲非垂直和非水平。您還可以選擇座標是否轉換爲相對或絕對值以及轉換精度。

如果像平坦化函數是拉斐爾的一部分，這將是很好。用於計算的路徑，當你進行改造，如果你得到阿霍德這個版本中，你將能夠達到你想要什麼

來源

2012-11-03 15:58:58

SVG /拉斐爾：規模路徑+送生成的/計算的路徑

回答

相關問題