VML资料.docx
- 文档编号:9969125
- 上传时间:2023-02-07
- 格式:DOCX
- 页数:12
- 大小:20.22KB
VML资料.docx
《VML资料.docx》由会员分享,可在线阅读,更多相关《VML资料.docx(12页珍藏版)》请在冰豆网上搜索。
VML资料
1VML概述
在VML里面,标记使用的是XML扩张,需要一个namespace(命名空间),你可以使用惯用的“v”作为命名空间,使用IE5.0到IE6.0通用的定义如下:
v="urn: schemas-microsoft-com: vml"> v\: *{Behavior: url(#default#VML)} xmlns全称就是XMLNameSpace也就是命名空间。 Behavior(行为)也是IE5.0新推出的东西,它的功能非常强大,结合样式表,可以给任何HTML对象增加行为(新的属性、方法、事件),而在这里,它的用处是把命名空间“v”和系统预定义的行为VML连接。 这样定义以后,你就可以使用下面的标记了,和普通的HTML标记有所区别,每个标记都增加了一个命名空间: shape> shape> 和其他HTML元素一样,VML标记里面可以定义DHTML大部分属性和事件,比如说id,name,title,onmouseover等等。 在写法上VML比较灵活,很多属性既可以写在标记里面,又可以独立出一个新的标记来表示: shapeid=shape1name=shape1onmouseover="alert(this.id)"StrokeColor=redPath="m0,0l10,10xe"> shape> 等同于下面的写法: shapeid=shape1name=shape1onmouseover="alert(this.id)"> StrokeStrokeColor=red/> Pathv="m0,0l10,10xe"/> shape> 当然不是所有的属性都可以写成独立的标记,常用的比如说上面的Stroke(按我的理解可以翻译成线性),Path,Shadow,Fill(填充)等,VML这样的方式可以理解为shape的属性分类,使属性更直观。 Shape对象派生出来的一些对象,更加直接的图象,比如说Rect(矩形),RoundRect(圆边的矩形),Oval(圆),Line(线),PolyLine(不规则折线),Image(图形文件)等等,以后将对这些对象细细描述。 2语法 VML标记是从XML衍生出来,因而采用的都是符合XML规范的标签。 在标签中,属性和元素不区分大小写。 True和False可以简写为t和f。 2.1shape图形 Shape是VML最基本的对象,利用它可以画出所有想要的图形。 在VML中,使用的坐标并不是Document的坐标,它有自己的坐标系,这样一来,动态改变它的坐标,就可以实现放大、缩小、旋转等功能了。 shape的CoordSize属性就是用来定义坐标的,它有两个参数, shapeCoordSize="2800,2800"/>,这里的2800,2800是横纵坐标被分成了2800个点,并不是HTML里面默认像素。 如果没有设置圆点,VML默认是0,0(左上角),当然你也可以使用CoordOrig属性设置VML的圆点坐标。 shapeCoordOrig="-1400,-1400"CoordSize="2800,2800"style="width: 500;height: 500"/> 注意: 定义的坐标只是相对的,真正显示的图形大小还需要style="width: 500;height: 500"来定义! 上面的定义后,你可用的坐标是x(-1400到1400)y(-1400到1400),这样的坐标就像数学里面的坐标了,把画版分成了四个块。 shape中最主要的属性是Path,它是个功能强大的画笔,语法很简单,由几个字母组成,下面详细讲述: mx,y: MoveTo把画笔移动到(x,y); lx,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可以在 Fill/>中使用,StrokeColor、StrokeWeight可以在 Stroke/>中使用。 也可以在Shape或者继承Shape的对象中使用它。 2.2ShapeType 定义shape的模版,在应用中可以重复使用。 shapetypeid="arrowDown"coordsize="66"> pathv="m0,0l3,6,6,0,0,0xe"/> shapetype> 定义ShapeType时需要指定id,在后面使用ShapeType需要指定对应shape的type为#arrowDown就可以使用ShapeType模版。 注意: Adj属性的用法,需要与v: formulas结合起来使用。 Adj中的参数顺序为#1,#2,…#n,formulas中的顺序为@1,@2,…@n。 2.3Line线段 用法: linestyle="position: relative"from="0,0"to="100,0"> strokedashstyle="Dot"/> —线风格--> line> 线颜色、风格定义可以通过v: stroke来设定。 2.4PolyLine不规则折线 用法: PolyLinefilled="false"Points="0,00,10020,150200,100"style="position: relative"/> strokeStartArrow="Oval"EndArrow="Classic"dashstyle="Dot"/> PolyLine> IE5.0不支持箭头,如果设置填充为true那么对应的多边形必须是闭合才能显示填充颜色。 2.5Rect矩形 用法: Rectstyle="position: relative;width: 100;height: 50px"/> 2.6RoundRect圆角矩形 用法: RoundRectstyle="position: relative;width: 100;height: 50px"> shadowon="T"type="single"color="#b3b3b3"offset="5px,5px"/> RoundRect> Arcsize圆角的大小默认为0.2。 2.7Oval椭圆 用法: ovalstyle="position: relative;left: 5;top: 5;width: 100;height: 80"/> 需要注意的是,top和left是圆的左上角坐标,width和height是圆的宽和高,不是圆的半径。 其圆心坐标是(left-width/2,top-height/2)。 2.8Arc弧 用法: arcfilled=falsestyle="position: relative;width: 100;height: 100"StartAngle="0"EndAngle="270"/> 注意: 0角度是从平常的90度开始的。 2.9Fill填充 相关属性及说明: 属性名称 说明 id 唯一编号 type 填充类型,可以是“solid|gradient|gradientradial|tile|pattern|frame”,“Tile”,“pattern”和“frame”要求必须设置Image属性。 “Gradient”,“gradientradial”和“gradienttitle”要求gradient属性必须设置。 On 是否加载填充 color 填充颜色 Color2 渐变中的第二颜色 opacity 透明度 Image属性 Src 图片对应的url地址 Size 图片大小。 默认为自动 Origin 与左上角相对位置作为图片的左上角。 默认为图片中心点。 position 外接矩形放置图片的位置。 默认为“auto” alignshape 与图形对齐 渐变相关属性(gradient) colors 不同颜色在渐变中所占比例如(30%red,70%blue) Angle 渐变起始角度 Focus 线形渐变的焦点 focussize focusposition method “none”,“linear”,“sigma”或者"any" 2.10Stroke 相关属性及说明: Id 唯一标识 On 是否加载样式默认为true Weight 线宽度 color 颜色 Color2 用于渐变颜色中的第二颜色 Opacity 透明度 style 样式"single","thinthin"(1: 1: 1),"thinthick",(1: 1: 2)"thickthin"(2: 1: 1),"thickbetweenthin"(1: 1: 2: 1: 1) miterlimit 连接点处内点和外点的最大距离 joinstyle "round"–roundedjoin,"bevel"–beveledjoin,"miter"–miterjoin,默认为“round” Endcap “flat”,“square”,“round”,默认为“round” dashstyle 线样式(“solid|dot|dash|dashdot|longdash|longdashdot|longdashdotdot”),默认为“solid” filltype 填充类型("solid","tile","pattern","frame"),默认为“solid” Src imagesize imagealignshape startarrow 起始箭头风格 startarrowwidth startarrowlength endarrow 结束箭头风格 endarrowwidth endarrowlength 2.11Path 在path中既包含了点坐标的信息也包含对应的命令信息常用的有以下命令: m移动到指定位置。 l从前面一点画一条线到指定的坐标位置。 c从当前点画弧线到指定坐标位置。 x线段闭合,即从当前点与起始点建立线段连接形成闭合图形。 e画线结束。 如path=“m3,0l0,66,63,0xe”表示的是从(3,0)点出发先画一条线到(0,6),然后再画一条线段到(3,0),x表示闭合即从(3,0)到起点再画一条线段,最后e表示画线结束 本文来自CSDN博客,转载请标明出处: VML的简介 2007-07-3110: 55 VML的全称是VectorMarkupLanguage(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途。 VML支持广泛的矢量图形特征,它们基于由相连接的直线和曲线描述路径。 在VML中使用两个基本的元素: shape和group。 这两个元素定义了VML的全部结构;shape描述一个矢量图形元素,而group用来将这些图形结合起来,这样它们可以作为一个整体进行处理。 VML规范包括大量的支持多种不同矢量图形特征的元素,包括Shape、Path、Line、Polyline、Curve、Rect、Roundrect、Oval、Arc、Group。 VML常用的几个元素 1.Shape元素 用法: shape...> shape> 它的常用属性: FillColor: 图象填充色。 标签语法: elementfillcolor="expression"> 脚本语法: element.fillcolor="expression" expression=element.fillcolor Path: 指定绘画的路径 脚本用法: shapeid="rect01" fillcolor="red"strokecolor="red" coordorigin="00"coordsize="200200" style="position: relative;top: 1;left: 1;width: 20;height: 20" path="m1,1l1,200,200,200,200,1xe"> shape> 说明: 用字母m(moveto命令)定义图象初始点的坐标,例子中为(1,1) 用字母l(小写的L字母,lineto命令)开始画线,先画到(1,200),再画到(200,200),再画到(200,1) 用字母x(close命令)关闭线条 用字母e(end命令)结束 注意: 每两个数字组成一个坐标 Title: 鼠标移动到图象上时的提示文字 Style: 图象的样式 Filled: 决定闭合路径中是否需要填充(True/False) StrokeColor: 图象路径的颜色 2.Shape元素有效的子元素 TextBox: 在图象中定义一个文本框 用法: shape> textbox>VML textbox> shape> TextPath: 设置文字路径,要使用该属性,path属性的TextPathOK一定要为true;并且TextPath的on属性要为true example: v="urn: schemas-microsoft-com: vml" xmlns: o="urn: schemas-microsoft-com: office: office"> v\: *{behavior: url(#default#VML);} o\: *{behavior: url(#default#VML);} shapefillcolor="green" style="position: relative;top: 100;left: 100;width: 300;height: 300" path="m1,1l1,250,250,500,500,500,500,250,250,1xe" title="test"strokeColor="yellow"> filltype='gradient'id='fill1'color='yellow'/> textbox>VML textbox> shape>