VML 学习笔记

目标:熟练掌握vml
实现方式:代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。
VML的全称是Vector Markup Language(矢量可标记语言)是基于xml的矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量。微软ie5-8的矢量图标准。由于ie9已经支持SVG了,所以vml到2011年12月已经归档不再更新了,也就是说vml已经在慢慢退出市场,在此我讲这个的原因是虽然退出市场了,但是ie5-8仍旧占据绝大部分的市场,我们不能小视。某种角度看vml的用户更多。我们可以展望未来,但还是不能忘记现在的环境。
用法:
1,添加xml的命名空间 xmlns ,写法如下:
<html xmlns:v="urn:schemas-microsoft-com:vml">
2,添加行为和命名空间的关系,至于这句话的意思后面有详细解释
<style>v\:*{behavior:url(#defualt#vml);display:inline-block}</style>
有了上面的两个步骤我们就可以开始用vml“画画了”。
先上一个例子再解释你就明白个中奥妙了:
<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 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,比如通过:
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 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中的代码替换成我所给的代码就行了。
<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。
<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:阴影;
<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是最基础也是最强大的绘图方式。下面先说说衍生出来的形状。
形状
直线:
<v:line style="position:relative" from="0,0" to="100,0" >
<v:stroke dashstyle="Dot" EndArrow="Classic" />
</v:line>

折线:
<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>

折线就是给几个点从第一个往后链接形成的。
圆形:
<v:oval style="position:relative;left:5;top:5;width:100;height:80"/>

通过left:5;top:5;width:100;height:80可控制长宽以及开始位置。
矩形:
分两种一种是直角矩形:
<v:rect style="position:relative;left:5;top:5;width:100;height:80"/>

另一种是圆角矩形:
<v:RoundRect style="position:relative;width:100;height:50px"></v:RoundRect>

图片:
<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 属性就可以了。看看下面的例子:
<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 来改变画布的属性进而改变画布里面的图形的展现。
<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>

我们用group很简单的改变了图像大小和角度。
到此我们基本介绍了所有vml的对象和属性,后面我会将shape的path专门提出来介绍,应为实在太强大了,以至于我们了解了shape之后上面这些形状我们完全都可以模拟出来。
新博客地址:l-zhi
发布了15 篇原创文章 · 获赞 2 · 访问量 3万+
展开阅读全文

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

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

分享到微信朋友圈

×

扫一扫,手机浏览