Raphael.js image 在ie8下面的兼容性问题
近期用raphael.js库最了一个进度条,类似这种的
,经过一顿修改,终于完成了。开心中。。然而我去测试兼容性的时候,发现ie8底下的灰色背景图片严重变形。
以下代码:var demo = {
paper: null,
init: function(bg,percent,obj,color){
//初始化Raphael画布
this.paper = Raphael(bg, 304, 255);
//把底图先画上去
this.paper.image("${ctx }/static/new_qzxq/images/operationReport/progressBg.png", 72, 50, 164, 164);
//进度比例,0到1,在本例中我们画65%
//需要注意,下面的算法不支持画100%,要按99.99%来画
var drawPercent = percent >= 1 ? 0.9999 : percent;
//由于只画一条弧,所以参数简单多了,只用计算弧的起点和终点就好了,与上一篇相比简化了许多
var r = 80, PI = Math.PI,
p1 = {
x:154,
y:52
},
p2 = {
x:p1.x + r Math.sin(PI - 2 PI drawPercent),
y:p1.y + r + r Math.cos(PI - 2 PI drawPercent)
},
path = [
'M', p1.x, ' ', p1.y,
'A', r, ' ', r, ' 0 ', percent > 0.5 ? 1 : 0, ' 1 ', p2.x, ' ', p2.y
].join('');
this.paper.path(path)
//线的粗线为6
.attr({"stroke-width":40, "stroke":color});
//显示进度文字
$(obj).prepend(Math.round(percent * 100));
}
};
$(function(){
demo.init('bg',0.15,".txt","#76b6ff");
demo.init('bg2',0.20,".txt2","#ffb376");
demo.init('bg3',0.25,".txt3","#9d76ff");
demo.init('bg4',0.30,".txt4","#ff76ba");
demo.init('bg5',0.35,".txt5","#69d27d");
});
然后百度搜索下,说是在ie8中svg里面的Image缺少单位然后解析不同,然后查了下说是修改跟踪源码在Raphael.js 4953行中fill.size = .fillsize[0] * abs(sx) + S + .fillsize1 abs(sy);这里是没有单位,也是罪恶源泉,我们修改成fill.size = _.fillsize[0] abs(sx) / 1.34 + "pt" + S + _.fillsize1 * abs(sy) / 1.34 + "pt";一切问题搞得。然而我打开rapheal.js搜索并没有4953行也没fill.size。于是一顿苦恼,然后我试着打到raphael.js。全局搜索image发现了坐标,半径,宽度,高度。
然后我在原来的x:c。后面加上+'px'后。在打开ie8看了下。可以了。没有影响到效果。棒棒哒!
希望对遇到这个问题的小伙伴有所帮助!
共同学习,写下你的评论
评论加载中...
作者其他优质文章