BitmapData の切り抜き（クリッピング）

AS3で画像（BitmapData）の切り抜き処理（クリッピング）を行う方法について。

1. 手順

1. draw メソッドを用いる方法
   1. 元となる BitmapData オブジェクト(A)を用意する。
   2. 新しい空の BitmapData オブジェクト(B)を切り抜かれた画像のサイズで生成する。
   3. Matrix オブジェクトを使って(B)に(A)の一部分を描画（draw）する。
2. copyPixels メソッドを用いる方法
   1. 元となる BitmapData オブジェクト(A)を用意する。
   2. 新しい空の BitmapData オブジェクト(B)を切り抜かれた画像のサイズで生成する。
   3. (A)から切り抜きたい部分を Rectangle オブジェクトで指定し、(B)の座標(0, 0)以下にデータをコピーする。

2. サンプルスクリプト(1)

import flash.geom.Matrix;
import flash.display.BitmapData;

/**
 *
 * BitmapData の切り抜き
 *
 * @param       BitmapData      src         元となる BitmapData オブジェクト
 * @param       int             x           切り抜く領域の左上座標・x値
 * @param       int         　  y           切り抜く領域の左上座標・y値
 * @param       int             w           切り抜く領域の幅（width）
 * @param       int             h           切り抜く領域の高さ（height）
 * @return      BitmapData      切り抜かれた画像データ
 *
 */
public function clip(src:BitmapData, x:int, y:int, w:int, h:int):BitmapData
{
  var res:BitmapData = new BitmapData(w, h);
  res.draw(src, new Matrix(1, 0, 0, 1, -x, -y));
  return res;
}

3. 解説(1)

BitmapData オブジェクトの draw メソッドの第2引数(matrix)に Matrix オブジェクトを渡すことで描画される画像の拡大・縮小・回転・変形などが可能となる。今回は切り抜き（クリッピング）が目的のため、以下のように Matrix オブジェクトを生成した。

new Matrix(1, 0, 0, 1, -x, -y);

第1〜第4引数まではデフォルト値。第5引数と第6引数にそれぞれ -x, -y を指定することで、元となる画像を左に x ピクセル、上に y ピクセル移動している。これにより、新しい BitmapData オブジェクトには 元の BitmapData の座標(x, y) から、新しい BitmapData の幅・高さの分だけ描画される。

4. サンプルスクリプト(2)

import flash.geom.Point;
import flash.geom.Rectangle;
import flash.display.BitmapData;

/**
 *
 * BitmapData の切り抜き
 *
 * @param       BitmapData      src         元となる BitmapData オブジェクト
 * @param       int             x           切り抜く領域の左上座標・x値
 * @param       int             y           切り抜く領域の左上座標・y値
 * @param       int             w           切り抜く領域の幅（width）
 * @param       int             h           切り抜く領域の高さ（height）
 * @return      BitmapData      切り抜かれた画像データ
 *
 */
public function clip(src:BitmapData, x:int, y:int, w:int, h:int):BitmapData
{
  var res:BitmapData = new BitmapData(w, h);
  res.copyPixels(src, new Rectangle(x, y, w, h), new Point(0, 0));
  return res;
}

5. 解説(2)

BitmapData オブジェクトの copyPixels メソッドは元となる画像データ（BitmapData）から指定された領域（Rectangle）から、指定座標（Point）を左上端とする領域にピクセル情報をコピーする。こちらの方が(1)の方法よりも直感的かもしれない。

6. 参考

• Help
• Help
• Help
• Help