码迷,mamicode.com
首页 > Web开发 > 详细

Raphael.js image 在ie8下面的兼容性问题

时间:2014-08-13 19:00:07      阅读:427      评论:0      收藏:0      [点我收藏+]

标签:raphael   vml image   vml fill   pt px pixel   

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";一切问题搞得。

结果图如下:

bubuko.com,布布扣

bubuko.com,布布扣




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下面的兼容性问题,布布扣,bubuko.com

    Raphael.js image 在ie8下面的兼容性问题

    标签:raphael   vml image   vml fill   pt px pixel   

    原文地址:http://blog.csdn.net/zhangyuanwei88/article/details/38537841

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!