android繪製圓形圖片的兩種方式

時間 2019-11-10

原文原文鏈接

看下效果先html

下面有完整的示例代碼canvas

使用BitmapShader（着色器）

咱們在繪製view 的時候就是小學上美術課用水彩筆在本子上畫畫使用着色器繪製圓形圖片最簡單的理解方式就是把bitmap當作一種顏色設置給paint ,paint都已經有顏色了你想讓它方了,圓了,扁了還不是看你心情 canvas調用那個方法咯app

實現的大體思路以下：
1. 建立一個類繼承imageView 重寫onDraw()
2. 獲取到bitmap圖片
3. 計算圖片的縮放比例使用矩陣matrix 進行縮放
4. 建立BitmapShader着色器設置縮放矩陣
5. paint設置着色器繪製ide

具體實現註釋也標註的很清楚測試

private void shaderCircle(Canvas canvas){
        //獲取Drawable
        Drawable resources=getDrawable();
        float scale = 1.0f;//縮放比例
        int mRadius=0;//圓的半徑
        if (resources instanceof BitmapDrawable){
            //獲取bitmap
            Bitmap bitmap=((BitmapDrawable) resources).getBitmap();
            if (bitmap==null) return;
            // 獲取bitmap寬高中的小值
            int minBitMap = Math.min(bitmap.getWidth(), bitmap.getHeight());
            //取view寬高中的小值 儘可能保證圖片內容的顯示
            int minValue=Math.min(getWidth(),getHeight());
            //設置半徑
            mRadius=minValue/2;
            //計算縮放比例  必定要*1.0f 由於int之間的計算結果會四捨五入0或1 效果就不美麗了
            scale=minValue*1.0f/minBitMap;
            //設置縮放比例
            matrix.setScale(scale,scale);
            /**
             * 建立着色器 設置着色模式
             * TileMode的取值有三種：
             *  CLAMP 拉伸  REPEAT 重複   MIRROR 鏡像
             */
            BitmapShader shader=new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            //設置矩陣
            shader.setLocalMatrix(matrix);
            paint.setShader(shader);
            canvas.drawCircle(mRadius, mRadius, mRadius, paint);
        }
    }

使用Xfermode 設置圖片相交模式

簡單說呢在一張畫布上畫了兩張圖片這兩張圖的以怎樣的方式顯示出來例如：只顯示上層圖片，只顯示下層圖片，顯示兩張圖的交集部分等等等.net

實現思路3d

建立一個空bitmap 根據這個bitmap建立一個Canvas
設置Canvas透明畫一個想要實現的形狀
設置圖形相交模式
獲取圖片資源繪製到Canvas

實現代碼code

private Bitmap getCircleBitmap(){
        Drawable drawable=getDrawable();

        if (drawable instanceof BitmapDrawable) {
            Paint paint=new Paint();
            paint.setAntiAlias(true);
            //獲取資源圖片
            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
            //建立空位圖
            Bitmap output=Bitmap.createBitmap(getWidth(),getHeight(),Bitmap.Config.ARGB_8888);
            //建立畫板
            Canvas canvas=new Canvas(output);
            //繪製整個畫板爲透明
            canvas.drawColor(Color.TRANSPARENT);
            paint.setColor(Color.WHITE);
            //繪製圓角圖片
            if (type==ROUND){
                canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()), mRound, mRound,paint);
            }else{
                //繪製圓形圖片
            
                //取view寬高中的小值 儘可能保證圖片內容的顯示
                int minValue = Math.min(getWidth(), getHeight());
                //設置半徑
                mRadius = minValue / 2;
                canvas.drawCircle(mRadius,mRadius,mRadius,paint);
            }
            //設置圖形相交模式
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

            Rect src=new Rect(0,0,bitmap.getWidth(),bitmap.getHeight());
            Rect dst=new Rect(0,0,output.getWidth(),output.getHeight());
            canvas.drawBitmap(bitmap,src,dst,paint);
            return output;
        }
        return null;

    }

這個特別經典的圖......orm

