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
to something likefill.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";
附带pt，px等一些单位的转换
| |
| |
| |
| |
| |
| |
| |
| |
| |
- 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↔in 1 in = 72 Point
- Point↔ft 1 ft = 864 Point
- Point↔Pica 1 Pica = 12 Point
- Point↔Twip 1 Point = 20 Twip
| |
| |
| |
| |
| |
| |
| |
| |
| |