VML 学习笔记

发布时间：2020-12-15 22:32:14 所属栏目：百科来源：网络整理

导读：观看者：有xml，javascript基础的同学目标：熟练掌握vml 实现方式：代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。 VML的全称是Vector Markup Language(矢量可标记语言)是基于xml的矢量的图形，意味着图形可以任意放大缩小而不损失图形

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

目标：熟练掌握vml

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

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

用法：

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

[html] 
    view plain 
    copy 
     
    
 <htmlxmlns:v="urn:schemas-microsoft-com:vml">

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

copy

v:*{behavior:url(#defualt#vml);display:inline-block}

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

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

copy

head>
title>vml>v:*{behavior:url(#default#vml);display:inline-block}bodyv:ovalstyle="width:50px;height:50px"fillcolor="red">v:ovalhtml>

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

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

copy

xmlns

"http://www.w3.org/1999/xhtml"

style

type

"text/css"

script

language

"JavaScript"

type

"text/javascript"

window.onload=function(){

varcont=document.getElementById('dv');

varoval=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);

}

scriptdivid='dv'div>

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

[javascript] 
    copy

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：

copy

CoordSize

'28000,28000'

style

"position:relative;left:5;top:5;width:100;height:80"

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

属性：

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

copy

style

"position:relative"

from

"0,0"

"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。

copy

style

'width:120pt;height:90pt'

strokecolor

"red"

strokeweight="2.5pt"v:filltype="frame"src="image1.jpg">

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

v:shadow：阴影；

copy

style

"position:relative;width:100;height:50px"

v:shadow

"T"

type

"single"

color

"#b3b3b3"

offset

"5px,5px"

v:RoundRect

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

形状

直线：

copy

折线：

copy

filled

"false"

Points

"0,00,10020,150200,100"

style

"position:relative"

v:stroke

StartArrow

"Oval"

EndArrow

"Classic"

dashstyle

"Dot"

v:PolyLine

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

圆形：

copy

style

"position:relative;left:5;top:5;width:100;height:80"

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

矩形：

分两种一种是直角矩形：

copy 
     
    

style

"position:relative;left:5;top:5;width:100;height:80"

另一种是圆角矩形：

copy

图片：

copy

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 属性就可以了。看看下面的例子：

copy 
     
    

"arrowUP"

coordsize

"66"

v:path

"m3,0l0,6,3,0xe"

v:shapetype

v:shape

type

"#arrowUP"

style

"position:relative;width:50;height:50"

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

copy 
     
    

style

"position:relative;WIDTH:200px;HEIGHT:200px;rotation:45"

coordsize

"2000,2000"

v:group

我们用group很简单的改变了图像大小和角度。
到此我们基本介绍了所有vml的对象和属性，后面我会将shape的path专门提出来介绍，应为实在太强大了，以至于我们了解了shape之后上面这些形状我们完全都可以模拟出来。

转载自：http://blog.csdn.net/a569171010/article/details/7558291

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!