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?in   1 in = 96 Pixel
  • Pixel?ft   1 ft = 1152 Pixel
  • Pixel?Pica   1 Pica = 16 Pixel
  • Pixel?Point   1 Point = 1.3333333333333 Pixel
  • Pixel?Twip   1 Pixel = 15 Twip




    Raphael.js image 在ie8下面的兼容性问题,古老的榕树,5-wow.com

    郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。