『 縦横比を保ったままリサイズするBoundaryResizerクラス 』

2009 年 10 月 7 日

読み込んだ画像をサムネイル枠内に収まるように縦横比を保ったままリサイズしたり、ステージの背景に敷くために拡大したりすることがあると思います。その都度計算式を書くのは面倒なので、クラス化しました。地味によく使っているので紹介します。
このクラスはRectangleの情報をやりとりするだけなので、Bitmap以外にも何にでも使えます。

サンプル
ご覧いただければ何が目的のライブラリなのか、だいたい分かると思います。

ダウンロード
» 通常版はこちら
» BoundaryResizer.asファイルのみ (拡張子をasに変更してください)

使い方
コードはこんな感じで。

var bmp:Bitmap = ...
var target:Rectangle = bmp.bitmapData.rect;
var boundary:Rectangle = new Rectangle(50, 50, 300, 300);
var scaleMode:String = BoundaryResizer.NO_BORDER;
var align:String = BoundaryResizer.TOP_LEFT;
var resized:Rectangle = BoundaryResizer.resize(target, boundary, scaleMode, align);
bmp.x = resized.x;
bmp.y = resized.y;
bmp.width = resized.width;
bmp.height = resized.height;

BoundaryResizer.resizeメソッドの引数はこんな感じで。

  • target:Rectangle ・・・ 第1引数。リサイズ対象オブジェクトの矩形を指定します。上の例ではリサイズしたい画像の矩形となります。
  • boundary:Rectangle ・・・ 第2引数。リサイズの基準となる矩形を指定します。上の例ではリサイズ後の画像を収める枠となります。
  • scaleMode:String(省略可) ・・・第3引数。 リサイズ時のスケールモードを指定します。このパラメータはStageScaleModeと互換性があります。このパラメータを省略した場合はBoundaryResizer.NO_SCALEとなり、リサイズはおこなわれません。
  • align:String(省略可) ・・・ 第4引数 。boundaryに対するtargetの基準位置を指定します。このパラメータはStageAlignと互換性があります。このパラメータを省略した場合はBoundaryResizer.CENTERとなり、縦横ともに中央揃えとなります。
  • 戻り値:Rectangle ・・・ リサイズ後の矩形が返されます。target及びboundaryは変更しません。

リサイズ方法を操作するscaleModeには以下の定数を指定できます。

// targetとboundaryが完全に一致するようにリサイズされます。多くの場合、targetの縦横比は保たれません。
BoundaryResizer.EXACT_FIT

// targetが縦横比を保ち、かつtargetがboundaryの内側にフィットするようにリサイズされます。targetがトリミングされることはありませんが、上下または左右に隙間ができることがあります。
BoundaryResizer.SHOW_ALL

// targetが縦横比を保ち、かつboundaryがtargetの内側にフィットするようにリサイズされます。targetとboundaryの間に隙間ができることはありませんが、targetがトリミングされることがあります。
BoundaryResizer.NO_BORDER

// リサイズがおこなわれず、alignによる基準点合わせのみがおこなわれます。
BoundaryResizer.NO_SCALE

リサイズ後のオブジェクトの基準点を操作するalignには以下の定数を指定できます。

BoundaryResizer.TOP_LEFT     // x軸方向:左 , y軸方向:上
BoundaryResizer.TOP          // x軸方向:中央, y軸方向:上
BoundaryResizer.TOP_RIGHT    // x軸方向:右 , y軸方向:上
BoundaryResizer.LEFT         // x軸方向:左 , y軸方向:中央
BoundaryResizer.CENTER       // x軸方向:中央, y軸方向:中央
BoundaryResizer.RIGHT        // x軸方向:右 , y軸方向:中央
BoundaryResizer.BOTTOM_LEFT  // x軸方向:左 , y軸方向:下
BoundaryResizer.BOTTOM       // x軸方向:中央, y軸方向:下
BoundaryResizer.BOTTOM_RIGHT // x軸方向:右 , y軸方向:下

追記 09.10.08
・多少最適化しました。以前のバージョンをお使いの方はBoundaryResizer.asを入れ替えて頂ければ大丈夫です。
・wonderflのサンプルを更新しました。

追記 09.10.22
・使い方のサンプルコードに間違いがあったので修正しました。

« 
» 

2 Responses to “縦横比を保ったままリサイズするBoundaryResizerクラス”

  1. 1 sakusan393
    10月 22nd, 2009 at 1:04 AM

    便利クラスの公開ありがとうございますー

    使い方のコード例に誤記を発見したので一応ご報告。

    var scaleMode:String = BoundaryResizer.TOP_LEFT;
    var align:String = BoundaryResizer.NO_BORDER;
    ↑scaleModeとalignの中身が逆になってますよね。

    コピペしても、うまく動かなかったので5分くらい悩みましたw
    ではではー

  2. 2 alumican
    10月 22nd, 2009 at 1:46 AM

    >sakusan393さん

    あ、ほんとですね。気づきませんでした><
    ご指摘ありがとうございます!

Leave a Reply