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

2019-10-22 18:24:17

字體：大中小

供稿：網(wǎng)友

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

1、帶圓角的縮略圖：

如果我們需要帶圓角的縮略圖，但提供的圖片是 n * n 的正方形的圖片，該怎么辦？這時(shí)候可以在貼圖之前，先利用 Paint.setXfermode 方法來(lái)設(shè)置圖片疊加時(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 交疊時(shí)像素的處理方式，其作用用一幅圖片展示如下：

Android,卷角縮略圖,圓角縮略圖,卷角和圓角縮略圖

我們看出 SrcIn 這個(gè)模式，只保留 SrcBmp 和 DstBmp 直接的交集部分，并且只展現(xiàn) SrcBmp 上這部分交集的內(nèi)容。這個(gè)模式適合我們做帶圓角的縮略圖。我們先在 Canvas 上繪制一個(gè)實(shí)心圓角矩形，其他部分透明，然后用這個(gè)模式把縮略圖再繪制到 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);   // 開(kāi)啟抗鋸齒,防止圓角毛躁.// 填充一個(gè)圓角矩形.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);

做出的效果如下：

Android,卷角縮略圖,圓角縮略圖,卷角和圓角縮略圖

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

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

Android,卷角縮略圖,圓角縮略圖,卷角和圓角縮略圖

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

Android,卷角縮略圖,圓角縮略圖,卷角和圓角縮略圖

代碼如下：

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);

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

Android,卷角縮略圖,圓角縮略圖,卷角和圓角縮略圖