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

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°并且在水平翻转之后它就像垂直翻转一样。

知道怎么解决吗？

example 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轴上，该轴现在是水平的，从而生成给定的图像。