矢量 -- 圖形の萬惡之源

時間 2019-11-08

標籤矢量圖形萬惡之源简体版

原文原文鏈接

說到矢量，不少人第一反應是 SVG，
SVG 的全稱是 Scalable Vector Graphics，html

意思爲可縮放的矢量圖形。
Vector 確實是 SVG 中重要的一部分，
但它的概念不止於此。bash

向量

Vector -- 矢量
它還有一個叫法：向量。編輯器

說到這玩意，你們瞬間想起了被高數支配的恐懼。
沒錯，它能夠說是線性代數中老大哥的存在。
svg

wiki 上有關於線性代數的詳細介紹：動畫

不少相關資料會把線性代數和計算機圖形學聯繫起來，
它們之間究竟有什麼關係呢？spa

點

二維的原點 (0,0)
三維的原點 (0,0,0)
3d

向量

把點與原點鏈接起來就造成向量，
向量表明一個有方向的長度，
對應標量。
code

元向量

元向量表示 X 或 Y 軸上一個單位的向量，
兩個元向量任意組合能夠表達二維面上的任何一個座標，
~~每一個向量也均可以拆分紅多個元向量的份量。~~
orm

線 & 面

把線和麪放在同個 tab 是由於這兩個東西的抽象意義是一致的。
它們表示必定條件下的元素合集，
在線性代數中咱們稱之爲向量空間
wiki 上有關於向量空間的詳細介紹：
cdn

矩陣

A=
\left[
\begin{matrix}
2 \\
2 \\
\end{matrix}
\right]

這個矩陣表示是什麼意思呢？
它表示的是一個由兩個元向量組成的向量，
它在 X 和 Y 分別有 (2, 2) 兩個標量的份量。

矩陣相乘

2 維

這裏有兩個矩陣：

A=
\left[
\begin{matrix}
3 \\
2 \\
\end{matrix}
\right]

B=
\left[
\begin{matrix}
2 & 3 \\
2 & 4 \\
\end{matrix}
\right]

A * B 表明什麼呢？
咱們先畫一個座標系：

A 能夠理解爲 (2, 2) 標量的兩個 [X Y] 元向量之和。
B 能夠理解爲兩個份量分別做用於 X Y 兩個元向量。

Tx = X*
\left[
\begin{matrix}
2 \\
2 \\
\end{matrix}
\right]

Ty = Y*
\left[
\begin{matrix}
3 \\
4 \\
\end{matrix}
\right]

A * B 能夠理解爲，
B 做用於座標系的元向量產生一個新的座標系，
A 在新的座標系中的表現。

3 維

矩陣的大部分性質與維度無關，
以前咱們基於二維世界理解的矩陣，
放在三維世界中一樣適用。

舉個旋轉的栗子：

T =
\left[
\begin{matrix}
0 & 0 & 1 \\
0 & 1 & 0 \\
-1 & 0 & 0 \\
\end{matrix}
\right]

很眼熟有木有，
恭喜你理解了 Transform-3D 原理，
而這部分知識，在線性代數中稱之爲線性變換。

矢量圖型

矢量在圖形渲染中也大有用途。

元數據 & 幀數據

因爲屏幕物理結構限制，
絕大部分現代計算機顯示器都要將數據轉換成柵格圖像才能顯示，

用於計算的數據叫元數據，
計算得出的柵格圖像叫幀數據。

比起幀數據，矢量元數據使用更少的信息，
保存更多的參數用於目的幀渲染。

wiki 上有關於矢量圖形的詳細介紹：

點

線

Path

若是用文本編輯器打開 SVG 文件(XML),
你會發現 SVG 中有一段:

M153 334 
C153 334 151 334 151 334 
C151 339 153 344 156 344 
C164 344 171 339 171 334 
C171 322 164 314 156 314 
C142 314 131 322 131 334 
C131 350 142 364 156 364 
C175 364 191 350 191 334 
C191 311 175 294 156 294 
C131 294 111 311 111 334 
C111 361 131 384 156 384 
C186 384 211 361 211 334 
C211 300 186 274 156 274
複製代碼