Androidでビットマップから円形領域を切り抜く方法を解説

Androidでビットマップから円形領域を切り抜く方法

このチュートリアルでは、Androidアプリでビットマップ画像から円形などの任意の領域を切り抜く方法を、実際のコード例とともに解説します。サンプルでは、ユーザーが画面上を指でなぞった軌跡に沿って画像を切り抜ける、インタラクティブな実装を紹介しています。

ポイントとなるのは、Pathクラスで構築したパスと、PorterDuff.Mode.SRC_INによるピクセル合成処理です。SRC_INは「描画先（パス）と描画元（ビットマップ）が重なる部分だけを残す」モードのため、パスで囲まれた領域のみが残る切り抜き画像を生成できます。

ステップ1：新規プロジェクトを作成する

Android Studioを開き、メニューから「File」→「New Project」を選択します。必要な項目をすべて入力して、新しいプロジェクトを作成しましょう。

ステップ2：レイアウトファイルにコードを追加する

res/layout/activity_main.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
</RelativeLayout>

ステップ3：MainActivity.javaにコードを追加する

src/MainActivity.java に以下のコードを追加します。ここではカスタムView（CutImage）を定義し、onTouchEvent()で取得したタッチ座標をもとにPathを構築します。そしてACTION_MOVE／ACTION_UPのタイミングでCropBitmap()メソッドを呼び出し、PorterDuff.Mode.SRC_INを使ってパス内の領域だけを切り抜いたビットマップを生成しています。

import androidx.appcompat.app.AppCompatActivity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new CutImage(this));
    }

    class CutImage extends View {
        Bitmap bitmap;
        Path path = new Path();
        Paint paint;

        public CutImage(Context context) {
            super(context);
            bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.demo);
            paint = new Paint();
            paint.setColor(Color.RED);
            paint.setStyle(Paint.Style.STROKE);
            paint.setStrokeWidth(5f);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            canvas.drawBitmap(bitmap, 0, 0, null);
            canvas.drawPath(path, paint);
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            float x = event.getX();
            float y = event.getY();
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    path.moveTo(x, y);
                    break;
                case MotionEvent.ACTION_MOVE:
                case MotionEvent.ACTION_UP:
                    path.lineTo(x, y);
                    CropBitmap();
                    break;
            }
            invalidate();
            return true;
        }

        private void CropBitmap() {
            Bitmap croppedBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), bitmap.getConfig());
            Canvas cropCanvas = new Canvas(croppedBitmap);
            Paint paint1 = new Paint();
            cropCanvas.drawPath(path, paint1);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
            cropCanvas.drawBitmap(bitmap, 0, 0, paint1);
            bitmap = croppedBitmap;
            invalidate();
        }
    }
}

ステップ4：AndroidManifest.xmlにコードを追加する

androidManifest.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

アプリを実行してみよう

それでは、アプリケーションを実行してみましょう。実機のAndroid端末をパソコンに接続していることを前提としています。Android Studioからアプリを実行するには、プロジェクト内のいずれかのアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックします。デバイスの選択画面で自分のモバイルデバイスを選択すると、端末の画面に初期状態の画像が表示されます。

画面上を指でなぞると、その軌跡に沿って画像が切り抜かれていく様子を確認できます。この手法を応用すれば、円形・楕円・多角形など、あらゆる形状への画像切り抜きが実現可能です。プロフィール画像のトリミング機能など、さまざまな場面で活用できるテクニックなので、ぜひ参考にしてください。