image - 图像旋转+水平或垂直翻转

Question

我正在开发一个 html5 画布图像应用程序，您可以在其中进行基本转换，如 90º 旋转、水平和垂直翻转。

我使用以下矩阵来绘制图像：

matrix.scale(flipHorizontal, flipVertical); // Where each flip could be 1 or -1
matrix.rotateZ(angle); // Angle could be 0,90,180 or 270º

一开始一切看起来都很好，但是当我旋转 90º 并在水平翻转之后，它就像垂直翻转一样。

知道如何解决吗？

例如 http://img688.imageshack.us/img688/1570/73811955.jpg

Answer 1

试试这个插件

演示：http ://dmadan.in/imageflip.html

来源：https ://github.com/dmadan86/imageflip

它适用于 css3 和 Canvas。

Answer 2

无法从您提供的代码段中看出。可能是函数内部或调用函数时出错。可能与轴的处理方式有关。水平翻转是 y（垂直轴）的反射。旋转后，图像的 y 轴现在是水平的，因此除非您正确处理轴，否则“水平翻转”将反映在现在水平的 y 轴上，从而生成给定的图像。