1. 程式人生 > >Raphael.js image 在ie8下面的相容性問題

Raphael.js image 在ie8下面的相容性問題

Raphael.js 在ie7,ie8瀏覽器內繪製圖形採用的vml,在繪製image的時候會解析成

<?xml:namespace prefix = "rvml" ns = "urn:schemas-microsoft-com:vml" />
<rvml:shape class=rvml style="HEIGHT: 1px; WIDTH: 1px; POSITION: absolute; LEFT: 0px; FILTER: none; TOP: 0px; VISIBILITY: visible; rotation: 0; flip: " raphael="true" raphaelid="0" coordsize = "21600,21600" stroked = "f" strokecolor = "black" path = " m0,0 l37087200,0,37087200,16912800,0,16912800 xe">
<rvml:stroke class=rvml opacity = "1" miterlimit = "8">
</rvml:stroke><rvml:skew class=rvml on = "t" matrix = "1,0,0,1,0,0" offset = "-.5,-.5"></rvml:skew>
<rvml:fill class=rvml rotate = "t" src = "../123.png" type = "tile" size = "1717,783" position = "0,0"></rvml:fill>
</rvml:shape>
也就是使用vml來繪製圖形,在chrome和firfox還有ie8之後都是採用svg來繪製圖形。但是這樣就會造就一個問題,在window 8系統中預設ie是ie10,然後使用開發者工具的時候切換ie至ie7 ie8的時候影象會比原來大好多,在xp系統中或者是window 7系統中也會有同樣的表現,例如影象錯位,真實的點座標不對等。

解決辦法:

vml  image size不對的問題是因為 ie 瀏覽器對 fill size 單位不清晰造成的,檢視mrocsoft文件知道fill使用的單位pt,而非px,影象單位我們獲取的一般都是pixel也就是px。

但是1px=1.34pt這就會造成影象變形。

跟蹤原始碼在Raphael.js  4953行中fill.size = _.fillsize[0] * abs(sx) + S + _.fillsize[1] * abs(sy);這裡是沒有單位,也是罪惡源泉,我們修改成fill.size = _.fillsize[0] * abs(sx) / 1.34 + "pt" + S + _.fillsize[1] * abs(sy) / 1.34 + "pt";一切問題搞得。

結果圖如下:



After few hours of debug I've figured out that VML implementation is missing measurement points in image tag size definition.


Line number 4952 missing “pt” constant that has to be present in VML tag. So just changing 
fill.size=_.fillsize[0]*abs(sx)+S+_.fillsize[1]*abs(sy);
to something like

fill.size = _.fillsize[0] * abs(sx)/1.34 + "pt" + S + _.fillsize[1] * abs(sy)/1.34 + "pt";

附帶pt,px等一些單位的轉換

Pixel↔m   1 m = 3779.5275593333 Pixel
Pixel↔dm   1 dm = 377.95275593333 Pixel
Pixel↔cm   1 cm = 37.795275593333 Pixel
Pixel↔mm   1 mm = 3.7795275593333 Pixel
Pixel↔ft   1 ft = 1152 Pixel
Pixel↔Point   1 Point = 1.3333333333333 Pixel
Point↔m   1 m = 2834.6456695 Point
Point↔dm   1 dm = 283.46456695 Point
Point↔cm   1 cm = 28.346456695 Point
Point↔mm   1 mm = 2.8346456695 Point
Point↔Pixel   1 Point = 1.333333 Pixel
Point↔ft   1 ft = 864 Point