[編集モード] 画像の反転と回転

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

#-----------------------------------------------
＃反転と回転
#-----------------------------------------------
//左右反転//水平反転
●画像水平反転
　　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スタイル設定。
    「画像回転」のボタン作成して、画像回転ボタンに代入。
    
    #イベント
    水平反転ボタンをクリックした時には、
        画像水平反転。
    ここまで。
    垂直反転ボタンをクリックした時には、
        画像垂直反転。
    ここまで。
    右回転ボタンをクリックした時には、
        画像右回転。
    ここまで。
    左回転ボタンをクリックした時には、
        画像左回転。
    ここまで。
    画像回転ボタンをクリックした時には、
        角度＝角度エディタのテキスト取得。
        角度で画像回転。
    ここまで。
ここまで。

デバッグ × キャンバス: 幅 × 高

🍯 プログラム貯蔵庫

[編集モード] 画像の反転と回転

素材のアップロード