标签：style blog http color io os ar 使用 strong
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等一些单位的转换
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
标签：style blog http color io os ar 使用 strong
原文地址：http://www.cnblogs.com/gcczhongduan/p/4047977.html
