vml
The Vector Markup Language (矢量 可标记语言)的缩写.VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。
一些文章介绍
http://www.itlearner.com/code/vml/step2.html
在需要创建vml的页面中 是需要一个命名空间的
<html xmlns:vml="urn:schemas-microsoft-com:vml" >
或者
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml', "#default#VML");
样式里面要加上
<style type="text/css">
vml/:* { behavior: url(#default#VML) }
</style>
ie8下有bug 我直接写在页面里面的vml始终出不来 杯具 所以只好创建元素的方式才创建了(听说ie6下的效果不错)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.mark{
font-size : 12px;
margin : 0 auto;
display : block;
position : absolute;
text-align : right;
}
</style>
</head>
<body>
<script type="text/javascript" >
window.onload = function(){
document.createStyleSheet().addRule(".vml", "behavior:url(#default#VML);display:inline-block;");
if (!document.namespaces.vml && !+"/v1"){
document.namespaces.add("vml", "urn:schemas-microsoft-com:vml");
}
function $cVml(){
return document.createElement('<vml:shape class="vml">');
};
function attr(vml,config){
for(var i in config)
vml.setAttribute(i,config[i]);
}
function css(vml,config){
var str = "";
for(var i in config)
str += i == "opacity" ? ("filter:alpha(opacity="+ config[i] * 100+");"):(i+":"+config[i]+";");
vml.style.cssText = str;
}
var v = $cVml();
attr(v,{
StrokeWeight : 4,
StrokeColor : '#0000ff',
fillcolor : '#0000ff',
coordsize : '600,600',
path : 'm 0 0 l 10,10,20,20,30,30,40,40,50,50,60,60 e'
});
css(v,{
position : "absolute",
left : '0px',
top : '0px',
display : 'inline-block',
width : '600px',
height : '600px'
});
document.getElementById('ss').appendChild(v);
}
</script>
<div id='ss'><div>
</body>
</html>
m x,y:MoveTo把画笔移动到 (x,y);
l x,y:LineTo从当前点到(x,y)画一条线;可以给连续的几个点,VML会连续画出来直到遇到 x 命令。
x:Close结束一条线;
e:End结束画图
FillColor:填充颜色,使用HTML中规定的颜色;例如:fillcolor=red
Filled:是否要填充图形,如果图形不是封闭的,也会自动封闭图形进行填充。当Filled="true"(默认),fillcolor才有效果;
StrokeColor:线的颜色;
StrokeWeight:线的宽度;
CoordSize 表示吧vml划分成多少个点
如果吧vml的高宽设置成600px 600px
在设置CoordSize =‘600,600’ 这样vml中的1也就是1px了
CoordOrig 远点坐标 默认是0,0
一个简单的创建vml标签的对象
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.mark{
font-size : 12px;
margin : 0 auto;
display : block;
position : absolute;
text-align : right;
}
</style>
</head>
<body>
<script type="text/javascript" >
window.onload = function(){
document.createStyleSheet().addRule(".vml", "behavior:url(#default#VML);display:inline-block;");
if (!document.namespaces.vml && !+"/v1"){
document.namespaces.add("vml", "urn:schemas-microsoft-com:vml");
}
var vml = {
container : null,
node : null,
init : function(container){
this.container = container;
this.width = container.offsetWidth;
this.height = container.offsetHeight;
return this;
},
$c : function(name){
name = name || 'shape';
this.node = document.createElement('<vml:'+name+' class="vml">');
return this;
},
attr : function(config){
for(var i in config)
this.node.setAttribute(i,config[i]);
return this;
},
css : function(config){
var str = "";
for(var i in config)
str += i == "opacity" ? ("filter:alpha(opacity="+ config[i] * 100+");"):(i+":"+config[i]+";");
this.node.style.cssText = str;
return this;
},
appendTo : function(p){
if(this.node!==null){
p?p.appendChild(this.node):this.container.appendChild(this.node);
}
return this;
}
}
vml.init(document.getElementById('ss')).$c().attr({
strokewidth : 1,
StrokeColor : '#0000ff',
filled : 't',
coordsize : '400,400',
path : 'm 0,0 l 15,0 15,15 30,15 30,30 45,30 45,45 60,45 60,60 e'
}).css({
position : "absolute",
left : '0px',
top : '0px',
display : 'inline-block',
width : '400px',
height : '400px'
}).appendTo();
}
</script>
<div id='ss' style="height:400px;width:400px; border:1px solid #030; margin:50px; position:relative"><div>
</body>
</html>
有几点要注意
1. 创建vml标签的时候 一定要用
document.createElement('<vml:'+name+' class="vml">');
这样形式 ie8下用document.createElement('vml');很可能会看不到
2.加了属性和样式后 在把vml添加到父元素上去 如果先加到父元素 在设置属性 也会看不到
3.父元素设置position:relative vml设置position:absolute 这样才能保证vml的坐标原点在父元素的左上角
不然会在浏览器的左上角
画饼图
path:画笔
path参数:
m x,y:MoveTo 把画笔移动到(x,y) ----就是画图的画笔起点
l x,y:LineTo 从M点到(x,y)画一条线;可以是连续的几个点。
x: CLose 结束一条线
e: End 结束画图
ar left,top,right,bottom,start(x,y),end(x,y): 逆时针画弧---top,right,bottom,left各位弧的
上右下左边缘界线 四条线限定了圆的位置
wr left,top,right,bottom,start(x,y),end(x,y): 顺时针画弧
主要用到 ar wr
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.mark{
font-size : 12px;
margin : 0 auto;
display : block;
position : absolute;
text-align : right;
}
</style>
</head>
<body>
<script type="text/javascript" >
var each = function ( object, callback, args ) {
var name, i = 0, length = object.length;
if ( args ) {
args = Array.prototype.slice.call(arguments).slice(2);
if ( length === undefined ) {
for ( name in object )
if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false )
break;
} else
for ( ; i < length; i++)
if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) //
break;
} else {
if ( length === undefined ) {
for ( name in object )
if ( callback.call( object[ name ], name, object[ name ] ) === false )
break;
} else
for ( var value = object[0];
i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
}
return object;
};
window.onload = function(){
document.createStyleSheet().addRule(".vml", "behavior:url(#default#VML);display:inline-block;");
if (!document.namespaces.vml && !+"/v1"){
document.namespaces.add("vml", "urn:schemas-microsoft-com:vml");
}
var vml = {
container : null,
node : null,
init : function(container){
this.container = container;
this.width = container.offsetWidth;
this.height = container.offsetHeight;
return this;
},
$c : function(name){
name = name || 'shape';
this.node = document.createElement('<vml:'+name+' class="vml">');
return this;
},
attr : function(config){
for(var i in config)
this.node.setAttribute(i,config[i]);
return this;
},
css : function(config){
var str = "";
for(var i in config)
str += i == "opacity" ? ("filter:alpha(opacity="+ config[i] * 100+");"):(i+":"+config[i]+";");
this.node.style.cssText = str;
return this;
},
appendTo : function(p){
if(this.node!==null){
p?p.appendChild(this.node):this.container.appendChild(this.node);
}
return this;
}
}
var r = 100,center = [100,100];
function angle(o){
var hudu = Math.PI*2*(o/360),
x = center[0]+ parseFloat(r*Math.sin(hudu)),
y = center[1]+ parseFloat(-r*Math.cos(hudu));
return [x,y];
}
//0到90度
var s = angle(0);
var e = angle(90);
//画饼图
//路径
//var path = 'M 0 0 ar 0 0 ' + 2*r + ' ' + 2*r + ', '+ex+' '+ey+','+sx+' '+sy+' l ' + r + ' ' + r + ' x';
//顺时针
window.path = 'M 0 0 ar 0 0 ' + 2*r + ' ' + 2*r + ', '+e[0]+' '+e[1]+','+s[0]+' '+s[1]+' l ' + r + ' ' + r + ' x';
//逆时针
window.path1 = 'M 0 0 wr 0 0 ' + 2*r + ' ' + 2*r + ', '+e[0]+' '+e[1]+','+s[0]+' '+s[1]+' l ' + r + ' ' + r + ' x';
window.draw = function(p){
document.getElementById('ss').innerHTML = '';
vml.init(document.getElementById('ss')).$c().attr({
strokewidth : 1,
StrokeColor : '#0000ff',
filled : 't',
fillcolor : '#0000ff',
coordsize : 2*r+','+2*r,
path : p || window.path
}).css({
position : "absolute",
left : '0px',
top : '0px',
display : 'inline-block',
width : 2*r+'px',
height : 2*r+'px'
}).appendTo();
}
draw();
}
</script>
<div id='ss' style="height:400px;width:400px; border:1px solid #030; margin:50px; position: relative"></div>
<input type="button" value='逆时针' onclick = 'draw(path)' /><br />
<input type="button" value='顺时针' onclick = 'draw(path1)' />
</body>
</html>