VML简介

分享于 

6分钟阅读

Web开发

  繁體

介绍

当我首先开始使用HTML时,我无法理解为什么没有功能绘制形状和非水平线。 在几年之后我发现了 VML ( 即将被SVG替代)。 不是错误,HTML是一个非常强大的GUI工具,但随着向量图形的出现,它的功率呈指数。

概述

VML是允许开发人员直接在HTML页面上绘制的技术,就像它是GDI画布一样。 语法由 2部分组成: 标记和代码。这些是互斥的。 不幸的是,可以能是由于采用速率非常慢,文档模型很差,很少用于示例( 这里也是)。 为了使用 VML,你需要确保 IE5.0 安装包含VML插件。 这是一个真正基本的VML形状。

想在你的机器上得到完整的样例? 首先,你需要将命名空间"导入"添加到HTML页面中:

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

接下来,你将需要向页面添加一个新的behaviour:

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

就是这样它不会做任何事情但这会让你的网页。 这里基础代码将被假定为其他示例。 尝试在 <body> 标记的任何位置添加这里选项:

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

请注意,有效的XML语法应用于。 如果不遵守这里公理,那么页面可以显示不可以预测的,并使调试非常繁琐。 实际的VML标记是相当自我解释和人类可读的( XML标准的一般目标)。 注意 v: 标记前缀,它指定给 IE 呈现引擎,这个例子中的roundrect 标记将不同地处理它的他标记。

详细视图:

这是什么意思一个优点是它的分钟大小与图像比较。 根据你设计的webplications的类型,这可能是合理的。 同样:

  • 加载时更改样式( 颜色等。)的能力。
  • 动态脚本的功能。 ( 稍后解释)

希望你能看到VML不仅仅是一个扭曲的1像素像素图像。 下面是我想在HTML中使用的著名对角线的代码,该代码非常长:

<v:linefrom="10,10"to="100,100"/>

代码是非常简洁和简单的(。用于简单形状的albiet )。 对于这种类型的形状,使用 from(x,y) to(x,y) 命令语法。 对于大多数简单的网络图形,上面 示例可能已经足够了,但是让我们深入了解一些。

尝试这个:

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

同样的概念,只是一个不同的形状。 注意所有太熟悉的style 标记属性。

这里有一个使用不同形状的样本。

<v:linestrokecolor="red"strokeweight="2pt"from="100pt,100pt"to="200pt,150pt"><v:strokeendarrow="diamond"/></v:line><v:linestrokecolor="yellow"strokeweight="2pt"from="100pt,100pt"to="50pt,100pt"><v:strokeendarrow="classic"/></v:line><v:linestrokecolor="blue"strokeweight="2pt"from="100pt,100pt"to="120pt,120pt"><v:strokeendarrow="block"/></v:line><v:linestrokecolor="black"strokeweight="2pt"from="100pt,100pt"to="150pt,200pt"><v:strokeendarrow="none"/></v:line><v:linestrokecolor="green"strokeweight="2pt"from="100pt,100pt"to="200pt,85pt"><v:strokeendarrow="oval"/></v:line><v:linestrokecolor="green"strokeweight="2pt"from="100pt,100pt"to="200pt,100pt"><v:strokeendarrow="open"/></v:line><v:ovalstyle="width:100pt; height: 50pt"fillcolor="pink"/><v:curvefrom="10pt,10pt"to="100pt,10pt"control1="40pt,30pt"control2="70pt,30pt"></v:curve><v:rectid=myrect fillcolor="red"style="position:relative;top:100;left:100;width:20;height:20;rotation:10"></v:rect>

看起来像( 到最多),在HTML中使用注释可能是一个很好的计划。

VML作为图形工具的一个了不起的事情是,所有的绘画事件都是为你处理的。 尽量减少浏览器或者"不最大化",并将它的移动到屏幕边缘并重新出现。 它在自己的计算机上重新绘制,而且没有noticable性能 ! 这是个巨大的奖金。

一个真实的世界? 这是我在失眠过程中发现的图形引擎的输出。

这种方法超过标准"let-the-server-make-a-gif"思想的巨大好处是客户端( 浏览器) 可以根据客户的意愿改变形状,从而提高了性能。 通过给每个可以应用的形状设置id并使用 inline 事件处理程序来设置 mousedownmousemovemouseup 事件如何处理,我。 之后,这只是实现一些drag-and-drop代码的问题。 因此,换句话说,VML的形状仍然是对 jscript/vbscript的对象。

你可以用来绘制形状的另一种技术是坐标系对。 这可能会使代码变得更加复杂,但是对于你的web演示文稿来说,( 实际) 无限的功能。

下面是一个示例:

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

结论&调用操作

目前,SVG规范被设置为超过 VML,并最终由主流浏览器支持。 但与这里同时,pppoe很容易使用,并且可以为低层网络开发人员提供一种新的表达方式。


INT  introduction  VML