?? 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坐標(biāo)系</strong></td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px">
Shape是VML最基本的對象，利用它可以畫出所有你想要的圖形。在VML中，使用的坐標(biāo)并不是Document的坐標(biāo)，它有自己的坐標(biāo)系，這樣一來，動態(tài)改變它的坐標(biāo)，就可以實現(xiàn)放大、縮小、旋轉(zhuǎn)等功能了。shape的 CoordSize 屬性就是用來定義坐標(biāo)的，
它有兩個參數(shù)，<v:shape CoordSize="2800,2800" />， 這里的2800,2800 是橫縱坐標(biāo)被分成了2800個點，并不是HTML里面默認(rèn)像素。如果沒有設(shè)置圓點，VML默認(rèn)是 0,0 （左上角），當(dāng)然你也可以使用 CoordOrig 屬性設(shè)置VML的圓點坐標(biāo)。<br><br>
<v:shape <font color=red>CoordOrig="-1400,-1400" CoordSize="2800,2800" </font>style="width:500;height:500" /><br><br>
<strong>注意:</strong>定義的坐標(biāo)只是相對的，真正顯示的圖形大小還需要 style="width:500;height:500" 來定義！<br><br>
上面的定義后，你可用的坐標(biāo)是 x(-1400到1400) y(-1400到1400) ，這樣的坐標(biāo)就像數(shù)學(xué)里面的坐標(biāo)了，把畫版分成了四個塊。<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>
在解決實際問題的時候，我發(fā)現(xiàn)，IE會自動把可見的VML圖象放在相對的(0,0)位置，意思是說，上面兩張圖如果沒有增加兩個輔助的坐標(biāo)，在IE上顯示出來是并列的兩個正方形。<br>
shape中最主要的屬性是Path，它是個功能強(qiáng)大的畫筆，語法很簡單，由幾個字母組成，下面詳細(xì)講述：<br>
<font color=green>m x,y</font>:MoveTo把畫筆移動到 (x,y)；<br>
<font color=green>l x,y</font>:LineTo從當(dāng)前點到(x,y)畫一條線；可以給連續(xù)的幾個點，VML會連續(xù)畫出來直到遇到 x 命令。<br>
<font color=green>x</font>:Close結(jié)束一條線；<br>
<font color=green>e</font>:End結(jié)束畫圖<br>
<strong>shape的其他常用屬性:</strong><br>
<font color=green>FillColor</font>:填充顏色，使用HTML中規(guī)定的顏色；例如:fillcolor=red<br>
<font color=green>Filled</font>:是否要填充圖形，如果圖形不是封閉的，也會自動封閉圖形進(jìn)行填充。當(dāng)Filled="true"(默認(rèn)),fillcolor才有效果；<br>
<font color=green>StrokeColor</font>:線的顏色；<br>
<font color=green>StrokeWeight</font>:線的寬度；<br>
<font color=green>Title</font>:當(dāng)鼠標(biāo)移動到該圖形上的時候，顯示的文字，和HTML里面的alt、tilte一樣；<br>
<font color=green>Type</font>:指定該圖形屬于那個ShapeType，ShapeType可以為VML制定模版，將在以后加以描述；<br>
前面的這些屬性，F(xiàn)illColor、Filled可以在<v:Fill />中使用，StrokeColor、StrokeWeight可以在<v:Stroke />中使用。也可以在 Shape 或者 繼承Shape的對象中使用它。<br>
在下面幾節(jié)，將詳細(xì)介紹 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>
上一節(jié):<a href="step1.html">VML的基本概念</a><br>
下一節(jié):<a href="step3.html">Line,Polyline(線)對象</a>
</td>
</tr>
</table>
</body>
</html>
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -