資料表示基礎：向量

單元 1 - ⇑ 資料表示基礎 ⇑
← 點陣圖	向量圖形	向量和點陣圖的比較 →

向量圖形 - 使用數學和幾何學定義的影像，例如點、線、曲線和形狀或多邊形。支援可縮放性。

物件和屬性以數學方式儲存。

繪圖列表 - 用於定義向量影像的一組命令

向量由物件及其屬性組成。物件是數學或幾何定義的結構，例如矩形、直線、圓形或曲線。

<rect ... />
<line ... />
<circle ... />

每個物件都有屬性來告訴您大小、顏色、位置等。例如 Shivam 方法。請檢視下一個示例，瞭解繪圖列表是如何從物件和屬性構建的。

NoahTangle

辛普森圓

殖民弗洛林

影像

繪製
列表

<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"> 並在末尾新增 </svg>。將以下內容複製到文字檔案並將其儲存為 image.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

練習：向量圖形

什麼是繪圖列表

回答

用於定義向量影像的單個命令

列出一些可以在向量圖形中使用的物件

回答

直線
橢圓形
矩形
圓形

列出顯示矩形所需的屬性

回答

x、y
寬度、高度
填充
描邊（顏色）、描邊寬度

列出顯示直線所需的屬性

回答

權重
長度
寬度
填充

給出向量影像的定義

回答

使用基本向量圖形幾何圖形（如直線、橢圓或圓形）建立的可縮放影像。它可以無限縮放。

編寫一個繪圖列表來建立以下影像

回答

<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 種不同的屬性

回答

填充
描邊
描邊寬度
寬度
高度
X、Y