vml

偏执的太偏执、 2022-09-26 14:53 104阅读 0赞

vml

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

一些文章介绍

[http://www.itlearner.com/code/vml/step2.html][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标签的对象

<!DOCTYPE html>  
<html xmlns="[http://www.w3.org/1999/xhtml][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>

[http_www.itlearner.com_code_vml_step2.html]: http://www.itlearner.com/code/vml/step2.html
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml