画像の反転と回転 📖

ｖ１の画像回転みたいなことする。あるいは新規保存のテスト。

プログラム: (→大)
#----------------------------------------------- ＃反転と回転 #----------------------------------------------- //左右反転//水平反転 ●画像水平反転 　　w＝描画中キャンバスの「幅」をDOM属性取得。 　　h＝描画中キャンバスの「高さ」をDOM属性取得。 　　キャンバス状態保存。 　　[w,0]に描画起点設定。 　　[-1,1]だけ描画拡大。 　　[0,0,w,h]へ描画中キャンバスを画像描画。 キャンバス状態復元。 ここまで。 //上下反転//垂直反転 ●画像垂直反転 　　w＝描画中キャンバスの「幅」をDOM属性取得。 　　h＝描画中キャンバスの「高さ」をDOM属性取得。 　　キャンバス状態保存。 　　[w,h]に描画起点設定。 　　180だけ描画回転。 　　[w,0]に描画起点設定。 　　[-1,1]だけ描画拡大。 　　[0,0,w,h]へ描画中キャンバスを画像描画。 　　キャンバス状態復元。 ここまで。 ●画像右回転 　　# 仮のキャンバスに元の画像をコピー 　　元キャンバス＝描画中キャンバス。 　　w＝元キャンバスの「幅」をDOM属性取得。 　　h＝元キャンバスの「高さ」をDOM属性取得。 　　仮キャンバス＝[w,h]のキャンバス作成。 　　仮キャンバスの「hidden」にオンをDOM属性設定。 　　[0,0]に元キャンバスを画像描画。 　　# キャンバスサイズを変更 　　元キャンバスの「幅」にhをDOM属性設定。 　　元キャンバスの「高さ」にwをDOM属性設定。 　　# 回転して描画 　　元キャンバスへ描画開始。 　　キャンバス状態保存。 　　[h,0]に描画起点設定。 　　90だけ描画回転。 　　[0,0,w,h]へ仮キャンバスを画像描画。 　　キャンバス状態復元。 　　DOM親要素から仮キャンバスをDOM子要素削除。# 消して終了。 ここまで。 ●画像左回転 　　# 仮のキャンバスに元の画像をコピー 　　元キャンバス＝描画中キャンバス。 　　w＝元キャンバスの「幅」をDOM属性取得。 　　h＝元キャンバスの「高さ」をDOM属性取得。 　　仮キャンバス＝[w,h]のキャンバス作成。 　　仮キャンバスの「hidden」にオンをDOM属性設定。 　　[0,0]に元キャンバスを画像描画。 　　# キャンバスサイズを変更 　　元キャンバスの「幅」にhをDOM属性設定。 　　元キャンバスの「高さ」にwをDOM属性設定。 　　# 回転して描画 　　元キャンバスへ描画開始。 　　キャンバス状態保存。 　　[0,w]に描画起点設定。 　　-90だけ描画回転。 　　[0,0,w,h]へ仮キャンバスを画像描画。 　　キャンバス状態復元。 　　DOM親要素から仮キャンバスをDOM子要素削除。# 消して終了。 ここまで。 ●(角度で)画像回転 　　# 仮のキャンバスに元の画像をコピー 　　元キャンバス＝描画中キャンバス。 　　w＝元キャンバスの「幅」をDOM属性取得。 　　h＝元キャンバスの「高さ」をDOM属性取得。 　　仮キャンバス＝[w,h]のキャンバス作成。 　　仮キャンバスの「hidden」にオンをDOM属性設定。 　　[0,0]に元キャンバスを画像描画。 　　# 角度を正規化 　　角度＝角度%360。 　　もし、(角度<0)ならば、角度＝角度+360。 　　傾斜角=角度%90。 　　# じゅもん 　　wa＝w*COS((傾斜角をラジアン変換))# 画像幅を斜辺とした時の底辺 　　wb＝w*SIN((傾斜角をラジアン変換))# 画像幅を斜辺とした時の高さ 　　ha＝h*COS((傾斜角をラジアン変換))# 画像高さを斜辺とした時の底辺 　　hb＝h*SIN((傾斜角をラジアン変換))# 画像高さを斜辺とした時の高さ 　　# 新しい幅と高さと起点を計算 　　(角度/90を切り捨て)で条件分岐 　　　0ならば、 　　　　nw＝wa+hb。nh＝wb+ha。起点＝[hb,0]。。。 　　　1ならば、 　　　　nw＝wb+ha。nh＝wa+hb。起点＝[nw,hb]。。。 　　　2ならば、 　　　　nw＝wa+hb。nh＝wb+ha。起点＝[wa,nh]。。。 　　　3ならば、 　　　　nw＝wb+ha。nh＝wa+hb。起点＝[0,wa]。。。 　　ここまで。 　　# キャンバスサイズを変更 　　元キャンバスの「幅」にnwをDOM属性設定。 　　元キャンバスの「高さ」にnhをDOM属性設定。 　　# 回転して描画 　　元キャンバスへ描画開始。 　　キャンバス状態保存。 　　起点に描画起点設定。 　　角度だけ描画回転。 　　[0,0,w,h]へ仮キャンバスを画像描画。 　　キャンバス状態復元。 　　DOM親要素から仮キャンバスをDOM子要素削除。# 消して終了。 ここまで。 ＃以下はテスト もし、プラグイン名＝「メイン」ならば、 画像w＝320。画像h＝画像w/4*3。処理範囲＝[0,0,画像w,画像h] 描画中キャンバスの「幅」に画像wをDOM属性設定。 描画中キャンバスの「高さ」に画像hをDOM属性設定。 URL＝「https://n3s.nadesi.com/image.php?f=8.jpg」。撫子＝空。 URLの画像読んだ時には、 撫子＝対象。 　[0,0,画像w,画像h]へ撫子を画像描画。 ここまで。 #UI作成 「水平反転」のボタン作成して、水平反転ボタンに代入。 「垂直反転」のボタン作成して、垂直反転ボタンに代入。 「右回転」のボタン作成して、右回転ボタンに代入。 「左回転」のボタン作成して、左回転ボタンに代入。 改行作成 「角度(0～360): 」のラベル作成。 「60」のエディタ作成して角度エディタに代入。 角度エディタの「幅」に「80px」をDOMスタイル設定。 「画像回転」のボタン作成して、画像回転ボタンに代入。 #イベント 水平反転ボタンをクリックした時には、 画像水平反転。 ここまで。 垂直反転ボタンをクリックした時には、 画像垂直反転。 ここまで。 右回転ボタンをクリックした時には、 画像右回転。 ここまで。 左回転ボタンをクリックした時には、 画像左回転。 ここまで。 画像回転ボタンをクリックした時には、 角度＝角度エディタのテキスト取得。 角度で画像回転。 ここまで。 ここまで。