시소당

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

츨처 : https://black-jin0427.tistory.com/145?category=727620