为实现2D图形编辑器的丰富度，需要实现文字的各种变形效果以及2D、3D特效，类似稿定的文字文字变形。
这篇文章主要讲下文字变形的思路。
文字变形基本是基于上下左右四条曲线的变形。所以变形的基本思路是使用曲线的插值。
实现原理
将图像上的点分布到0-1范围内，原型坐标为(x,y)。考虑Y轴方面，在上曲线对应的x位置取一点PT，再在下曲线的x位置取一点PB，将两点连接形成一个向量，再在向量的y位置取一点，即为变形后的点，大致原理如下图所示：
X轴同理，左曲线取y位置点PL，右曲线上取y位置点PR，连接两点形成向量，再在向量的x位置取一点，即为变形后的点。需根据不同的形变方式对X轴、Y轴变形后的点做合并，比如形变方式为文章开头的形变的时候，我们可以只使用Y轴形变后的点。
显示原理
在上述理论之上，我们还需要一个显示图像的方式，初步实现方式有两种。
1.基于位图的变形。
在接到此需求的初期思路，把文字作为一个位图图像，再把图像分为一个个小格子，使用webgl自带的顶点插值，操作格子上的顶点以达到变形。此方法运算量不太好把握，格子细分数量太大的话运算量过大，细分太少效果不好，而且会有锯齿，所以不太适合。
2.基于矢量图的变形。
后面采用的是矢量图SVG，有多种好处。
- 1.SVG本身有很多处理图像的功能，如加阴影，加描边等，后期比较好扩展。
- 2.运算量比较好掌握。
- 3.有对象模型，好操作。
-
- 矢量图清晰。
在变形之前，我们需要获取到文字文件(.ttf等)中的内容。我使用的是opentype.js，使用这个库，可以读取文字文件中每个字的顶点信息，同svgPath的d属性一样，是由一系列的绘制命令组成，且可以转化为svgPath路径。读取到的commands如下图所示：
因为读取到的就是绘制字的各个顶点，所以顶点数量比较可控，运算量就可控一些。我们的变形操作只需要在读取到顶点信息后，更改每个顶点的位置，再将更改后的顶点转化为svgPath就可以了。
