Raphael.js image 在ie8下面的相容性問題
阿新 • • 發佈:2018-12-31
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>
也就是使用vml來繪製圖形,在chrome和firfox還有ie8之後都是採用svg來繪製圖形。但是這樣就會造就一個問題,在window 8系統中預設ie是ie10,然後使用開發者工具的時候切換ie至ie7 ie8的時候影象會比原來大好多,在xp系統中或者是window 7系統中也會有同樣的表現,例如影象錯位,真實的點座標不對等。</rvml:shape>
解決辦法:
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.
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 |