65.9K
CodeProject 正在变化。 阅读更多。
Home

VML 简介

SimonS
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.86/5 (4投票s)

2002年1月17日

3分钟阅读

viewsIcon

296870

本文简要概述了 VML，并展示了该项很酷的技术的一些示例和实际应用。

引言

当我第一次开始接触 HTML 时，我不明白为什么没有绘制形状和非水平线的功。直到几年后我才发现了 VML（很快将被 SVG 取代）。 别误会，HTML 是一个非常强大的 GUI 工具，但随着 Web 矢量图形的出现，它的功能呈指数级增长。

概述

VML（矢量标记语言）是一项允许开发人员直接在 HTML 页面上绘制图形的技术，就像在 GDI 画布上一样。 语法由两部分组成：标记和代码。 这些是相互排斥的。 遗憾的是，由于其采用率非常慢，VML 对象模型文档很少，并且在示例中使用也很少（这里也是）。 要使用 VML，您需要确保 IE5.0 安装包含了 VML 插件。 这是一个非常基本的 VML 形状。

想在您的机器上运行一个完整的示例吗？ 首先，您需要将命名空间“导入”到您的 HTML 页面中

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

接下来，您需要在页面中添加一个新的 behaviour

<style>
	v\:* { behavior: url(#default#VML); }
</style>

就是这样。 它不会做任何事情，但它使您的页面具有 VML 感知能力。 其余示例将假设使用此基本代码。 尝试将此代码添加到 <body> 标签中的任何位置

<v:roundrect style="width:150pt;height:50pt"/>

请注意，有效的 XML 语法适用。 如果您不遵守此公理，则页面可能会以不可预测的方式显示，并且使调试非常繁琐。 实际的 VML 标记非常容易理解且易于阅读（XML 标准的一般目标）。 请注意 v: 标签前缀，这指定 IE 渲染引擎应以不同于其他标签的方式处理此示例中的 roundrect 标签。

详细视图

那么，重点是什么？ VML 的优势之一是与图像相比，其体积非常小。 根据您设计的 Web 应用程序的类型，这可能就足够了。 还有

  • 能够在加载后更改样式（颜色等...）。
  • 能够进行动态脚本。（稍后解释）

因此，希望您可以看到 VML 不仅仅是一个扭曲的 1x1 像素图像。 这是我 long 想在 HTML 中实现的著名对角线的代码

<v:line from="10,10" to="100,100"/>

此代码确实简洁明了（尽管对于简单的形状而言）。 对于这种类型的形状，使用 from(x,y) to(x,y) 坐标语法。 上面的示例可能足以满足大多数简单的 Web 图形需求，但让我们深入探讨更多内容。

尝试这个

<v:oval style="position:absolute;top:100;left:100; width:150pt;height:50pt" fillcolor="green"/>

相同的概念，只是不同的形状。 请注意众所周知的 style 标签属性。

这是一个使用一堆不同形状的示例。

<v:line strokecolor="red"
   strokeweight="2pt"  from="100pt,100pt" to="200pt,150pt">
   <v:stroke endarrow="diamond"/>
</v:line>
 
<v:line strokecolor="yellow"
   strokeweight="2pt"   from="100pt,100pt" to="50pt,100pt" >
   <v:stroke endarrow="classic"/>
</v:line>
 
<v:line strokecolor="blue"
   strokeweight="2pt" from="100pt,100pt" to="120pt,120pt" >
   <v:stroke endarrow="block"/>
</v:line>

<v:line strokecolor="black"
   strokeweight="2pt"  from="100pt,100pt" to="150pt,200pt">
   <v:stroke endarrow="none"/>
</v:line>

<v:line strokecolor="green"
   strokeweight="2pt"  from="100pt,100pt" to="200pt,85pt">
   <v:stroke endarrow="oval"/>
</v:line>

<v:line strokecolor="green"
   strokeweight="2pt"  from="100pt,100pt" to="200pt,100pt">
   <v:stroke endarrow="open"/>
</v:line>

<v:oval style="width:100pt; height: 50pt" fillcolor="pink" />

<v:curve from="10pt,10pt" to="100pt,10pt" control1="40pt,30pt" control2="70pt,30pt"></v:curve>

<v:rect id=myrect fillcolor="red" 
   style="position:relative;top:100;left:100;width:20;height:20;rotation:10">
</v:rect>

对于大多数人来说，在 HTML 中使用注释可能是一个非常好的计划。

关于 VML 作为图形工具，最棒的事情之一是所有绘图事件都为您处理。 尝试最小化浏览器或“取消最大化”它，并将其一部分移出屏幕边缘然后再次移入。 它会自行重绘 - 并且没有明显的性能损失！ 这对于那些图形人员来说是一个巨大的好处。

实际应用呢？ 这是我声称在失眠症发作期间编写的绘图引擎的输出。

这种方法相对于标准的“让服务器制作 gif”的想法，有一个巨大的优势，即客户端（浏览器）可以根据客户端的意愿更改形状。 我通过为每个适用的形状提供一个 id，并使用内联事件处理程序来设置如何处理 mousedown、mousemove 和 mouseup 事件来实现此目的。 之后，只需实现一些拖放代码即可。 所以，换句话说，就 JScript/VBScript 而言，VML 形状仍然是对象。

您还可以用来绘制形状的另一种技术是坐标对。 这种方法手工编码起来可能要棘手得多，但确实可以让你（几乎）无限地控制你的 Web 呈现。

这是一个例子

<v:polyline points="5pt,10pt 15pt,20pt 100pt,50pt 50pt,100pt 5pt,10pt"/>

结论和行动呼吁

目前，SVG 规范将超越 VML，并将最终得到主流浏览器的原生支持。 但与此同时，VML 易于使用，可以为低级 Web 开发人员提供一种新的表达途径。

© . All rights reserved.