PorterDuff.Mode.CLEAR 清除畫布上圖像
PorterDuff.Mode.SRC 顯示上層圖像
PorterDuff.Mode.DST 顯示下層圖像
PorterDuff.Mode.SRC_OVER上下層圖像都顯示，上層居上顯示
PorterDuff.Mode.DST_OVER 上下層都顯示,下層居上顯示
PorterDuff.Mode.SRC_IN 取兩層圖像交集部分只顯示上層圖像
PorterDuff.Mode.DST_IN 取兩層圖像交集部分,只顯示下層圖像
PorterDuff.Mode.SRC_OUT 取上層圖像非交集部分
PorterDuff.Mode.DST_OUT 取下層圖像非交集部分
PorterDuff.Mode.SRC_ATOP 取下層圖像非交集部分與上層圖像交集部分
PorterDuff.Mode.DST_ATOP 取上層圖像非交集部分與下層圖像交集部分
PorterDuff.Mode.XOR 取兩層圖像的非交集部分

參考文檔htm

講Shader類很是很是屌的帖子
 詳解Paint的setXfermode

繼承ImageVIew完成圓形和圓角圖片控件的實現過程（使用着色器）

<declare-styleable name="CircleImage">
        <attr name="imageRound" format="dimension"/>
        <attr name="imageType">
            <enum name="circle" value="0"/>
            <enum name="round" value="1"/>
        </attr>

    </declare-styleable>

public class CircleImage extends ImageView {

    private Matrix matrix;
    private Paint paint;
    private int mRound;//圓角度數
    private int mRadius;//圓的半徑
    private int type;//控件類型
    private final int CIRCLE=0;//圓形
    private final int ROUND=1;//圓角

    public CircleImage(Context context) {
        super(context,null);
    }

    public CircleImage(Context context, AttributeSet attrs) {
        super(context, attrs);
        matrix=new Matrix();
        paint=new Paint();
        paint.setAntiAlias(true);
        initAttrValues(context,attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (getDrawable() == null) {
            return;
        }
        setShader();
        if (type==CIRCLE){
            canvas.drawCircle(mRadius, mRadius, mRadius, paint);
        }else{
            canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()), mRound, mRound,paint);
        }
    }

    /**
     * 初始化屬性集合
     * @param context
     * @param attrs
     */
    private void initAttrValues(Context context, AttributeSet attrs){
        TypedArray typedArray=context.obtainStyledAttributes(attrs, R.styleable.CircleImage);
        for (int i=0;i<typedArray.getIndexCount();i++){
            int index=typedArray.getIndex(i);
            switch (index){
                case R.styleable.CircleImage_imageRound:
                    mRound =typedArray.getDimensionPixelSize(index,
                            (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,10,getResources().getDisplayMetrics()));
                    break;
                case R.styleable.CircleImage_imageType:
                    type=typedArray.getInt(index,CIRCLE);
                    break;
            }
        }
    }

    /**
     * 設置着色器
     */
    private void setShader() {
        //獲取Drawable
        Drawable resources=getDrawable();
        float scale = 1.0f;//縮放比例
        if (resources instanceof BitmapDrawable) {
            //獲取bitmap
            Bitmap bitmap = ((BitmapDrawable) resources).getBitmap();
            if (bitmap == null) return;
            //圓形
            if (type==CIRCLE){
                // 獲取bitmap寬高中的小值
                int minBitMap = Math.min(bitmap.getWidth(), bitmap.getHeight());
                //取view寬高中的小值 儘可能保證圖片內容的顯示
                int minValue = Math.min(getWidth(), getHeight());
                //設置半徑
                mRadius = minValue / 2;
                //計算縮放比例  必定要*1.0f 由於int之間的計算結果會四捨五入0或1 效果就不美麗了
                scale = minValue * 1.0f / minBitMap;
            }else{
                //比較view和圖片寬高比例大的 要讓縮放後的圖片大於view
                scale = Math.max(getWidth() * 1.0f / bitmap.getWidth(), getHeight()
                        * 1.0f / bitmap.getHeight());
            }
            //設置縮放比例
            matrix.setScale(scale, scale);
            /**
             * 建立着色器 設置着色模式
             * TileMode的取值有三種：
             *  CLAMP 拉伸  REPEAT 重複   MIRROR 鏡像
             */
            BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            //設置矩陣
            shader.setLocalMatrix(matrix);
            //設置着色
            paint.setShader(shader);
        }
    }


    /**
     * 測試轉換效果 沒什麼卵用 能夠刪除
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction()==MotionEvent.ACTION_DOWN){
            if (type==CIRCLE){
                mRound =10;
                type=ROUND;
            }else{
                type=CIRCLE;
            }
            invalidate();
        }
        return super.onTouchEvent(event);
    }
}