前言

這篇部落格只是為了做一個記錄而已，方便而後查詢，核心程式碼都是直接採用鴻洋部落格裡面的程式碼的。

圓形頭像在實際開發中實際很常見，一般來說，主要有兩種實現方式：

• 第一種： 使用 Paint 的 Xfermode 實戰
• 第二種方法： 使用 BitmapShader 實現

第一種： 使用 Paint 的 Xfermode 實戰

圓形頭像，我們可以看成是 在原圖上面繪製一個圓，再取交集。

從程式碼的角度來講，先繪製 Dst,再繪製 Src，顯示的區域是二者交集，由此可知 SrcIn 符合我們的要求。

圓形圖片的核心思路

• 取出 Bitmap，並根據圖片的寬高計算縮放比例
• 設定 Paint 的 setXfermode
• 在 onDraw 方法裡面繪製 Bitmap

核心程式碼

  protected void onDraw(Canvas canvas)  
    {  
        //在快取中取出bitmap  
        Bitmap bitmap = mWeakBitmap == null ? null : mWeakBitmap.get();  

        if (null == bitmap || bitmap.isRecycled())  
        {  
            //拿到Drawable  
            Drawable drawable = getDrawable();  
            //獲取drawable的寬和高  
 

            int dWidth = drawable.getIntrinsicWidth();  
            int dHeight = drawable.getIntrinsicHeight();  

            if (drawable != null)  
            {  
                //建立bitmap  
                bitmap = Bitmap.createBitmap(getWidth(), getHeight(),  
                        Config.ARGB_8888);  
                float
 
 scale = 1.0f;  
                //建立畫布  
                Canvas drawCanvas = new Canvas(bitmap);  
                //按照bitmap的寬高，以及view的寬高，計算縮放比例；因為設定的src寬高比例可能和imageview的寬高比例不同，這裡我們不希望圖片失真；  
                if (type == TYPE_ROUND)  
                {  
                    // 如果圖片的寬或者高與view的寬高不匹配，計算出需要縮放的比例；縮放後的圖片的寬高，一定要大於我們view的寬高；所以我們這裡取大值；  
                    scale = Math.max(getWidth() * 1.0f / dWidth, getHeight()  
                            * 1.0f / dHeight);  
                } else  
                {  
                    scale = getWidth() * 1.0F / Math.min(dWidth, dHeight);  
                }  
                //根據縮放比例，設定bounds，相當於縮放圖片了  
                drawable.setBounds(0, 0, (int) (scale * dWidth),  
                        (int) (scale * dHeight));  
                drawable.draw(drawCanvas);  
                if (mMaskBitmap == null || mMaskBitmap.isRecycled())  
                {  
                    mMaskBitmap = getBitmap();  
                }  
                // Draw Bitmap.  
                mPaint.reset();  
                mPaint.setFilterBitmap(false);  
                mPaint.setXfermode(mXfermode);  
                //繪製形狀  
                drawCanvas.drawBitmap(mMaskBitmap, 0, 0, mPaint);  
                mPaint.setXfermode(null);  
                //將準備好的bitmap繪製出來  
                canvas.drawBitmap(bitmap, 0, 0, null);  
                //bitmap快取起來，避免每次呼叫onDraw，分配記憶體  
                mWeakBitmap = new WeakReference<Bitmap>(bitmap);  
            }  
        }  
        //如果bitmap還存在，則直接繪製即可  
        if (bitmap != null)  
        {  
            mPaint.setXfermode(null);  
            canvas.drawBitmap(bitmap, 0.0f, 0.0f, mPaint);  
            return;  
        }  

    }  
    /** 
     * 繪製形狀 
     * @return 
     */  
    public Bitmap getBitmap()  
    {  
        Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(),  
                Bitmap.Config.ARGB_8888);  
        Canvas canvas = new Canvas(bitmap);  
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);  
        paint.setColor(Color.BLACK);  

        if (type == TYPE_ROUND)  
        {  
            canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()),  
                    mBorderRadius, mBorderRadius, paint);  
        } else  
        {  
            canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2,  
                    paint);  
        }  

        return bitmap;  
    }  

第二種方法： 使用 BitmapShader 實現

Shader used to draw a bitmap as a texture.

官方文件說的很清楚了：BitmapShader的作用是使用特定的圖片來作為紋理來使用。

