什么是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 id=shape1 name=shape1 οnmοuseοver="alert(this.id)" StrokeColor=red Path="m 0,0 l 10,10 x e"></v:shape>
等同于下面的写法:
<v:shape id=shape1 name=shape1 οnmοuseοver="alert(this.id)">
<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(图形文件)等等，以后将对这些对象细细描述。
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等对象。
Line是做图中最常用的，它有两个特殊的属性 from 和 to ,就是起始点和终止点坐标。
<v:line from="0,0" to="100,50" style="position:relative;"/>

●如果要改变线的样式，LineStyle (Stroke)属性可以做到:
Single(默认)，ThinThin，ThinThick，ThickBetweenThin
●如果要改变线的类型，可以用 DashStyle(Stroke)属性:

<v:line style="position:relative" 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="position:relative" 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="position:relative"/>

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

<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>

用VML画矩形，必须设置 style="width:50;height:50"，其他就没有什么特别的。在这节，顺便讲讲 shadow 对象和 TextBox对象：
<v:Rect style="position:relative;width:100;height:50px"/>

RoundRect顾名思义，是圆角的矩形，这种形状在画流程图的时候很常用，如果加上阴影，就更好看了：
<v:RoundRect style="position:relative;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="position:relative;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)是非常简单的，只要设置圆的高和宽就可以了。当然定位也是常用的：

<v:oval style="position:relative;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="position:relative;width:100;height:100" StartAngle="0" EndAngle="270" />
注意到没有，0角度是从平常的90度开始的。
Image 对象从外部调用一个图形文件，只要IE能够显示的格式都可以。需要注意的是，VML只用来显示这张图片，并没有将这图片矢量化，如果以后放大缩小，画质会改变的。

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

刚刚查询 MSDN 关于VML资料的时候，左边的相关菜单已经 Unavailable 了，这是否意味着 VML 将被 Microsoft 抛弃？因为有取VML和Flash之长处的 SVG 的崛起，VML 黯然失色，曾经问一个开发过VML软件的老外，他都强烈建议我使用SVG。但我觉得 SVG固然强大，但它和Flash一样，有自己的菜单，有自己固定的区域，和别的网页元素结合的不太好（个人观点），VML还是有其生存意义的。不过可以肯定，在IE以后的版本，对VML都是支持的。

转自天雪BLOG

转载于:https://www.cnblogs.com/Godblessyou/archive/2010/07/17/1779630.html

vml入门教程 【转】相关推荐

  1. VML编程之------VML语言入门《VML极道教程》原著:沐缘华

    <VML极道教程>原著:沐缘华 1章4节:VML语言入门 1:VML语言入门 - 极道学法 在我正式开始讲解.你正式开始学习VML语言以前,请务必遵循以下规则,可以达到最佳效果.极道学习方 ...

  2. leafLet入门教程兼leafLet API中文文档参考

    leafLet官方文档链接(英文原版):https://leafletjs.com/reference-1.3.4.html#marker-bindpopup 文章目录 leafLet教程 一.简单入 ...

  3. VML极道教程(五) RoundRect圆矩型

    本系列文章导航 VML极道教程(一) VML介绍 VML极道教程(二) VML入门 VML极道教程(三) 标记实战与line线 VML极道教程(四) oval圆rect矩型 VML极道教程(五) Ro ...

  4. 建立WEB两大经典！《VML极道教程》+FlashVml(闪耀之星)3.0中/英文版联合发布！

    该贴的内容,请务必字句阅读,因为这是免费赠送给所有WEBIT人的一个技术大蛋糕! 注释:以下所有的URL演示地址,因人流问题会较慢,其加载时请耐心等待,并尝试使用不同地址分流. <VML极道教程 ...

  5. VML极道教程(十二) VML编程大结局

    本系列文章导航 VML极道教程(一) VML介绍 VML极道教程(二) VML入门 VML极道教程(三) 标记实战与line线 VML极道教程(四) oval圆rect矩型 VML极道教程(五) Ro ...

  6. Kafka入门教程与详解

    1 Kafka入门教程 1.1 消息队列(Message Queue) Message Queue消息传送系统提供传送服务.消息传送依赖于大量支持组件,这些组件负责处理连接服务.消息的路由和传送.持久 ...

  7. 【CV】Pytorch一小时入门教程-代码详解

    目录 一.关键部分代码分解 1.定义网络 2.损失函数(代价函数) 3.更新权值 二.训练完整的分类器 1.数据处理 2. 训练模型(代码详解) CPU训练 GPU训练 CPU版本与GPU版本代码区别 ...

  8. python tornado教程_Tornado 简单入门教程（零）——准备工作

    前言: 这两天在学着用Python + Tornado +MongoDB来做Web开发(哈哈哈这个词好高端).学的过程中查阅了无数资料,也收获了一些经验,所以希望总结出一份简易入门教程供初学者参考.完 ...

  9. python向量计算库教程_NumPy库入门教程：基础知识总结

    原标题:NumPy库入门教程:基础知识总结 视学算法 | 作者 知乎专栏 | 来源 numpy可以说是 Python运用于人工智能和科学计算的一个重要基础,近段时间恰好学习了numpy,pandas, ...

最新文章

  1. U811.1接口EAI系列之一--通用把XML传送给EAI处理方法--PowerBuilder语言
  2. 语义分割损失函数系列(2):IoU损失
  3. ios8 定位问题解决思路
  4. 退出Activity（转）
  5. Web前后端笔记-通过对称加密算法和信息摘要算法防止数据重放
  6. 科研小技巧——论文投稿视频制作指南
  7. 丹尼带你入坑无人机3 - 四轴飞行原理
  8. 金盾高级视频加密系统使用教程与经验分享 （金盾视频加密系统跨平台版）
  9. OpenCV-Python实战（番外篇）——OpenCV中利用鼠标事件动态绘制图形
  10. 让员工都是决策者！受到丰田集团启发：让企业少花500万的诀窍
  11. 程序员晒工资，工作 3 年被应届生倒挂！网友：工作 8 年被你倒挂！
  12. 思科交换机如何配置Trunk？
  13. TX2安装opencv3.4.0
  14. python版亲戚关系计算器
  15. 爬虫项目八：Python对天猫商品数据、评论数据爬取
  16. 彝文计算机,计算机彝文信息处理主流技术的分析与探讨
  17. 5G NR协议学习--TS38.211主要参数解读
  18. 深度学习---从入门到放弃(一)pytorch基础
  19. 巧用美女照做微信吸粉，你会做吗？
  20. 《这就是搜索引擎》爬虫部分摘抄总结

热门文章

  1. python编程画布_Python Tkinter 画布（Canvas）
  2. mysql utf8mb4 bin_MySQL中utf8字符集、排序规则及utf8mb4_bin列大小写不敏感方法
  3. cms文章 mysql存储_MySQL存储引擎笔记
  4. docker+mysql+授权_docker安装mysql, 授权远程连接
  5. mysql multi innobackupex,mysql之 Innobackupex（全备+增量）备份恢复
  6. 计算机中信息表示方法,计算机中的信息表示方法二进制
  7. html js url 跳转页面内容,js跳转页面方法总结
  8. linux用pe大小做逻辑卷,Linux常用命令之--逻辑卷
  9. php 过滤入库不可见字符,php如何过滤不可见字符
  10. java string类型时间比较大小吗_Java String类型时间比较大小