vml

来源：互联网发布：唐史主任司马迁知知乎编辑：程序博客网时间：2024/04/30 10:02

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>