画像の反射表示

画像の反射表示

画像の反射は、オリジナル画像と反転した画像を縦に並ぶように配置し
反転画像の部分に
グラデーションを重ねるように描画することで実現する

まずは、Bitmap画像の読み込み
今回は loadBitmap()を定義し
引数として画像のURIを渡すと
ContentProvider経由で取得した画像のBitmapインスタンスを返す

Bitmap bitmapOriginal = loadBitmap(imageUri);

そして、反射された画像を作成するMatrixを生成

Matrix matrix = new Matrix();
matrix.preScale(1,-1);
int height = bitmapOriginal.getHeight();
int width = bitmapOriginal.getWidth();

そして、反転された画像を書き込むBitmapの作成

Bitmap reflectionImage = Bitmap.createBitmap(bitmapOriginal,0, height/2, width,height/2,matrix, false);

そして、オリジナル画像に反転した画像を合成したイメージを書き込むBitmapを作成

Bitmap bitmapWithReflection = Bitmap.createBitmap(width, (height + height/2), Config.ARGB_8888);

そして、オリジナル画像と反転画像をもとに反射画像を生成

//最終的なイメージを書き込むBitmap作成
Canvas canvas = new Canvas(bitmapWithReflection);

//オリジナル画像描画
canvas.drawBitmap(bitmapOriginal, 0,0,null);
Paint defaultPaint = new Paint();

//継ぎ目を目立たなくするため、デフォルトの色を描画
canvas.drawRect(0, height, width, height + REFLECTIONGAP, defaultPaint);

//反転イメージの描画
canvas.drawBitmap(reflectionImage, 0, height+ REFLECTIONGAP,null);

//反転されたイメージ画像を下へいくごとに白くなるグラデーションを設定
Paint paint = new Paint();
LinearGradient shader = new LinearGradient(
0,
bitmapOriginal.getHeight(), 
0,
bitmapWidthReflection.getHeight()+ REFLECTIONGAP,
0x70ffffff,
0x00ffffff,
TileMode.CLAMP
);
paint.setShader(shader);
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));

//グラデーション描画
canvas.drawRect(0,height,width,bitmapWithReflection.getHeight(),REFLECTIONGAP,paint);

反転画像は、
Bitmap.createBitmap()の第6引数の
Matrixで、回転行列
つまり角度みたいなのを設定することで
反転画像をつくれる

反転画像は、画面の下側に反射したかんじで表現する

色を変えないのなら
湖とかに写るような演出もできる

さらに、遠くになるほどぼやけるようにすれば
さらにそれっぽい
例えば、反転画像を下へいくほど
白のグラデーションを上乗せするなど

グラデーションのやり方は
PaintクラスのsetShader()で行い

setXfermode()で、グラデーションのピクセル単位の計算方法を指定して描画する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です