Canvas 矩阵变换与matrix镜像详解

Posted 2022-08-24 liangklfang

前面章节讲述了 translate、scale、rotate、skew 等常见 Canvas 上下文变换方法，同时指出了此类方法都可通过 matrix 矩阵方法来替换。本章节将会从镜像这个经常遇到的图片效果出发，首先从数学的角度带你深入理解图片镜像的原理，然后在 Canvas 和 CSS 场景中真正的实现镜像效果。

1.什么是镜像

平面镜成像是一种物理现象。指的是太阳或者灯的光照射到人的身上，被反射到镜面上平面镜又将光反射到人的眼睛里，因此我们看到了自己在平面镜中的虚像。当你照镜子时可以在镜子里看到另外一个“你”，镜子里的“人”就是你的“像”（image）。

镜子里的影像就叫平面镜成像，经常被缩写为镜像。

2.镜像原理

2.1 fabric 镜像变换

在 Canvas 中实现镜像效果是一个比较常见的需求，在真实的项目场景中也经常遇见，比如在绘图中的人脸朝向问题。在 fabric 中很容易解决此类问题，因为每一个图片可作为一个独立图层绘制到 fabric.Canvas 对象上，而在绘制人的时候，有时候某张图的人脸朝向可能并不是我们想要的，此时就需要基于 Canvas 的矩阵变换实现人物的镜像效果。下图展示了第二个人物的人脸朝向是如何被调整的。

如下是 fabr