[Android, Canvas, PorterDiff] PorterDiff.Mode 사용해 모서리가 둥근 이미지 만들기

안녕하세요. 블랙진입니다.

지난 시간 안드로이드 캔버스 기본 예제에 이은 포스팅입니다.

지난 시간 Canvas는 도화지와 같아서 Paint를 사용해 색칠한다고 했습니다. 색칠을 하는데 있어서 두가지 색이 중복되면 더욱 다양한 색상과 효과가 나오듯이 Paint 에서도 PorterDiff.Mode 라는 것이 있습니다.

PorterDiff.Mode

사용한 이미지

https://i.ytimg.com/vi/WCXM4DnwT1g/maxresdefault.jpg

블랙펜서의 이미지를 가지고 테스트를 해보겠습니다.

캔버스에 사용할 종이로 비트맵을 사용한다고 앞선 포스팅에서 설명했습니다.

// blackpanther 이미지를 비트맵으로 변환해줍니다.
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.blackpanther);

// blackpanther 이미지와 같은 크기의 빈 비트맵을 생성해 줍니다.
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
        bitmap.getHeight(), Bitmap.Config.ARGB_8888);

// 빈 비트맵을 캔버스의 재료로 사용합니다.
Canvas canvas = new Canvas(output);

캔버스에 모서리가 둥근 이미지와 블랙펜서 비트맵을 넣어보겠습니다.

int color = 0xff424242;
float roundPx = 300;

Paint paint = new Paint();
Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
RectF rectF = new RectF(rect);

//경계선을 부드럽게 만드는 플레그
paint.setAntiAlias(true);

//블랙펜서 비트맵
canvas.drawBitmap(bitmap, rect, rect, paint);

//모서리가 둥근 사각형
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

imageView.setImageBitmap(output);

이러한 화면이 나옵니다. 뒤에는 블랙펜서 비트맵이 있고 그 앞에 캔버스를 사용해 모서리가 둥근 사각형을 만들어 주었습니다. 아래 보여줄 예제에서는 둥근 사각형이 비트맵 이미지보다 뒤에 있어야 하기 때문에 코드 순서를 바꾸겠습니다.

//모서리가 둥근 사각형
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

//블랙펜서 비트맵
canvas.drawBitmap(bitmap, rect, rect, paint);

이러한 화면이 보여지고 이 뒤에는 모서리가 둥근 원이 있습니다.

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

코드를 추가해주게 되면 아래와 같이 모서리가 둥근 이미지로 바뀌게 됩니다.

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));

반대로 위 코드를 추가해주면

가운데가 뻥 뚫리고 모서리만 남는 이미지가 됩니다.

imageView = findViewById(R.id.imageView);

// blackpanther 이미지를 비트맵으로 변환해줍니다.
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.blackpanther);

// blackpanther 이미지와 같은 크기의 빈 비트맵을 생성해 줍니다.
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
        bitmap.getHeight(), Bitmap.Config.ARGB_8888);

// 빈 비트맵을 캔버스의 재료로 사용합니다.
Canvas canvas = new Canvas(output);

int color = 0xff424242;
float roundPx = 300;

Paint paint = new Paint();
Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
RectF rectF = new RectF(rect);

//경계선을 부드럽게 만드는 플레그
paint.setAntiAlias(true);

//모서리가 둥근 사각형
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

//블랙펜서 비트맵
canvas.drawBitmap(bitmap, rect, rect, paint);

imageView.setImageBitmap(output);

<참고자료>

Source, Destination explain

Porter / Duff Mode