风&冷

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
  5 Posts :: 1 Stories :: 2 Comments :: 0 Trackbacks

VML的基本概念

VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的,在我认为, VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML,其中的文本和图片可以很容易的转换,但如果是手绘制的图形在以往的IE里面就无法解释了,如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE里面,使IE也具备了绘图功能。

  VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途。为了显示它的强大,和增加你学习VML的信心,先给你看看一个VML例子:

Hello world!

Hello VML!

  在VML里面,标记使用的是XML扩张,需要一个namespace(命名空间),你可以使用惯用的“v”作为命名空间,使用IE5.0到IE6.0通用的定义如下:

<html xmlns:v="urn:schemas-microsoft-com:vml">

<STYLE>

v\:* { Behavior: url(#default#VML) }

</STYLE>

  xmlns 全称就是XML NameSpace 也就是命名空间。Behavior(行为)也是IE5.0新推出的东西,它的功能非常强大,结合样式表,可以给任何HTML对象增加行为(新的属性、方法、事件),而在这里,它的用处是把命名空间“v”和系统预定义的行为VML连接。这样定义以后,你就可以使用下面的标记了,和普通的HTML标记有所区别,每个标记都增加了一个命名空间:

<v:shape></v:shape>

  和其他HTML元素一样,VML标记里面可以定义DHTML大部分属性和事件,比如说id,name,title,onmouseover等等。在写法上VML比较灵活,很多属性既可以写在标记里面,又可以独立出一个新的标记来表示:

<v:shape StrokeColor=red Path="m 0,0 l 10,10 x e"></v:shape>

等同于下面的写法:

<v:shape >

<v:Stroke StrokeColor=red/>

<v:Path v="m 0,0 l 10,10 x e"/>

</v:shape>

  当然不是所有的属性都可以写成独立的标记,常用的比如说上面的 Stroke(按我的理解可以翻译成线性),Path,Shadow,Fill(填充)等,VML这样的方式可以理解为 shape 的属性分类,使属性更直观。

  Shape 对象派生出来的一些对象,更加直接的图象,比如说 Rect(矩形),RoundRect(圆边的矩形),Oval(圆),Line(线),PolyLine(不规则折线),Image(图形文件)等等,以后将对这些对象细细描述。

vml 技术教程连载(二) Shape对象与VML坐标系

Shape是VML最基本的对象,利用它可以画出所有你想要的图形。在VML中,使用的坐标并不是Document的坐标,它有自己的坐标系,这样一来,动态改变它的坐标,就可以实现放大、缩小、旋转等功能了。shape的 CoordSize 属性就是用来定义坐标的,它有两个参数,<v:shape CoordSize="2800,2800" />, 这里的2800,2800 是横纵坐标被分成了2800个点,并不是HTML里面默认像素。如果没有设置圆点,VML默认是 0,0 (左上角),当然你也可以使用 CoordOrig 属性设置VML的圆点坐标。

<v:shape CoordOrig="-1400,-1400" CoordSize="2800,2800" style="width:500;height:500" />

  注意:定义的坐标只是相对的,真正显示的图形大小还需要 style="width:500;height:500" 来定义!

  上面的定义后,你可用的坐标是 x(-1400到1400) y(-1400到1400) ,这样的坐标就像数学里面的坐标了,把画版分成了四个块。

  在解决实际问题的时候,我发现,IE会自动把可见的VML图象放在相对的(0,0)位置,意思是说,上面两张图如果没有增加两个辅助的坐标,在IE上显示出来是并列的两个正方形。

  shape中最主要的属性是Path,它是个功能强大的画笔,语法很简单,由几个字母组成,下面详细讲述:

m x,y:MoveTo把画笔移动到 (x,y);

l x,y:LineTo从当前点到(x,y)画一条线;可以给连续的几个点,VML会连续画出来直到遇到 x 命令。

x:Close结束一条线;

e:End结束画图

  shape的其他常用属性:

FillColor:填充颜色,使用HTML中规定的颜色;例如:fillcolor=red

Filled:是否要填充图形,如果图形不是封闭的,也会自动封闭图形进行填充。当Filled="true"(默认),fillcolor才有效果;

StrokeColor:线的颜色;

StrokeWeight:线的宽度;

Title:当鼠标移动到该图形上的时候,显示的文字,和HTML里面的alt、tilte一样;

Type:指定该图形属于那个ShapeType,ShapeType可以为VML制定模版,将在以后加以描述;

  前面的这些属性,FillColor、Filled可以在<v:Fill />中使用,StrokeColor、StrokeWeight可以在<v:Stroke />中使用。也可以在 Shape 或者 继承Shape的对象中使用它。

  在下面几节,将详细介绍 Shape 延伸出来的一些具体对象,诸如 Rect、RoundRect、Oval、Line等对象。

vml 技术教程连载(三) Line,Polyline(线)对象

Line是做图中最常用的,它有两个特殊的属性 from 和 to ,就是起始点和终止点坐标。

  <v:line from="0,0" to="100,50" style=";"/>

●如果要改变线的样式,LineStyle (Stroke)属性可以做到:

  Single(默认),ThinThin,ThinThick,ThickBetweenThin

●如果要改变线的类型,可以用 DashStyle(Stroke)属性:

  <v:line style="" from="0,0" to="100,0" >

  <v:stroke dashstyle="Dot"/>

  </v:line>

  Solid(默认):见上图

  ShortDash:

  ShortDot:

  ShortDashDot:

  ShortDashDotDot:

  Dot:

  Dash:

  LongDash:

  DashDot:

  LongDashDot:

  LongDashDotDot:

●在画坐标的时候,需要箭头,VML已经定义好了箭头,在Stroke体现:EndArrow 和 StartArrow 属性,一个是线开始的时候有箭头,另一个是线结束的时候有箭头。箭头的样式也有不少:

  <v:line style="" from="0,0" to="100,0" >

  <v:stroke EndArrow="Classic"/>

  </v:line>

  EndArrow="Block":

  EndArrow="Classic":(这个看起来还比较舒服)

  EndArrow="Diamond":

  StartArrow="Oval":

  StartArrow="Open":

  PolyLine是 Line 的变形,是不规则的连续的线。它有个特殊的属性 Points ,用来设置每个点的坐标。例如:

  <v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style=""/>

  一样可以设置它的线的样式和类型以及箭头 ( IE5.0中,PolyLine不支持 Arrow )

  <v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style=""/>

  <v:stroke StartArrow="Oval" EndArrow="Classic" dashstyle="Dot" />

  </v:PolyLine>

vml 技术教程连载(四) Rect,RoundRect(矩形)对象

用VML画矩形,必须设置 style="width:50;height:50",其他就没有什么特别的。在这节,顺便讲讲 shadow 对象和 TextBox对象:

  <v:Rect style=";width:100;height:50px"/>

  RoundRect顾名思义,是圆角的矩形,这种形状在画流程图的时候很常用,如果加上阴影,就更好看了:

  <v:RoundRect style=";width:100;height:50px">

  <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>

  </v:RoundRect>

  在VML里面,True 和 False 可以简写成 T 和 F。Shadow 中的 offset 属性用来设置 偏移原图的 x,y 值。 on 属性用来决定是否显示阴影。在矩形中写字,要用到 TextBox 对象。TextBox 比较关键的属性是 inset(left,top,right,bottom),意思是隔图形边的上下左右多少范围内定位文字:

  <v:RoundRect style=";width:120;height:50px">

  <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>

  <v:TextBox inset="5pt,5pt,5pt,5pt" style="font-size:10.2pt;">Hello world!</v:TextBox>

  </v:RoundRect>

Hello world!

  当然你也可以直接插入HTML代码,比如说插入一个

<Div style="padding-top:5px;padding-left:5px;padding-right:5px;padding-bottom:5px">Hello World!</Div>

效果是一样的。

vml 技术教程连载(四) Oval(圆)对象

用VML画圆(Oval)是非常简单的,只要设置圆的高和宽就可以了。当然定位也是常用的:

  <v:oval style=";left:5;top:5;width:100;height:80"/>

  还要注意的是,top和left是圆的左上角坐标,width 和 height 是圆的宽和高,不是圆的半径。其圆心坐标是(left-width/2,top-height/2)。

  说到圆,不得不想到弧(arc) VML已经定义了弧对象,它有除了圆的基本性质外,两个特殊的属性startangle 和 endangle ,就是起始角度和结束角度,单位是度,而不是弧度:

  <v:arc filled=false style=";width:100;height:100" StartAngle="0" EndAngle="270" />

  注意到没有,0角度是从平常的90度开始的。

vml 技术教程连载(四) Image(图像)对象

Image 对象从外部调用一个图形文件,只要IE能够显示的格式都可以。需要注意的是,VML只用来显示这张图片,并没有将这图片矢量化,如果以后放大缩小,画质会改变的。

  <v:image src="big.GIF" style=";top:0;left:0;width:165;height:157" />

  刚刚查询 MSDN 关于VML资料的时候,左边的相关菜单已经 Unavailable 了,这是否意味着 VML 将被 Microsoft 抛弃?因为有取VML和Flash之长处的 SVG 的崛起,VML 黯然失色,曾经问一个开花过VML软件的老外,他都强烈建议我使用SVG。但我觉得 SVG固然强大,但它和Flash一样,有自己的菜单,有自己固定的区域,和别的网页元素结合的不太好(个人观点),VML还是有其生存意义的。不过可以肯定,在IE以后的版本,对VML都是支持的。如果你要查询一些VML的原始资料,可以访问下面的地址:http://msdn.microsoft.com/workshop/author/vml/shape/introduction.asp?frame=true

vml 技术教程连载(五) Group容器

Group的使用很简单,但功能很强大。它能让一系列的VML对象使用共同的坐标系,它很常用的,基本上如果使用了超过一个VML对象的页面都使用Group。使用Group还有个好处,就是可以动态改变CoordSize值放大或缩小整个 Group 里面的VML。

<v:group style=";WIDTH:200px;HEIGHT:200px;" coordsize = "2000,2000">

<v:rect style="WIDTH:2000px;HEIGHT:2000px" fillcolor="#99cccc">

  <v:shadow on="t" type="single" color="silver" offset="5pt,5pt">

</v:rect>

<v:oval style=";top:100;left:100;width:1000;height:1000;z-index:7;" fillcolor="red" strokeColor="red"/>

<v:rect style=";top:500;left:300;width:1000;height:1000;z-index:8;" fillcolor="blue" strokeColor="blue"/>

<v:line from="200,200" to="1000,1700" style="z-index:9" fillcolor="yellow" strokeColor="yellow" strokeWeight=2pt/>

</v:group>

  相信如果你看懂了上面的代码,对 Group 一定理解了。上面使用了一个和Group一样大小的 Rect 作为 Group的边框,然后加上阴影渲染。用MSDN的一个很有意思的例子再看看 Group 的重要用法:(改变滚动条的值,右边的图片会相应的旋转)

  该例子中,那张图片完全是用VML画出来的,动态改变 Group 的 Rotation 属性就可以实现整个 Group 里面的对象旋转。

vml 技术教程连载(六) ShapeType给VML制作模版

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

<v:shapetype coordsize="6 6"> <!--三角形 向上-->

  <v:path v="m 3,0 l 0,6,6,6,3,0 x e" />

</v:shapetype>

<v:shapetype coordsize="6 6"> <!--三角形 向下-->

  <v:path v="m 0,0 l 3,6,6,0,0,0 x e" />

</v:shapetype>

  定义好上面的模版后,以后就可以直接调用了:

  <v:shape type="#arrowUP" style=";width:50;height:50"/>

  <v:shape type="#arrowDown" style=";width:50;height:50"/>

  <v:shape fillcolor=blue type="#arrowDown" style=";width:80;height:80" />

  不知道大家有没有注意到,VML里面对“,”使用不强制的,你可以使用 coordsize="6,6" 也可以使用 coordsize="6 6" ,效果是一样的。

posted on 2010-02-25 15:35 逸*风 阅读(...) 评论(...) 编辑 收藏