VML polar path tutorial (4) oval circle rect rectangular

Source: Internet
Author: User
Navigation of this series of articles

VML polar path tutorial (1) Introduction to VML

VML polar path tutorial (2) getting started with VML

VML polar path tutorial (3) Marking practice and line

VML polar path tutorial (4) oval circle rect rectangular

VML polar path tutorial (5) RoundRect circle shape

VML polar path tutorial (6) image

VML polar path tutorial (7) polyline multi-side

VML polar path tutorial (8) shape multiple sides. shapetype template. shape and curve

VML polar path tutorial (9) background of background

VML polar path tutorial (10) group collection container. vmlframe graphic reference

VML polar path tutorial (11) 2-level mark stroke border, shadow

VML polar path tutorial (12) VML programming finale

Oval circle rect rectangular shape VML polar path tutorialOriginal: Mu Yuanhua
Chapter 1 Section 7: oval circle rect rectangular shape

1: oval circle and rect rectangular shape
The oval and rect of VML can draw circles and rectangles respectively. Because the two labels have the same compiling method, principle, and attributes, so I put them together to talk about the 3D output instances of oval and rect <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 "/>

As shown in the example, oval and rect have no proprietary attributes except the common attributes of VML images. POSITION: absolute of CSS, Which is output on webpage in Vector3D form. z-index:; defines 3D height, left:; top :; the positions on the left and top of the webpage, width: 100; height: 50 are defined respectively. The width and height of the image are described as PX and 50 PX respectively. Fillcolor, strokeweight, and stroked control the background color, Border width, and border. The "f" value of stroked = "f" represents the short form of "false" of the boolean variable type, indicating that no border is used, otherwise, if it is stroked = "t" or stroked = "true", the image has a border. True is the default value of the image, indicating that the border is used.
2D output instance of oval and rect <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 table </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>

From the example, it is not difficult to see that VML is formatted and output in the same order as the traditional HTML Tag. When it comes to HTML line feed tags such as <p> <br>, it will start with another line. In addition, VML images can be nested in the HTML Tag created container (in this example, the container is a table. Because no POSITION: absolute; is defined for a VML image, it is output in the default 2D format as HTML.
It is not difficult to see how compatible VML and HTML are. However, after all, the VML vector2d design has a narrow application scope and can only serve as a supporting role of HTML. This section only provides a VML vector2d demonstration, so we will focus on the graphic design of VML vector3d in the future. You may not be able to see the highlights of the VML vector3d graphic design and how to apply it, but now you are only learning VML tagging and in-depth. When you have learned the basic knowledge of VML tagging, I will teach you how to make practical use of it.

Blog Source: http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763208.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.