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.
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以下的兼容性问题的更多相关文章
- svg绘图工具raphael.js的使用
1.raphael.js svg画图的开源库,支持IE8+ 官方api: http://dmitrybaranovskiy.github.io/raphael/reference.html Githu ...
- 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译(一)
(原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...
- 强大的矢量图形库:Raphael JS 中文帮助文档及教程
Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出 ...
- CSS HACK区别IE6、IE7、IE8、Firefox兼容性
相信不少人,都特别清楚CSS HACK,而其中也是区别IE6.IE7.IE8.Firefox兼容性问题用的,CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样. ...
- Raphael Js矢量库API简介:
Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...
- PHP+Mysql+jQuery实现中国地图区域数据统计(raphael.js)
使用过百度统计或者cnzz统计的童鞋应该知道,后台有一个地图统计,不同访问量的省份显示的颜色也不一样,今天我将带领大家开发一个这样的案例.上一篇<使用raphael.js绘制中国地图>文章 ...
- Javascript实战开发:教你使用raphael.js绘制中国地图
最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...
- raphael.js 给元素 hover 添加glow() 外发光
用raphael.js 给 svg画布里面添加个元素,嗯就圓好了,男人一般都喜欢圆形的东西,比如xx , xxx , 还有xxx $(document).ready(function() { var ...
- IE6、IE7、IE8、Firefox兼容性
整理关于IE6.IE7.IE8.Firefox兼容性CSS HACK问题 1.区别IE和非IE浏览器CSS HACK代码 #divcss5{background:blue; /*非IE 背景藍色*/b ...
随机推荐
- Python学习日记之读取中文目录
unicode # -*- coding:utf-8 -*- import os import shutil ins="E:\\学习资料" dir=unicode(ins,'utf ...
- [Python] xrange和range的使用区别
zhuan:https://blog.csdn.net/humanking7/article/details/45950967 range 函数说明:range([start,] stop[, ste ...
- 文件和打印共享资源(IP地址)处于联机状态,但未对连接尝试做出响应。
文件和打印共享资源(IP地址)处于联机状态,但未对连接尝试做出响应. 检测到 远程计算机不接受端口 445 上的连接,这可能是由于防火墙或安全策略设置,或因为服务可能暂时不可用.Windows 在计算 ...
- webstom2017最新破解 ------------ http://blog.csdn.net/voke_/article/details/76418116
webstorm 作为最近最火的前端开发工具,也确实对得起那个价格,但是秉着勤俭节约的传统美德,我们肯定是能省则省啊. 方法一:(更新时间:2018/1/23)v3.3 注册时,在打开的License ...
- ThinkPHP---框架介绍
(1)什么是框架? ①框架是一堆包含了常量.方法和类等代码集合: ②半成品应用,只包含了项目开发时的底层架构,并不包含业务逻辑: ③包含一些设计模式,例如单例模式,工厂模式,AR(Active Rec ...
- react 导航切换
<ul class="nav"> <li onClick={() => this.changeFontColor(0)} className={`${0 = ...
- 移动端开发需要加的meta
移动端开发需要加的meta和常用的css3媒体查询样式,移动开发中头部要加的一些常用meta. <meta name="viewport" content="ini ...
- Re0:DP学习之路 01背包如何打印路径?
伪代码 用二维数组记录,如果出现可以转移的dp那么记录bk[当前体积][装的物品]=1 输出的时候倒推,如果存在连通的边那么输出并且总共的体积减去输出的体积 代码(uva-624,目前wa不明所以,网 ...
- [luogu4571 JSOI2009] 瓶子和燃料 (数论)
传送门 Solution 题目说的很迷,但可以发现两个瓶子互相倒最少是容积的gcd 那么题目就转化为求其中选k个瓶子gcd的最大值,这个可以分解因数,枚举因数得到 Code //By Menteur_ ...
- ROW_NUM
SELECT * FROM ( (SELECT ROW_NUMBER() OVER (PARTITION BY 字段1,字段2 ORDER BY 字段3 DESC) AS TMPID), ...