vml

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>

发布了73 篇原创文章 · 获赞 0 · 访问量 10万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览