用RaphaelJS以像素爲單位縮放紙張大小或設置路徑尺寸路徑

Question

我試圖縮放與RaphaelJS呈現的圖標。使用"transform": "s.5,.5,0,0"工作得很好，但我更希望能夠提供絕對像素值，例如20px。一個不錯的選擇是讓路徑自動縮放到紙張尺寸。這些都可能嗎？

使用transform我當前的代碼：

$('.cog-menu-options-icon').each(function (i) { 
    paper = Raphael($(this)[0], 20, 20); 
    paper.path(window.icons.wrench).attr({ "fill": "#333", "transform": "s.5,.5,0,0" }); 
}); 

能的路徑設置爲自動縮放到適合紙張？路徑的高度/寬度是否可以用像素設置？

Answer 1

我對拉斐爾不是很熟悉，但是您可以使用邊界框函數getBBox()來獲取尺寸，並使用它們來計算正確的尺度嗎？

$('.cog-menu-options-icon').each(function (i) { 
    paper = Raphael($(this)[0], 20, 20); 

    var icon = paper.path(window.icons.wrench); 
    var max = icon.getBBox().width; 
    var h = icon.getBBox().width; 
    if(h>max) { 
     max = h; 
    } 
    var scale = 20/max; 
    icon.attr({ "fill": "#333", "transform": "s"+scale+","+scale+",0,0" }); 
}); 

下面是一個例子：http://jsfiddle.net/xUyRS/

我添加代碼，如果路徑不具有0,0起源，並居中圖標翻譯的圖標。

我還發現Raphael有一個getBBox的錯誤，它在多次調用相同的路徑時返回錯誤的結果，所以我使用了帶有修復的分叉版本。