矩形エリアに写真をフィットさせたいとき
特定のエリアに写真とかをフィットさせる(収める)ときがあると思います。
よく見かける処理は縦をまずフィットさせてみて、はみでるようなら今度は横をフィットさせる というような2重処理です。これは直観的に理解しやすいのですが2回リサイズ処理するのでなんだかスマートじゃありません。
これを条件式で一度にまとめらないかと思って考えたことをまとめてみました。
- 対象エリア area_mc ( _width: 300, _height: 200 )
- 写真 picture_mc ( _width: 320, _height: 240 )
要は縦と横のどちらにはみ出すかわかればリサイズが一度ですみます。 はみ出すほうをエリアにあわせて、もう一辺も拡縮尺すればいいんです。
if( 写真が横にはみ出る場合 ) { picture_mc._width = area_mc._width; picture_mc._yscale = picture_mc._xscale; } else { picture_mc._height = area_mc._height; picture_mc._xscale = picture_mc._yscale; }
先ほど例にだした2重処理を概念的にまとめてみましょう。
- 横をフィットさせたら0.8倍だった。
- しかし縦がまだはみ出るのでさらに0.9倍した。
ということは縦にフィットすればよかったことになりますが フィットさせるべき辺の変化率のほうがもう一方にくらべて大きいということになります。
どれぐらい変化するのかというのはエリアと写真の各辺同士を比べればいいので 写真の縦横の長さをそれぞれエリアの長さで割り算します。
var dWidth = picture_mc._width/area_mc._width; var dHeight = picture_mc._height/area_mc._height; if( dWidth > dHeight ) { // 横がはみ出す } else { // 縦がはみ出す }
ちなみに僕の場合ですがさらに変形させて縦横比を「横長ぐあい」と解釈して比較をしています。 写真のほうが「横長」だったら横にはみ出るので幅を補正します。
var areaHV = area_mc._width/area_mc._height; var picHV = picture_mc._width/picture_mc._height; if( picHV > areaHV ) { // 横がはみ出す } else{ // 縦がはみ出す }
比較とリサイズが一度ずつでいいのがスマートなのかはあやしいのですが、計算をしてからViewに反映という面では結構みとおしがよくなったと思います。