image - 画像の回転 + 水平または垂直反転

Question

私は、90 度回転、水平方向と垂直方向の反転などの基本的な変換を行うことができる html5 キャンバス イメージ アプリケーションを開発しています。

次のマトリックスを使用して画像をペイントします。

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

最初はすべて問題ないように見えますが、rotate90º を作成し、水平方向の反転後に垂直方向の反転のように動作します。

それを修正する方法はありますか？

例 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 軸に反映されて水平になり、与えられた画像が生成されます。