vml

scomouse

浏览: 14960 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (67)

社区版块

存档分类

vml

The Vector Markup Language (矢量可标记语言)的缩写.VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。

一些文章介绍

http://www.itlearner.com/code/vml/step2.html

在需要创建vml的页面中是需要一个命名空间的

或者

document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml', "#default#VML");

样式里面要加上

ie8下有bug 我直接写在页面里面的vml始终出不来杯具所以只好创建元素的方式才创建了(听说ie6下的效果不错)

</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标签的对象

</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>