資料表示基礎：向量
向量圖形 - 使用數學和幾何定義的影像，如點、線、曲線和形狀或多邊形。允許縮放。
以數學方式儲存物件和屬性。
繪圖列表 - 用於定義向量影像的一組命令
 |
如果你喜歡使用 SVG，請檢視 inkscape |
向量圖形由物件及其屬性組成。物件是數學或幾何定義的結構，如矩形、線或圓。
<rect ... />
<line ... />
<circle ... />
每個物件都有屬性來告訴您大小、顏色、位置等。檢視下一個示例以瞭解繪圖列表是如何從物件和屬性構建的。
| 矩形 | 圓形 | 組合 | |
|---|---|---|---|
| 影像 |  |
 |
|
| 繪圖 列表 |
<rect x="14" y="23"
width="250" height="50"
fill="green"
stroke="black" stroke-width="1" />
|
<circle cx="100" cy="100" r="50"
fill="red"
stroke="black" stroke-width="5" />
|
<rect
width="100" height="80"
x="0" y="70"
fill="green" />
<line
x1="5" y1="5"
x2="250" y2="95"
stroke="red" />
<circle
cx="90" cy="80"
r="50"
fill="blue" />
<text x="180" y="60">
Un texte
</text>
|
| 註釋 | x 和 y 給出左上角的起始位置 | 請注意，中心座標透過 cx 和 cy 定義 r 給出半徑 |
請注意，圓形在頂部，這是因為它最後繪製。 要省略邊框，請不要新增 stroke 命令。 該線具有起始 x1,y1 和結束 x2,y2 座標。 |
|
擴充套件：SVG 有幾種向量圖形格式，但一個容易上手的是 可縮放向量圖形 (SVG)。SVG 很容易建立，並且受所有現代主要 Web 瀏覽器支援。要建立 SVG，您需要在開頭新增標籤 <svg xmlns="http://www.w3.org/2000/svg">
<rect
width="100" height="80"
x="0" y="70"
fill="green" />
<line
x1="5" y1="5"
x2="250" y2="95"
stroke="red" />
<circle
cx="90" cy="80"
r="50"
fill="blue" />
<text x="180" y="60">
Un texte
</text>
</svg>
儲存後，將其拖放到瀏覽器視窗中，您應該會看到一些形狀。SVG 功能非常強大，您可以將其程式碼附加到其結構，使其具有互動性。如果您想了解有關如何製作 SVG 的更多資訊，請檢視 w3schools |
|
練習：向量圖形 什麼是繪圖列表 答案 用於定義向量影像的一組命令
給出一些可用於向量圖形的物件 答案
給出顯示矩形所需的屬性 答案
給出顯示線所需的屬性 答案
給出向量影像的定義 答案 使用數學和幾何定義的影像，如點、線、曲線和形狀或多邊形。允許縮放 編寫一個繪圖列表來建立以下影像  答案 <rect
width="1" height="1"
x="2" y="1"
fill="white" <!--optional you can leave this out-->
stroke="black"
stroke-width=1 /> <!--another small value will do-->
<rect
width="1" height="1"
x="11" y="0"
fill="white" <!--optional you can leave this out-->
stroke="black"
stroke-width=1 />
<rect
width="10" height="4"
x="2" y="6"
fill="black"
stroke="red"
stroke-width=5 /> <!--another small value will do-->
<circle
cx="7" cy="5"
r="2"
fill="blue" />
以下繪圖列表會生成什麼 <line
x1="0" y1="0"
x2="6" y2="6"
stroke="red" />
<rect
width="4" height="4"
x="1" y="1"
fill="yellow"
stroke="green"
stroke-width=1 />
<line
x1="6" y1="0"
x2="0" y2="6"
stroke="black" />
答案
在上面的程式碼中，命名涉及的物件 答案 rect 和 line 在上面的程式碼中，列出 4 個不同的屬性 答案
|
