圖像旋轉+水平或垂直翻轉

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º 

一切看起來都在一開始很好，但是當我做一個rotate90º和水平翻轉後，只是相當於一個垂直翻轉。

任何想法如何解決它？

example http://img688.imageshack.us/img688/1570/73811955.jpg

Answer 1

試試這個插件

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

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

它工作在兩個CSS3和帆布。

Answer 2

無法從代碼片斷告訴你給。可能是函數內部或調用函數時出錯。可能與軸的處理方式有關。 水平翻轉是y（垂直軸）中的反射。旋轉之後，圖像的y軸現在是水平的，所以除非您正確處理軸，否則「水平翻轉」將反映在現在水平的y軸上，從而產生圖像。