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

저는 Raphael에 익숙하지 않지만 테두리 상자 기능 getBBox()을 사용하여 치수를 얻은 다음 정확한 스케일을 계산하는 데 사용할 수 있습니까?

http://jsfiddle.net/xUyRS/ 내가 경로가 0,0 기원을 가지고 있지 않으며, 아이콘의 중심을 경우 아이콘을 변환하는 코드를 추가 : 여기

$('.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" }); 
}); 

은 예입니다.

또한 Raphael에 getBBox과 같은 버그가있어서 동일한 경로에 대한 여러 번 호출 할 때 잘못된 결과가 반환된다는 것을 알게되었습니다. 따라서 수정본이있는 분기 된 버전을 사용하고 있습니다.