BitmapShader 的建構函式

public BitmapShader(@NonNull Bitmap bitmap, TileMode tileX, TileMode tileY)

三個引數：

• bitmap 指的是要作為紋理的圖片，
• tileX 指的是在ｘ方向紋理的繪製模式，
• tileY 指的是Ｙ方向上的繪製模式。

TileMode 原始碼：

public enum TileMode {
        /**
         * replicate the edge color if the shader draws outside of its
         * original bounds
         */
        CLAMP   (0),
        /**
         * repeat the shader's image horizontally and vertically
         */
        REPEAT  (1),
        /**
         * repeat the shader's image horizontally and vertically, alternating
         * mirror images so that adjacent images always seam
         */
        MIRROR  (2);

        TileMode(int nativeInt) {
            this.nativeInt = nativeInt;
        }
        final int nativeInt;
    }

TileMode 是一個列舉型別，有３個可能的值：

• CLMP 如果需要填充的內容大小超過了bitmap size 就選bitmap 邊界的顏色進行擴充套件
• REPEAT重複，不斷的重複bitmap去填滿，如果繪製的區域大於紋理圖片的話，紋理圖片會在這片區域不斷重複
• MIRROR映象的去填滿。如果繪製的區域大於紋理圖片的話，紋理圖片會以映象的形式重複出現

BitmapShader 實戰 實現圓形、圓角圖片 核心思路

• 取出 bitmap
• 用 BitmapShader 去裝飾 bitmap，並設定給畫筆
• 在 onDraw 方法中，呼叫 canvas 的 draw 方法繪製

虛擬碼實現思路

//建立
BitmapShader shader=new BitmapShader(bitmap,TileMode.CLAMP,TileMode.CLAMP);
Paint paint=new Paint();
//為paint 設定 Shader
paint.setShader(shader);
//這樣就可以使用shader的紋理去覆蓋繪製的圖形的表面了,其中根據：CLAMP,REPEAT,MIRROR，
//來確定紋理的繪製模式
canvas.draw**(***,paint);

核心程式碼實心思路

@Override  
    protected void onDraw(Canvas canvas)  
    {  
        if (getDrawable() == null)  
        {  
            return;  
        }  
        setUpShader();  

        if (type == TYPE_ROUND)  
        {  
            canvas.drawRoundRect(mRoundRect, mBorderRadius, mBorderRadius,  
                    mBitmapPaint);  
        } else  
        {  
            canvas.drawCircle(mRadius, mRadius, mRadius, mBitmapPaint);  
            // drawSomeThing(canvas);  
        }  
    }  

    @Override  
    protected void onSizeChanged(int w, int h, int oldw, int oldh)  
    {  
        super.onSizeChanged(w, h, oldw, oldh);  
        // 圓角圖片的範圍  
        if (type == TYPE_ROUND)  
            mRoundRect = new RectF(0, 0, getWidth(), getHeight());  
    }  


    /** 
     * 初始化BitmapShader 
     */  
    private void setUpShader()  
    {  
        Drawable drawable = getDrawable();  
        if (drawable == null)  
        {  
            return;  
        }  

        Bitmap bmp = drawableToBitamp(drawable);  
        // 將bmp作為著色器，就是在指定區域內繪製bmp  
        mBitmapShader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP);  
        float scale = 1.0f;  
        if (type == TYPE_CIRCLE)  
        {  
            // 拿到bitmap寬或高的小值  
            int bSize = Math.min(bmp.getWidth(), bmp.getHeight());  
            scale = mWidth * 1.0f / bSize;  

        } else if (type == TYPE_ROUND)  
        {  
            // 如果圖片的寬或者高與view的寬高不匹配，計算出需要縮放的比例；縮放後的圖片的寬高，一定要大於我們view的寬高；所以我們這裡取大值；  
            scale = Math.max(getWidth() * 1.0f / bmp.getWidth(), getHeight()  
                    * 1.0f / bmp.getHeight());  
        }  
        // shader的變換矩陣，我們這裡主要用於放大或者縮小  
        mMatrix.setScale(scale, scale);  
        // 設定變換矩陣  
        mBitmapShader.setLocalMatrix(mMatrix);  
        // 設定shader  
        mBitmapPaint.setShader(mBitmapShader);  
    }  

參考部落格：