我们所熟悉的文档是由什么组成的？是如何实现排版的？

背景

这段时间对一些文档的标准做了一些研究，今天呢做一个简单的总结，这里给大家做个简单的介绍

文档的组成

如果问一个人，一个文档由是由什么做成的，收到的答案可能是千奇百怪的：

• 文字
• 图片
• 表格
• 贴画
• 艺术字
• 高亮
• 批注
• 签名
• …

但是仅仅对于显示来说，其实只要由三种类型就够了，他们分别是

• 图片
• 文字
• 图形
  这里的图形和图片不是一种东西吗？当然不是，图片就是我们所了解的图片，而图形是指一系列坐标和控制点组合而成的元素，这里可以类比到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的矩阵是不能表示平移操作，只能在变换矩阵中引入一个表示平移的分量，矩阵就变成了这样：

这就是仿射变换。简单的说就是一个线性变换加上平移。

总结

一个文档是由

• 文字
• 图片
• 图形
  组合而成的。
  如果想定位一个元素，需要知道
• 文档的坐标系原点
• 设置元素的边框
• 设置元素的仿射变换矩阵