おもしろければ すべてよし

Func User Interface の画像描画関数$gp_image()で、アスペクト比を維持する設定（keepaspect:true）にすると画像が範囲W及び範囲Hのちょうど中心に来るよう描画される。


Fig.1

ジャケット画像が正方形ならこれでも問題ない（一部問題になる状況もあるが）。しかし、縦長もしくは横長な画像では図1のように左右に余白ができてしまう。例えば、ジャケット画像のすぐ右に沿うように曲名やアーティスト名を表示している場合、この余白のおかげでデザインのバランスが取れなく、非常に困る。

今回はこの困った余白ちゃんをどうにかしてやろうと珍しくやる気になったわけです。
そのメモを残しておこうと思います。

---

参考にしたサイト：
Func UIのサンプル：画像の鏡面表示 - WebScrap

上記サイトの記事を参考に自分なりにまとめる。なお、今回は画像を(x,y)=(0,0)の座標から紫の範囲（W,H）に表示するようにしている。


普段は下記のようにコードを書いてジャケット画像を表示している。
※画像描画に必要な各種手続きは省いて記述

$gp_image(%_id%,%_AA_%,0,0,%_width%,%_width%,cache:false,keepaspect:true)
// %_AA_% : 画像パス

MAINとは別にウィンドウを作りジャケットを表示しているため、W及びHはウィンドウ幅を取っている。
これだと図1のように左右の余白が気になる。
そこで、WebScrapさんの記事を参考に以下のように書き直した。

$gp_image(%_id%,%_AA_%,0,0,%_width%,%_height%,cache:false,keepaspect:true,mempos:true,dmode:calconly)
$gp_image(%_id%,%_AA_%,0,0,$calc(%_width%-%_mp_left%*2),$calc(%_height%-%_mp_top%*2),cache:false,keepaspect:true)

あらかじめ画像が表示される座標を%_mp_left%,%_mp_top%で取得し、それを元にW,Hの範囲を削っている。また、赤字部分の最後で2倍しているのは左右に余白があるため。
これで、図2のようにちゃんと0,0の座標に画像を持っていくことができました。上手く応用すれば範囲内のどの位置でも表示させることができそうです。


Fig,2

---

やってみると意外に簡単で、今まで何故やらなかったのかと過去の自分をしばきたい気分です。

ところで、久しぶりにfoober弄ったけどコレ冷静に考えなくても時間の無駄遣いっすね
いや、楽しいけど・・・

関連記事

• Func UI での画像描画を考える
• Stop After Album (foo_stopafteralbum)
• FuncUIで表示幅にあわせてフォントサイズ変更（仮）