VML极道教程(四) oval圆rect矩型-自学php网

VML极道教程(四) oval圆rect矩型

来源：自学PHP网时间：2018-02-09 10:15 作者：阅读:次

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

oval圆rect矩型

1章7节:oval圆rect矩型

1:oval圆与rect矩型
VML的oval和rect分别可以绘制圆形与矩形，由于这两个标记的编写方法、原理、属性基本一致，所以我把他们放在一起讲 oval、rect的3D输出实例

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="POSITION:absolute;Z-INDEX:1;LEFT:200px;TOP:150px;width:100;height:100;" fillcolor="yellow"/>
<v:rect style="POSITION:absolute;Z-INDEX:1;LEFT:320px;TOP:150px;width:100;height:100;"/>
<v:rect style="POSITION:absolute;Z-INDEX:2;LEFT:260px;TOP:230px;width:100;height:50;" strokeweight="2px"/>
<v:oval style="POSITION:absolute;Z-INDEX:3;LEFT:290px;TOP:250px;width:50;height:100;" fillcolor="red" stroked="f"/>

从例子中可以看出，oval、rect除了VML图形的通用属性外，没有专有属性。CSS的POSITION:absolute;使其以Vector3D形式在网页输出，z-index:;定义3D高度，left:;top:;则分别定义距离网页左、上方的位置，width:100;height:50;则分别描述图形的宽度为100px和高度为50px。fillcolor、strokeweight、stroked则分别控制背景颜色、边框粗度、有无边框。其中stroked="f"的“f"值即代表boolean变量类型的false的简写形式，表示不使用边框，否则为stroked="t"或stroked="true"则代表图形有边框。true是图形的默认值，表示使用边框
oval、rect的2D输出实例

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="width:100;height:100;" fillcolor="yellow"/>
<v:rect style="width:100;height:100;"/><p>
<v:rect style="width:100;height:50;" strokeweight="2px"/><br>
<v:oval style="width:50;height:100;" fillcolor="red" stroked="f"/><br>
 
<table border=1><tr><td colspan=2 align=center>HTML表格</td></tr>
<tr>
<td><v:oval style="width:100;height:100;" fillcolor="red" stroked="f"/></td>
<td><v:oval style="width:100;height:100;" filled="false" strokecolor='blue'></v:oval></td>
</tr>
</table>

从例子不难看出，VML像传统HTML标记那样按照代码顺序一一排版、输出，碰到<p><br>等HTML换行标记就会另起一行。而且，HTML标记创建的容器（本例容器是表格）内可以将VML图形嵌套。VML图形因为没有定义POSITION:absolute;，所以就会以默认的2D形式跟HTML一样输出
这点不难看出VML与HTML之间的兼容性是多么的良好，不过VML Vector2D设计毕竟应用面比较狭窄、只能做HTML的配角。本章节只是提供一个VML Vector2D的演示，所以以后我们将主要讲VML Vector3D的图形设计。也许你现在看不出VML Vector3D图形设计的精彩、如何应用，但现在你只是在学习VML标记、深入。当你学会了VML标记这些基础知识，以后我会慢慢教你如何精彩的实际应用。

博文来源：http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763208.html

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

VML极道教程(三) 标记实战与line线

子栏目

VML极道教程(四) oval圆rect矩型

最新评论

添加评论

更多文章推荐

添加评论