📄 step2.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Thinking in VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css" />
<body>
<table align="center">
<tr>
<td align="center" class="title"><strong>Shape对象与VML坐标系</strong></td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px">
Shape是VML最基本的对象，利用它可以画出所有你想要的图形。在VML中，使用的坐标并不是Document的坐标，它有自己的坐标系，这样一来，动态改变它的坐标，就可以实现放大、缩小、旋转等功能了。shape的 CoordSize 属性就是用来定义坐标的，
它有两个参数，<v:shape CoordSize="2800,2800" />， 这里的2800,2800 是横纵坐标被分成了2800个点，并不是HTML里面默认像素。如果没有设置圆点，VML默认是 0,0 （左上角），当然你也可以使用 CoordOrig 属性设置VML的圆点坐标。<br><br>
<v:shape <font color=red>CoordOrig="-1400,-1400" CoordSize="2800,2800" </font>style="width:500;height:500" /><br><br>
<strong>注意:</strong>定义的坐标只是相对的，真正显示的图形大小还需要 style="width:500;height:500" 来定义！<br><br>
上面的定义后，你可用的坐标是 x(-1400到1400) y(-1400到1400) ，这样的坐标就像数学里面的坐标了，把画版分成了四个块。<br><br>
<v:group style="width:140px;height:140px;position:relative;" CoordOrig="0,0" CoordSize="2800,2800">
<v:line from="0,0" to="2800,0" style="Z-INDEX:8;" strokeweight="1pt">
<v:stroke EndArrow="classic"/>
</v:line>
<v:line from="0,0" to="0,2800" style="Z-INDEX:8;" strokeweight="1pt">
<v:stroke EndArrow="classic"/>
</v:line>
<v:rect title="CoordOrig='0,0' CoordSize='2800,2800'" fillcolor="red" style="Z-INDEX:9;width:1000;height:1000"></v:rect>
</v:group>
<v:group style="width:140px;height:140px;position:relative;" CoordOrig="-1400,-1400" CoordSize="2800,2800">
<v:line from="-1400,0" to="1600,0" style="Z-INDEX:8;" strokeweight="1pt">
<v:stroke EndArrow="classic"/>
</v:line>
<v:line from="0,-1400" to="0,1400" style="Z-INDEX:8;" strokeweight="1pt">
<v:stroke StartArrow="classic"/>
</v:line>
<v:rect title="CoordOrig='-1400,-1400' CoordSize='2800,2800'" fillcolor="red" style="Z-INDEX:9;width:1000;height:1000"></v:rect>
</v:group>
<br><br>
在解决实际问题的时候，我发现，IE会自动把可见的VML图象放在相对的(0,0)位置，意思是说，上面两张图如果没有增加两个辅助的坐标，在IE上显示出来是并列的两个正方形。<br>
shape中最主要的属性是Path，它是个功能强大的画笔，语法很简单，由几个字母组成，下面详细讲述：<br>
<font color=green>m x,y</font>:MoveTo把画笔移动到 (x,y)；<br>
<font color=green>l x,y</font>:LineTo从当前点到(x,y)画一条线；可以给连续的几个点，VML会连续画出来直到遇到 x 命令。<br>
<font color=green>x</font>:Close结束一条线；<br>
<font color=green>e</font>:End结束画图<br>
<strong>shape的其他常用属性:</strong><br>
<font color=green>FillColor</font>:填充颜色，使用HTML中规定的颜色；例如:fillcolor=red<br>
<font color=green>Filled</font>:是否要填充图形，如果图形不是封闭的，也会自动封闭图形进行填充。当Filled="true"(默认),fillcolor才有效果；<br>
<font color=green>StrokeColor</font>:线的颜色；<br>
<font color=green>StrokeWeight</font>:线的宽度；<br>
<font color=green>Title</font>:当鼠标移动到该图形上的时候，显示的文字，和HTML里面的alt、tilte一样；<br>
<font color=green>Type</font>:指定该图形属于那个ShapeType，ShapeType可以为VML制定模版，将在以后加以描述；<br>
前面的这些属性，FillColor、Filled可以在<v:Fill />中使用，StrokeColor、StrokeWeight可以在<v:Stroke />中使用。也可以在 Shape 或者 继承Shape的对象中使用它。<br>
在下面几节，将详细介绍 Shape 延伸出来的一些具体对象，诸如 Rect、RoundRect、Oval、Line等对象。
</div>
</td>
</tr>
<tr>
<td class="title">
<p align="right"><a href="javascript:self.scrollTo(0,0)">Top</a></p>
<a href="index.html">返回目录</a><br>
上一节:<a href="step1.html">VML的基本概念</a><br>
下一节:<a href="step3.html">Line,Polyline(线)对象</a>
</td>
</tr>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -