VML概览

最新推荐文章于 2022-07-25 21:46:19 发布

小宇丝

最新推荐文章于 2022-07-25 21:46:19 发布

阅读量1.7k

点赞数

分类专栏： VML 文章标签：图形 textbox vector behavior path css

VML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

http://blog.csdn.net/hemingwang0902/article/details/4303423

VML的全称是Vector Markup Language(矢量标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量。

VML是微软1999年9月附带IE5.0发布的，故只有IE5.0以上版本对VML提供支持。

一、使用大致步骤

1、加入vml命名空间

2、CSS中加入behavior（行为）

<style>

v\:*{behavior:url(#default#VML); position:absolute;}

</style>

3、使用VML标记

<v:标记…../>

二、特殊写法

1、很多属性既可以写在标记里面，又可以独立出一个新的标记来表示。（类似于XML）

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

等同于:

<v:shape id=shape1>

<v:Stroke StrokeColor=red/>

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

</v:shape>

2、多参数间的逗号（，）可要可不要。

如：coordsize="6,6"

等同于coordsize="6 6"

三、VML坐标系

在VML中，使用的坐标不是Document的坐标，它有自己的坐标系。如：

<v:shape CoordOrig="m1,m2" CoordSize="n1,n2" style="width:n3;height:n4" />

// CoordOrig属性：设置原点坐标。如果没有设置，默认是0,0（左上角）

//CoordSize属性：用来定义坐标的，表示横纵坐标被分成了n1、n2个点，而非像素。

定义的坐标只是相对的，真正显示的图形大小还需要 style="width:n3;height:n4" 来定义

四、通用属性

1、VML特有的通用属性（HTML、CSS不具有）

属性名

默认值

值类型/范围

用途

strokeweight

0.75pt=1px

number

描述图形的边框粗度

strokecolor

black

color

描述图形的边框颜色

stroked

true

boolean

描述图形是否使用边框

fillcolor

white

color

描述图形的背景颜色

filled

true

boolean

描述图形是否使用背景

true

boolean

描述图形是否允许被打印机打印

coordsize

1000,1000

Vector2D

暗示图形与容器空间的大小比例

coordorigin

0 0

Vector2D

元素的左上角坐标

wrapcoords

null

string

outline to use for tight text wrapping

2、VML标记支持的HTML通用属性

属性名

默认值

值类型/范围

用途

null

string

定义元素的标识索引

class

null

classname

定义元素使用的CSS样式类

style

null

CSS string

描述图形的CSS样式表

title

null

string

定义图形的提示标题

href

null

string

定义图形链接的URL地址

target

_self

_self/_blank/_top

定义图形以何种形式打开链接

contentEditable

false

boolean

描述图形内容是否允许用户编辑

dir

ltr

ltr/rtl

描述图形内容以哪种方向输出

disabled

false

boolean

描述图形能够响应用户事件触发

3、VML标记支持的CSS通用属性

属性名

可用值/可用值范围

用途

width

0-9999

描述宽度

height

0-9999

描述高度

position

static/absolute/fixed/relative

描述如何定位输出

left

0-9999

描述距离页面位置左

top

0-9999

描述距离页面位置上

z-index

0-9999

描述3D位置

cursor

auto/crosshair/hand/move/help/wait/ text/…

描述鼠标形状

zoom

0-99

描述缩放比例

clip

rect(上右下左)

描述裁剪对象

border

0-99 style color

描述边框

display

block/none/inline/list-item

描述显示或隐藏

overflow

visible/auto/hidden/scroll

描述滚动条

color

colorstring

描述文本内容颜色

font-size

0-999

描述文本内容字号

filter

xray/flipv/fliph/invert/alpha(opacity=num)

描述滤镜效果

rotation

(0-9999)%360

描述旋转度

flip

x y

描述反转或颠倒图形

……

五、基本标记

1、shape（任意形状）

示例：创建任意曲线

<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 x e"/>

2、line（直线）

示例：创建一条从(0,0)到(200,200)的红色的边框为2px的直线

<v:line strokecolor="red" strokeweight="2" style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>

3、polyline(多义线/多边形)

示例：创建不规则的连续线

<v:polyline style="z-index:1;left:71;position:absolute;top:225" points="0,0,30,-40,100,100,0,0" filled="t" fillcolor="white"/>

4、rect(矩形) 、roundrect(圆角矩形)

示例：创建一个宽100高100的矩形

<v:rect style="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/>

//其它属性：其高宽主要由style中的width和height决定（必须）

5、oval(圆)、arc(圆弧)

示例：创建一个宽400高400边框为红色填充为绿色的圆

<v:Oval strokecolor=”red” fillcolor=”green” style=”width:400;height:400;left:5;top:5”/>

6、curve(曲线)

示例：创建一条曲线

<v:curve style="z-index:1;left:100;position:absolute;top:300" from="0px,0px" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/>

7、background(背景)：

示例：

<v:background fillcolor="white">

<v:fill angle=50 type='gradient' color2="yellow"/>

</v:background>

8、image（图像）：显示从外部调用的图形文件，并没有将之矢量化。

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

9、shapetype(模板)：为减少代码的书写量和可读性。用shapetype定义好形状，然后用shape的type属性调用(<v:shape type=”id名”…/>)

示例：定义一个向上的三角形，然后调用之

//定义一个向上的三角形

<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;left:100;top:100"/>

<v:shape type="#arrowUP" style="position:relative;width:150;height:150; left:200;top:200"/>

10、group(集合容器)：让一些列的对象成为一个组，拥有共同的坐标系。可以动态改变CoordSize的值放大或缩小整个Group里面的VML对象。

<v:group id="group1" style='position:absolute;left:0;top:0;z-index:1;width:100;height:100' coordsize="100,100">

<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>

<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>

<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>

</v:group>

//当使用group后，容器内图形的left、top、width、height等值都是相对group的值。

六、二级标记

二级标记可以看作是对有限的属性进行扩展，利用它我们可以做出更漂亮的图画出来。

1、fill(填充)

2、stroke(边框)

3、shadow(阴影)

示例：创建一个偏离5像素的阴影

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

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

</v:RoundRect>

4、extrusion(立体3D)

5、textbox（文本）

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

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

</v:RoundRect>

6、imagedata(背景图片)

7、textpath（文本路径）

七、应用

1、脚本动态生成VML 2、放大缩小VML

3、给VML增加事件 4、数据图表——统计图表

5、矢量地图——GIS的应用 6、文本修改留痕——MIS的应用

小宇丝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VML概览

http://blog.csdn.net/hemingwang0902/article/details/4303423 VML的全称是Vector Markup Language(矢量标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量。VML是微软1999年9月附带IE5.0发布的，故只有IE5.0以上版本对VML提供支持。一、使用大致步骤1、加入vml命
复制链接

扫一扫