VML 学习笔记

最新推荐文章于 2022-06-21 12:10:43 发布

jumtre

最新推荐文章于 2022-06-21 12:10:43 发布

阅读量4.7k

点赞数 2

分类专栏： Javascript 文章标签： xml javascript js vml

Javascript 专栏收录该内容

54 篇文章

订阅专栏

观看者：有xml，javascript基础的同学

目标：熟练掌握vml

实现方式：代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。

VML的全称是Vector Markup Language(矢量可标记语言)是基于xml的矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量。微软ie5-8的矢量图标准。由于ie9已经支持SVG了，所以vml到2011年12月已经归档不再更新了，也就是说vml已经在慢慢退出市场，在此我讲这个的原因是虽然退出市场了，但是ie5-8仍旧占据绝大部分的市场，我们不能小视。某种角度看vml的用户更多。我们可以展望未来，但还是不能忘记现在的环境。

用法：

1,添加xml的命名空间 xmlns ，写法如下：

[html]view plaincopy 
    
 <html xmlns:v="urn:schemas-microsoft-com:vml">  

2,添加行为和命名空间的关系，至于这句话的意思后面有详细解释

[html]view plaincopy 
    
 <style>v\:*{behavior:url(#defualt#vml);display:inline-block}</style>  

有了上面的两个步骤我们就可以开始用vml“画画了”。

先上一个例子再解释你就明白个中奥妙了：

[html]view plaincopy 
    
 <html xmlns:v="urn:schemas-microsoft-com:vml">  
 <head>  
 <title>vml</title>  
 <style>v\: * {behavior:url(#default#vml);display:inline-block}</style>  
 </head>  
 <body>  
 <v:oval style="width:50px;height:50px" fillcolor="red"></v:oval>  
 </body>  
 </html>  

一个简单的圆就画好了，这里面的v\:* 是一个css样式，表示所有以"V:"开头的标签的dom元素都继承了这个样式，样式内容就是将vml的默认行为给这些元素，既然是继承样式以前我们经常用class继承，这里也是完全可以的，至于后面的display:inline-block,其实是对ie8样式的兼容问题（经过我测试好像加不加这句ie8显示无碍，既然官方给出这样的写法，自有道理，可能是不同版本当时的兼容问题，也可能后期ie8修复了，在此就不多纠结）。这样一来凡是"v:"开头的标签都有了vml的默认行为，那么我们就可以用vml的方式添加属性了，下面我会开始介绍vml的一些形状以及属性。

在此之前我想很多人可能觉得这样通过标签画的矢量图实在无趣，而且不实用，那么我们就来点实用和令人兴奋的东西，我们让javascript将普通的html文档动态创建出符合vml运行的环境。还是看例子：

[html]view plaincopy 
    
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <title>vml</title>  
 </head>  
 <style type="text/css">  
 </style>  
 <body>  
 <script language="JavaScript" type="text/javascript">  
 window.onload = function(){  
      var cont = document.getElementById('dv');  
      var oval = document.createElement('oval');//创建元素  
        
      oval.xmlns="urn:schemas-microsoft-com:vml";//相当于上面的赋值命名空间  
      oval.style.behavior='url(#default#VML); display:inline-block';//相当于上面添加vml默认样式  
   
      oval.style.position = 'absolute';  
      oval.style.width = '50px';  
      oval.style.height= '50px';  
       oval.fillcolor= 'red';  
      cont.appendChild(oval);  
 }  
 </script>  
 <div id='dv'></div>  
 </body>  
 </html>  

我们就这么很方便的动态创建了一个vml矢量图，如果你有心而且追求扩展性的话，其实我们可以写的更加美妙的js，比如通过：

[javascript]view plaincopy 
    
 document.namespaces.add("v", "urn:schemas-microsoft-com:vml");  

添加document的命名空间，我们还可以创建style标签添加样式，然后appendChild到head标签中。这样是不是更好呢？如果暂时觉得太复杂可以跳过这一部分。

这里应为是基础教程所以就不过多的扩展，以后我还会深入讲解的。

vml图形及属性

如有兴趣深入研究的话可以去msdn上面看看。下面是网址。
http://msdn.microsoft.com/en-us/library/bb250524(v=vs.85).aspx

我就是检主要的，常用的给大家：

CoordSize：

[html]view plaincopy 
    
 <html xmlns:v="urn:schemas-microsoft-com:vml">  
 <head>  
 <title>vml</title>  
 <style>v\: * {behavior:url(#default#vml);display:inline-block}</style>  
 </head>  
 <body>  
 <v:oval CoordSize='28000,28000' style="position:relative;left:5;top:5;width:100;height:80"/>  
 </body>  
 </html>  

CoordSize:其实是网格大小，当CoordSize为 28000,28000 就是将横纵坐标和纵坐标被分成了28000个点，这并不是HTML里面默认像素。具体的形状大小定义还要靠style中的width和height。宽和高都是指的多少个网格的宽和高，放大和缩小调整CoordSize的值就可以搞定。默认元素都是从左上角0,0处开始排放。

属性：

属性其实就是形状的表现样式，从下面开始我就不累赘的写html结构了，如果测试代码可以将上面的body中的代码替换成我所给的代码就行了。

[html]view plaincopy 
    
 <v:line style="position:relative" from="0,0" to="100,0" >  
 <v:stroke dashstyle="Dot" EndArrow="Classic" />  
 </v:line>  

这种写法是将属性添加到单独的标签中。

stroke：画笔属性包括：
strokeweight，dashstyle，strokecolor，opacity="0.5"，linestyle线条风格，,joinstyle线条转折样式，filltype线条填充样式。

dashstyle：

linestyle：single，thinthin，thinthick，thickthin，thickbetweenthin

详细的可以自己试试，我给一个thickbetweenthin图片，大家有个概念，是那一块儿变了就行：

joinstyle：round，bevel，miter，完全可以理解为笔触样式，也就是转折地方的样式，我也跟上面一样不多截图了：

以上就不详细解释，如果想深入了解就课看下面的链接吧，里面都有，用的时候查就可以了。
http://msdn.microsoft.com/en-us/library/bb264134(v=vs.85)

fill： 填充颜色；
type：gradient,frame可以填充图片,pattern,gradientRadial。

[html]view plaincopy 
    
 <v:oval style='width:120pt;height:90pt' strokecolor="red"  
 strokeweight="2.5pt">  
 <v:fill type="frame" src="image1.jpg" />  
 </v:oval>  

method:linear,sigma,any,none 渐变方式。
angle角度渐变角度。

v:shadow：阴影；

[html]view plaincopy 
    
 <v:RoundRect style="position:relative;width:100;height:50px">  
     <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>  
 </v:RoundRect>  

属性ok了下面继续我们的shape的扩展形状上面讲了直线下面接着说形状，形状其实都是由shape衍生出来的对象，shape是最基础也是最强大的绘图方式。下面先说说衍生出来的形状。

形状

直线：

[html]view plaincopy 
    
 <v:line style="position:relative" from="0,0" to="100,0" >  
 <v:stroke dashstyle="Dot" EndArrow="Classic" />  
 </v:line>  

折线：

[html]view plaincopy 
    
 <v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative" >  
 <v:stroke StartArrow="Oval" EndArrow="Classic" dashstyle="Dot" />  
 </v:PolyLine>  

折线就是给几个点从第一个往后链接形成的。

圆形：

[html]view plaincopy 
    
 <v:oval style="position:relative;left:5;top:5;width:100;height:80"/>  

通过left:5;top:5;width:100;height:80可控制长宽以及开始位置。

矩形：

分两种一种是直角矩形：

[html]view plaincopy 
    
 <v:rect style="position:relative;left:5;top:5;width:100;height:80"/>  

另一种是圆角矩形：

[html]view plaincopy 
    
 <v:RoundRect style="position:relative;width:100;height:50px"></v:RoundRect>  

图片：

[html]view plaincopy 
    
 <v:image src="big.GIF" style="position:relative;top:0;left:0;width:165;height:157" />  

img也有很多特殊的属性，可以控制明暗，图片位置，透明度等

grayscale是否为黑白色（true false），backlevel取值（-1，1),gain色相（数字）
图片位置cropbottom, croptop, cropleft, and cropright （0~1）

最后的两个是比较特殊的，不属于形状对象，可以理解成容器对象。

shapetype：
VML的这个功能很有用，模版，顾名思义，它可以减少书写代码的量，又使的代码可读性提高。在理解VML模版的时候，可以和 HTML 的 CSS 一样理解，它是定义好的一种形状，下次使用的时候直接声明 type 属性就可以了。看看下面的例子：

[html]view plaincopy 
    
 <v:shapetype id="arrowUP" coordsize="6 6">   
     <v:path v="m 3,0 l 0,6,6,6,3,0 x e" />  
 </v:shapetype>  
 <v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>  

用type指向上面shapetype的id就可以继承下来定义的形状。
group：
可以理解成一个画布，我们可以修改画布的CoordSize，或者Rotation 来改变画布的属性进而改变画布里面的图形的展现。

[html]view plaincopy 
    
 <v:shapetype id="arrowUP" coordsize="6 6">   
     <v:path v="m 3,0 l 0,6,6,6,3,0 x e" />  
 </v:shapetype>  
 <v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>  
 <v:group style="position:relative;WIDTH:200px;HEIGHT:200px;rotation:45" coordsize = "2000,2000">  
 <v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>  
 </v:group>  