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等一些单位的转换
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Raphael.js image 在ie8下面的兼容性问题