标签：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";一切问题搞得。
结果图如下：
After few hours of debug I‘ve figured out that VML implementation is missing measurement points in image tag size definition.
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等一些单位的转换
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Raphael.js image 在ie8下面的兼容性问题,布布扣,bubuko.com
标签：raphael vml image vml fill pt px pixel
原文地址：http://blog.csdn.net/zhangyuanwei88/article/details/38537841
