快捷導(dǎo)航

Android 實現(xiàn)圖片生成卷角和圓角縮略圖的方法

更新時間：2017年11月03日 11:04:17 作者：牧秦丶

本篇文章主要介紹了Android 實現(xiàn)圖片生成卷角和圓角縮略圖的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在 Android 的一些界面中，有時候我們需要為一副圖片生成大小為 n * n 的縮略圖，有時候需要的縮略圖特殊一些，比如：

1、帶圓角的縮略圖：

如果我們需要帶圓角的縮略圖，但提供的圖片是 n * n 的正方形的圖片，該怎么辦？這時候可以在貼圖之前，先利用 Paint.setXfermode 方法來設(shè)置圖片疊加時的混合模式，從而達(dá)到目的。一般而言，使用方法如下：

Paint paint = new Paint();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XXX);
canvas.drawBitmap(srcBmp, rc, rc, paint);

關(guān)于 PorterDuff.Mode 的值，確定了 SrcBmp 和 DstBmp 交疊時像素的處理方式，其作用用一幅圖片展示如下：

我們看出 SrcIn 這個模式，只保留 SrcBmp 和 DstBmp 直接的交集部分，并且只展現(xiàn) SrcBmp 上這部分交集的內(nèi)容。這個模式適合我們做帶圓角的縮略圖。我們先在 Canvas 上繪制一個實心圓角矩形，其他部分透明，然后用這個模式把縮略圖再繪制到 Canvas 上即可：

Bitmap roundThumbBitmap = Bitmap.createBitmap(
  rc.width(), rc.height(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(roundThumbBitmap);

Paint paint = new Paint();
paint.setColor(0xFFFF0000);  // 任何不透明的顏色均可。（作為掩碼色）
paint.setAntiAlias(true);   // 開啟抗鋸齒,防止圓角毛躁.

// 填充一個圓角矩形.
final float radius = 5.0f;
canvas.drawRoundRect(new RectF(rc), radius, radius, paint);

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(srcBmp, rc, rc, paint);

做出的效果如下：

2、帶 “卷角+圓角” 的縮略圖：

有時候，我們需要為一張普通的圖片生成 “卷角+圓角” 效果的圖，像這樣：

這時候，我們可以用兩張輔助圖來實現(xiàn)這個效果，一張底圖做掩碼，得到 “圓角+左上角切角” 的效果，然后用另一張圖片覆蓋在上面，得到 “灰色邊框+右上角卷角” 的效果，我們需要的兩張圖如下：

代碼如下：

Bitmap rollAngleThumbBmp = Bitmap.createBitmap(rc.width(), rc.height(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(rollAngleThumbBmp);

Bitmap maskBmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.mask);
Bitmap borderBmp = ((BitmapDrawable)context.getResources().getDrawable(R.drawable.border)).getBitmap();

Paint paint = new Paint();
paint.setAntiAlias(true);

// 先貼掩碼圖.
canvas.drawBitmap(maskBmp, rc, rc, paint);

// 再用 SrcIn 的模式貼縮略圖.
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(srcBmp, rc, rc, paint);

// 先取消 Xfermode.
paint.setXfermode(null);

// 再貼邊框卷角圖.
canvas.drawBitmap(borderBmp, rc, rc, paint);

得到的效果如下（看起來有些毛躁，純屬是我切的 mask 和 border 圖片的問題，不是方法的問題）：