我們所熟悉的文檔是由什麼組成的？是如何實現排版的？

背景

這段時間對一些文檔的標準做了一些研究，今天呢做一個簡單的總結，這裏給大家做個簡單的介紹

文檔的組成

如果問一個人，一個文檔由是由什麼做成的，收到的答案可能是千奇百怪的：

• 文字
• 圖片
• 表格
• 貼畫
• 藝術字
• 高亮
• 批註
• 簽名
• …

但是僅僅對於顯示來說，其實只要由三種類型就夠了，他們分別是

• 圖片
• 文字
• 圖形
  這裏的圖形和圖片不是一種東西嗎？當然不是，圖片就是我們所瞭解的圖片，而圖形是指一系列座標和控制點組合而成的元素，這裏可以類比到svg（可縮放的矢量圖形），是不是word在放大過程中文字不會失真，而圖片會失真。這就是圖片和圖形的關係。

爲什麼 說可以分爲這三類呢？那藝術字、表格、批註呢？其實這些元素都是可以由這三類元素組合而成的。
比如說表格，表格是由一條一條線段組合而成，或者是一個一個的矩形組合而成，只要設置好這些框的一些屬性（顏色，寬度）就可以組合出一個表格。

你可能會問線段好理解，那麼這種帶顏色的怎麼做到的呢？這裏就可以嘗試用svg 中的填充，填充可以是顏色，可以時漸變色，也可以是圖片。
批註是這樣的：

線段是圖形，小頭像是圖片，下劃線，標註框是圖形。批註內容是文字。

所以說，無論多複雜的元素都是由這三個base元素構成的。

文檔元素的定位

上一節介紹了文檔的基礎元素，這一節則重點介紹元素的定位，在笛卡爾座標系中，我們是如何定位一個元素的？

我們需要知道一個元素的座標，也就是通常我們所說的（x,y）。一般來說，一種文檔協議有一套自己的座標系，比如說PDF是以左下角爲座標原點（0，0），而OFD則是以左上角爲原點。瞭解座標原點之後，我們就可以按照元素的座標進行畫圖了。

不過這時候又出現一個問題。如果你在文檔中貼了一個原大小是1000 * 1000的圖片，然後你對這個圖片進行了大小調整，比如說調整到了200 * 200，並對這個元素進行了平移。那麼文檔客戶端會對圖片進程處理和重新設置它的座標嗎？如果是每次都進行這樣處理的話客戶端的負載會有多大啊？

這裏不得不引入仿射變換，這裏我們不需要對原元素進行修改，只需要把它的變換過程給記錄到一個矩陣中就可以，在做顯示的時候把它的座標變換到合適的位置就可以。仿射變化接下來講解一下

同時可以對元素設置一個邊框，讓它在邊框內可以顯示，邊框外則自動裁剪。

仿射變換

仿射變換就是對座標進行線性變換和平移。

我們先以一個矢量來演示下什麼是線性變換：

• 縮放，比如你對這個矢量（1，2）放大2倍，放大後的結構是（2，4）可以表示成2*(1,2)
  如果是x放大2倍，y放大3倍就只能用矩陣來表示了：
  
• 縮放，如果把（1，0） 旋轉45度，旋轉後的頂點座標是（根號2/2，根號2/2）（原諒我的md 不能渲染公式），用旋轉矩陣來表示就是：

• 切變，就是座標做反轉，這個很好理解，就是縮放過程中的值有正有負

這種線性變換可以把一個圖像扭曲到你懷疑人生，但是不管它怎麼扭曲，它的座標原點還是它的原點，並沒有發生改變。

這時候就需要引入平移操作，在一個二維座標系裏，只用2*2的矩陣是不能表示平移操作，只能在變換矩陣中引入一個表示平移的分量，矩陣就變成了這樣：

這就是仿射變換。簡單的說就是一個線性變換加上平移。

總結

一個文檔是由

• 文字
• 圖片
• 圖形
  組合而成的。
  如果想定位一個元素，需要知道
• 文檔的座標系原點
• 設置元素的邊框
• 設置元素的仿射變換矩陣