vml

zhengxuezhou

浏览: 148161 次
性别:
来自: 北京

最近访客更多访客>>

mywjch

sudongyan01

xumiao900

zjy_369

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS 360 BBS 脚本 HTML

示例网站http://bbs.blueidea.com/thread-2575802-1-1.html

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

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

一、使用大致步骤

1、加入vml命名空间

<html xmlns:v="urn:schemas-microsoft-com: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

描述图形是否使用背景

print

true

boolean

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

coordsize

1000,1000

Vector2D

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

coordorigin

0 0

Vector2D

元素的左上角坐标

wrapcoords

null

string

outline to use for tight text wrapping

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

默认值

值类型/范围

用途

id

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的应用

分享到：

jQuery小结 | jqeury提示框插件

2010-01-09 19:28
浏览 1750
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

vml

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

vml

评论

发表评论

相关推荐

weblogic+hibernate启动异常

web.xml 中的listener、 filter、servlet 加载顺序及其详解

hibernate c3p0配置

常用filter

Struts1文件上传

jspsmart实现文件上传下载及jspSmartUpload.jar下载

hibernate lazy

hibernate对象状态

Hibernate乐观锁和悲观锁浅析

jQuery小结

java调用webservice XFire

XMLHttpRequest对象和DOM对象

MVC框架的困惑

Struts2的学习途径

最近访客更多访客>>

jspsmart实现文件上传下载及jspSmartUpload.jar下载　