使用预定义的形状

本主题介绍 VML，这是一项从 Windows Internet Explorer 9 开始弃用的功能。 依赖于 VML 的网页和应用程序应迁移到 SVG 或其他广泛支持的标准。

注意

截至 2011 年 12 月，本主题已存档。 因此，它不再主动维护。 有关详细信息，请参阅 存档内容。 有关 Windows Internet Explorer 当前版本的信息、建议和指南，请参阅 Internet Explorer 开发人员中心。

 

如你所了解的那样，可以使用 <oval> VML 的 元素创建一个简单的椭圆。 VML 提供其他几个预定义元素。 在本主题中，我们将说明如何使用这些元素绘制图形。

本主题内容：

• rect
• roundrect
• line
• 折线
• 曲线
• 弧
• 摘要

rect

可以使用 <rect> 元素绘制矩形。 然后，可以通过指定不同的属性属性来自定义矩形。

例如，可以通过指定 fillcolor=“blue”绘制用蓝色填充的矩形，并通过指定 strokecolor=“red” strokeweight=“3.5pt”来为其指定 3.5 磅红色轮廓，如以下 VML 表示形式所示：

<v:rect style='width:100pt;height:75pt' fillcolor="blue"
strokecolor="red" strokeweight="3.5pt"/>

有关此元素的详细信息，请参阅 VML 规范 。 (注意：VML 规范没有 <rect> element.)

返回顶部

roundrect

可以使用 <roundrect> 元素绘制带圆角的矩形。 然后，可以通过指定不同的属性属性来自定义圆角矩形。

例如，可以通过指定 arcsize=“0.3”来绘制圆角为矩形较小尺寸的一半的圆角的矩形，通过指定 fillcolor=“yellow”用黄色填充该矩形，并通过指定 strokecolor=“red” strokeweight=“2pt”来为其指定 2 磅红色轮廓，如以下 VML 表示形式所示：

<v:roundrect style='width:100pt;height:75pt"
arcsize="0.3" fillcolor="yellow"
strokecolor="red" strokeweight="2pt"/>

有关此元素的详细信息，请参阅 VML 规范 。

返回顶部

line

可以使用 <line> 元素创建直线。 然后，可以通过指定不同的属性属性来自定义该行。

例如，可以通过指定 from=“20pt，20pt” to=“100pt，20pt”绘制水平线，并通过指定 strokecolor=“red” strokeweight=“2pt”将其设置为 2 磅和红色，如以下 VML 表示形式所示：

<v:line from="20pt,20pt" to="100pt,20pt" '
strokecolor="red" strokeweight="2pt">

只需为 from 和 to 属性属性指定不同的值即可绘制垂直线或对角线，如以下 VML 表示形式所示：

<v:line from="20pt,20pt" to="20pt,100pt"
strokecolor="red" strokeweight="2pt">

有关此元素的详细信息，请参阅 VML 规范 。

返回顶部

折线

可以使用 <polyline> 元素来定义从连接的线段创建的形状。 然后，可以通过指定不同的属性属性来自定义形状。

例如，若要绘制下图所示的形状，可以键入以下 VML 表示形式：

<v:polyline points="18pt,54pt,90pt,-9pt,180pt,63pt,261pt,27pt"
strokecolor="red" strokeweight="2pt"/>

有关此元素的详细信息，请参阅 VML 规范 。

返回顶部

曲线

可以使用 <curve> 元素绘制三次方贝塞尔曲线。 然后，可以通过指定不同的属性属性来自定义曲线。

例如，若要绘制如下图所示的曲线，可以键入以下 VML 表示形式：

<v:curve style='position:relative'
from="0,0" control1="100pt,100pt" control2="200pt,100pt"
to="300pt,0" strokecolor="red" strokeweight="3pt"/>

有关此元素的详细信息，请参阅 VML 规范 。

返回顶部

弧形

可以使用 <arc> 元素绘制定义为椭圆段的弧线。 弧线由椭圆与角度给定的起始和结束半径矢量的交集定义。 使用圆的属性计算角度 (宽度等于高度) ，然后按各向异性缩放到所需的宽度和高度。

例如，可以通过指定 startangle=“0” endangle=“90”来绘制一个从 0 度开始到 90 度结束的弧线，如以下 VML 表示形式所示：

<v:arc style='width:100pt;height:100pt'
startangle="0" endangle="90"
strokecolor="red" strokeweight="2pt"/>

可以通过指定不同的 startangle 和 endangle 值来更改弧线，如以下 VML 表示形式所示：

<v:arc style='width:100pt;height:100pt'
startangle="0" endangle="180"
strokecolor="red" strokeweight="2pt"/>

<v:arc style='width:100pt;height:100pt'
startangle="0" endangle="270"
strokecolor="red" strokeweight="2pt"/>

有关此元素的详细信息，请参阅 VML 规范 。

返回顶部

总结

可以使用 VML 预定义元素（如 <oval>、、<line>、<polyline><rect><curve><roundrect>、、 和 <arc> ）轻松地在网页上绘制图形，然后只需更改其属性属性即可自定义这些图形。