?? 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 + -