📄 step3.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>Line,Polyline(线)对象</strong></td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px">
Line是做图中最常用的，它有两个特殊的属性 from 和 to ,就是起始点和终止点坐标。<br>
<v:line from="0,0" to="100,50" style="position:relative;"/><br><br>
<center><v:line from="0,0" to="100,50" style="position:relative;"/></center>
<br><br>
●如果要改变线的样式，LineStyle (Stroke)属性可以做到:<br>
<font color=green>Single</font>(默认)，<font color=green>ThinThin</font>，<font color=green>ThinThick</font>，<font color=green>ThickBetweenThin</font><br>
●如果要改变线的类型，可以用 DashStyle(Stroke)属性:<br><br>
<v:line style="position:relative" from="0,0" to="100,0" ><br> <v:stroke <font color=red>dashstyle="Dot"</font>/><br> </v:line><br><br>
<font color=green>Solid</font>(默认):见上图<br>
<font color=green>ShortDash</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke dashstyle="ShortDash"/></v:line><br>
<font color=green>ShortDot</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke dashstyle="ShortDot"/></v:line><br>
<font color=green>ShortDashDot</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke dashstyle="ShortDashDot"/></v:line><br>
<font color=green>ShortDashDotDot</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke dashstyle="ShortDashDotDot"/></v:line><br>
<font color=green>Dot</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke dashstyle="Dot"/></v:line><br>
<font color=green>Dash</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke dashstyle="Dash"/></v:line><br>
<font color=green>LongDash</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke dashstyle="LongDash"/></v:line><br>
<font color=green>DashDot</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke dashstyle="DashDot"/></v:line><br>
<font color=green>LongDashDot</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke dashstyle="LongDashDot"/></v:line><br>
<font color=green>LongDashDotDot</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke dashstyle="LongDashDotDot"/></v:line><br>
●在画坐标的时候，需要箭头，VML已经定义好了箭头，在Stroke体现:EndArrow 和 StartArrow 属性，一个是线开始的时候有箭头，另一个是线结束的时候有箭头。箭头的样式也有不少：<br><br>
<v:line style="position:relative" from="0,0" to="100,0" ><br> <v:stroke <font color=red>EndArrow="Classic"</font>/><br> </v:line><br><br>
<font color=green>EndArrow="Block"</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke EndArrow="Block"/></v:line><br>
<font color=green>EndArrow="Classic"</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke EndArrow="Classic"/></v:line>(这个看起来还比较舒服)<br>
<font color=green>EndArrow="Diamond"</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke EndArrow="Diamond"/></v:line><br>
<font color=green>StartArrow="Oval"</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke StartArrow="Oval"/></v:line><br>
<font color=green>StartArrow="Open"</font>:<v:line style="position:relative" from="0,0" to="100,0" ><v:stroke StartArrow="Open"/></v:line><br>
<br><br>
<strong>PolyLine</strong>是 Line 的变形，是不规则的连续的线。它有个特殊的属性 Points ,用来设置每个点的坐标。例如：<br><br>
<v:PolyLine filled="false" <font color=red>Points="0,0 0,100 20,150 200,100"</font> style="position:relative"/><br>
<center><v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative"/></center><br>
一样可以设置它的线的样式和类型以及箭头 ( IE5.0中，PolyLine不支持 Arrow )<br><br>
<v:PolyLine filled="false" <font color=red>Points="0,0 0,100 20,150 200,100"</font> style="position:relative"/><br>
<v:stroke StartArrow="Oval" EndArrow="Classic" dashstyle="Dot" /><br>
</v:PolyLine><br>
<center><v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative">
<v:stroke StartArrow="Oval" EndArrow="Classic" dashstyle="Dot" />
</v:PolyLine>
</center><br>
</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="step2.html">Shape对象与VML坐标系</a><br>
下一节:<a href="step4.html">Rect,RoundRect(矩形)对象</a>
</td>
</tr>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -