Shape is the most basic object of VML, and you can draw all the graphics you want. In VML, the coordinates used are not the coordinates of the Document, it has its own coordinate system. In this way, dynamically changing its coordinates can achieve functions such as zooming in, reducing, and rotating. The shape's CoordSize property is used to define coordinates. It has two parameters, <v:shape CoordSize="2800,2800" />. Here, the 2800,2800 is the horizontal and vertical coordinates that are divided into 2800 points, not the default pixel in HTML. If no dot is set, the VML defaults to 0,0 (top left corner). Of course, you can also use the CoordOrig property to set the dot coordinates of the VML.
<v:shape CoordOrig="-1400,-1400" CoordSize="2800,2800" style="width:500;height:500" />
Notice:The coordinates defined are only relative, and the size of the actual displayed figure needs to be defined by style="width:500;height:500"!
After the above definition, the coordinates you can use are x(-1400 to 1400) y(-1400 to 1400). Such coordinates are like coordinates in mathematics, which divide the drawing version into four blocks.
When solving the actual problem, I found that IE will automatically place the visible VML image in the relative (0,0) position, which means that if the above two images do not add two auxiliary coordinates, they will be displayed on IE as two squares parallel.
The most important attribute in shape is Path, which is a powerful brush with a simple syntax and consists of several letters. The following is a detailed description:
m x,y:MoveTo move the brush to (x,y);
l x,y:LineTo draw a line from the current point to (x,y); you can give several consecutive points, and the VML will draw it continuously until the x command is encountered.
x:Close ends a line;
e:End end drawing
Other common properties of shape:
FillColor:Fill color, use the color specified in HTML; for example: fillcolor=red
Filled: Whether to fill the figure, if the figure is not closed, the figure will be automatically closed for filling. Only when Filled="true" (default), fillcolor has an effect;
StrokeColor:The color of the line;
StrokeWeight:The width of the line;
Title: When the mouse moves to the graph, the text displayed is the same as the alt and tilte in HTML;
Type: Specify which ShapeType the figure belongs to. ShapeType can formulate templates for VML and will be described later;
The previous attributes, FillColor and Filled, can be used in <v:Fill />, and StrokeColor and StrokeWeight can be used in <v:Stroke />. It can also be used in Shape or in objects that inherit Shape.
In the following sections, we will introduce in detail some specific objects extended by Shape, such as Rect, RoundRect, Oval, Line and other objects.
<v:shape CoordOrig="-1400,-1400" CoordSize="2800,2800" style="width:500;height:500" />
Notice:The coordinates defined are only relative, and the size of the actual displayed figure needs to be defined by style="width:500;height:500"!
After the above definition, the coordinates you can use are x(-1400 to 1400) y(-1400 to 1400). Such coordinates are like coordinates in mathematics, which divide the drawing version into four blocks.
When solving the actual problem, I found that IE will automatically place the visible VML image in the relative (0,0) position, which means that if the above two images do not add two auxiliary coordinates, they will be displayed on IE as two squares parallel.
The most important attribute in shape is Path, which is a powerful brush with a simple syntax and consists of several letters. The following is a detailed description:
m x,y:MoveTo move the brush to (x,y);
l x,y:LineTo draw a line from the current point to (x,y); you can give several consecutive points, and the VML will draw it continuously until the x command is encountered.
x:Close ends a line;
e:End end drawing
Other common properties of shape:
FillColor:Fill color, use the color specified in HTML; for example: fillcolor=red
Filled: Whether to fill the figure, if the figure is not closed, the figure will be automatically closed for filling. Only when Filled="true" (default), fillcolor has an effect;
StrokeColor:The color of the line;
StrokeWeight:The width of the line;
Title: When the mouse moves to the graph, the text displayed is the same as the alt and tilte in HTML;
Type: Specify which ShapeType the figure belongs to. ShapeType can formulate templates for VML and will be described later;
The previous attributes, FillColor and Filled, can be used in <v:Fill />, and StrokeColor and StrokeWeight can be used in <v:Stroke />. It can also be used in Shape or in objects that inherit Shape.
In the following sections, we will introduce in detail some specific objects extended by Shape, such as Rect, RoundRect, Oval, Line and other objects.