Android画圆形图片，clippath方式/Xfermode方式

Posted 2020-11-30 JJ_S

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android画圆形图片，clippath方式/Xfermode方式相关的知识，希望对你有一定的参考价值。

1.利用canvas.clipPath方法，按照自定义的Path图形去切割控件
2.通过Xfermode方式实现

1.利用canvas.clipPath方法，按照自定义的Path图形去切割控件

ImageView显示图片，底层是通过Canvas将我们的图片资源画到View控件上实现的；
因此，要让其显示圆形图片，只需要对Canvas进行相应的变化，比如切割圆形、绘制圆形。

方法1：

描述：定义一个控件，包含ImageView，定义圆形Path路径，然后调用canvas.clipPath，将图片切割成圆形
缺点：锯齿

代码

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;

import android.util.AttributeSet;
import android.view.View;
import android.widget.AbsoluteLayout;

public class CircleImage extends AbsoluteLayout { // 也可以继承其他的父类
    private int mWidth = 0;
    private int mHeight = 0;
    private Paint mPaint;
    private Path mPath;

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

    public CircleImage(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleImage(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public CircleImage(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initView();
        setWillNotDraw(false);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mWidth = getWidth();
        mHeight = getHeight();
    }


    private void initView() {
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setAntiAlias(true);
        mPath = new Path();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.addCircle(mWidth / 2, mHeight / 2, mWidth / 2, Path.Direction.CCW);
        canvas.clipPath(mPath);
    }
}

xml中定义

<xxx.CircleImage
    android:layout_width="500px"
    android:layout_height="500px"
    android:layout_x="0px"
    android:layout_y="0px"
>
    <ImageView
    android:layout_x="0px"
    android:layout_y="0px"
    android:layout_width="500px"
    android:layout_height="500px"
    android:background="@drawable/xxxpic"
    >
    </ImageView>

</xxx.CircleImage>

// ImageView中还可以设置src
// android:src="@drawable/xxxpic"，但需要设置android:scaleType="centerCrop"
// 不然图片不会跟着窗口大小变化

方法2:

继承AppCompatImageView/ImageView自定义圆形控件
* canvas.clipPath：不支持硬件加速，所以在使用前需要禁止硬件加速
* setLayerType(View.LAYER_TYPE_SOFTWARE, null)
* clipPath要在super.onDraw方法前，调用，否则无效（canvas已经被设置给View了）
* 在onSizeChanged方法中，获取宽高
* 该这方法剪裁的是Canvas图形，View的实际形状是不变的，因此只能对src属性有效，对background属性是无效的

代码：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Path;

import android.util.AttributeSet;
import android.content.res.TypedArray;

import android.support.v7.widget.AppCompatImageView;
import android.graphics.RectF;

public class CircleImage extends AppCompatImageView { // 也可以继承ImageView做

    private RectF mRect;
    private Path mPath;
    private float mRoundRadius;

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

    public CircleImage(Context context, AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public CircleImage(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        getAttributes(context, attrs);
        initView(context);
    }

    private void initView(Context context) {
        mRect = new RectF();
        mPath = new Path();
        setLayerType(LAYER_TYPE_SOFTWARE, null);        // 禁用硬件加速
    }

    private void getAttributes(Context context, AttributeSet attrs) {
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CircleImage);
        mRoundRadius = ta.getInteger(R.styleable.CircleImage_roundRadius, -1);
        ta.recycle();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (mRoundRadius < 0) {
            clipCircle(w, h);
        } else {
            clipRoundRect(w, h);
        }
    }

    /**
     * 圆角
     */
    private void clipRoundRect(int width, int height) {
        mRect.left = 0;
        mRect.top = 0;
        mRect.right = width;
        mRect.bottom = height;
        mPath.addRoundRect(mRect, mRoundRadius, mRoundRadius, Path.Direction.CW);
    }

    /**
     * 圆形
     */
    private void clipCircle(int width, int height) {
        int radius = Math.min(width, height)/2;
        mPath.addCircle(width/2, height/2, radius, Path.Direction.CW);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.clipPath(mPath);
        super.onDraw(canvas);
    }
}

attrs.xml

<declare-styleable name="CircleImage">
    <attr name="roundRadius" format="integer"/>
</declare-styleable>

画面xml

<CircleImage
    android:layout_width="500px"
    android:layout_height="500px"
    android:layout_x="0px"
    android:layout_y="0px"
    android:src="@drawable/image_car"
    android:scaleType="centerCrop"
    app:roundRadius="10"
>

</CircleImage>

解决锯齿的方法

1、通过Paint设置 
Paint mPaint = new Paint()； 
mPaint.setFilterBitmap(true);

2、通过Canvas设置
canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG)); 

不过这种方式不能完全解决圆形图片的锯齿

2.通过Xfermode方式实现

方法1:

自定义控件，包含一个ImageView对象，只对src属性设置的图片有效，background无效
该方法的注意事项就是：控件的大小和子child(ImageView)大小必须一致，可以不是正方形，原因是由于画完圆后，mImageView.setImageBitmap(roundBitmap);也需要设置一个圆盖上去，如果大小不一致，两个圆位置不一样，该问题待解决

代码：

package xxx;

import android.content.Context;

import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.graphics.Paint;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.PorterDuffXfermode;
import android.graphics.PorterDuff;
import android.graphics.Rect;

import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.widget.AbsoluteLayout;
import android.widget.ImageView;

public class CircleImage extends AbsoluteLayout {
    private int mWidth = 100;
    private int mHeight = 100;
    private Paint mPaint;
    private String TAG = "PKG_UICTRL_CircleImage";
    private ImageView mImageView = null;

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

    public CircleImage(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleImage(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public CircleImage(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setFilterBitmap(true);
        mPaint.setDither(true);
        setWillNotDraw(false);
    }


    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        Log.d(TAG, "onFinishInflate: ");
        getView();

    }

    private void getView() {
        Log.d(TAG, " getView iCount="+getChildCount());
        for (int iCount = 0; iCount < getChildCount(); ++iCount) {
            View child = this.getChildAt(iCount);
            if (child instanceof ImageView) {
                Log.d(TAG, " ImageView");
                mImageView=(ImageView)child;
            }
        }
    }

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

        Drawable drawable = mImageView.getDrawable();
        if (null != drawable && (drawable instanceof BitmapDrawable)) {
            Bitmap b = ((BitmapDrawable) drawable).getBitmap();
            Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

            mWidth = getWidth();
            mHeight = getHeight();
             // 计算显示圆形的半径，为保证圆形，取图片的长宽小的一半作为圆形
            int radius = (mWidth < mHeight ? mWidth : mHeight) / 2;
            // 获取我们处理后的圆形图片
            Bitmap roundBitmap = getCroppedCircleBitmap(bitmap, radius);
            // 绘制图片进行显示
            canvas.drawBitmap(roundBitmap, mWidth / 2 - radius, mHeight / 2 - radius, null);

            mImageView.setImageBitmap(roundBitmap);
        }
        else {
            super.onDraw(canvas);
        }
    }

    public Bitmap getCroppedCircleBitmap(Bitmap bmp, int radius) {
        Bitmap scaledSrcBmp;
        int diameter = radius * 2;
        // 对图片进行处理，获取我们需要的中央部分
        Bitmap squareBitmap = getCenterBitmap(bmp);

        // 将图片缩放到需要的圆形比例大小
        if (squareBitmap.getWidth() != diameter || squareBitmap.getHeight() != diameter) {
            scaledSrcBmp = Bitmap.createScaledBitmap(squareBitmap, diameter, diameter, true);
        } else {
            scaledSrcBmp = squareBitmap;
        }
        // 创建一个我们输出的对应
        Bitmap output = Bitmap.createBitmap(scaledSrcBmp.getWidth(),
                scaledSrcBmp.getHeight(),
                Bitmap.Config.ARGB_8888);
        // 在output上进行绘画
        Canvas canvas = new Canvas(output);
        // 创建裁剪的矩形
        Rect rect = new Rect(0, 0, scaledSrcBmp.getWidth(),scaledSrcBmp.getHeight());

        // 绘制dest目标区域
        canvas.drawCircle(scaledSrcBmp.getWidth() / 2,
                scaledSrcBmp.getHeight() / 2,
                scaledSrcBmp.getWidth() / 2,
                mPaint);

        // 设置xfermode模式
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

        // 绘制src源区域
        canvas.drawBitmap(scaledSrcBmp, rect, rect, mPaint);

        bmp.recycle();
        squareBitmap.recycle();
        scaledSrcBmp.recycle();
        return output;
    }

    private Bitmap getCenterBitmap(Bitmap bitmap){
        // 为了防止图片宽高不相等，造成圆形图片变形，因此截取长方形中处于中间位置最大的正方形图片  
        int bmpWidth = bitmap.getWidth();
        int bmpHeight = bitmap.getHeight();
        Bitmap squareBitmap;
        if (bmpHeight > bmpWidth) {
            // 截取正方形图片  ，从(bmpHeight - bmpWidth) / 2处开始截取
            squareBitmap = Bitmap.createBitmap(bitmap, 0, (bmpHeight - bmpWidth) / 2, bmpWidth, bmpWidth);
        } else if (bmpHeight < bmpWidth) {
            squareBitmap = Bitmap.createBitmap(bitmap, (bmpWidth - bmpHeight) / 2, 0, bmpHeight, bmpHeight);
        } else {
            squareBitmap = bitmap;
        }
        return squareBitmap;
    }
}

画面xml：

<CircleImage
    android:layout_width="500px"
    android:layout_height="500px"
    android:layout_x="0px"
    android:layout_y="0px"
>
    <ImageView
    android:layout_x="0px"
    android:layout_y="0px"
    android:layout_width="500px"
    android:layout_height="500px"
    android:src="@drawable/image_car_n"
    >
    </ImageView>

</CircleImage>

方法2:

自定义控件，继承ImageView，该控件本身就可以获得Drawable(this.getDrawable())，不需要像方法1，拿到mImageView，利用mImageView拿到Drawable（mImageView.getDrawable()）

注意：

这两种只适合src设置的图片，原因是src设置的图片getDrawable()才不为空，不是点9图片拿到的是BitmapDrawable可以获取Bitmap图片，((BitmapDrawable) drawable).getBitmap()

点9图片和背景图片想要达到圆形图片，只需在方法1的代码中改onDraw

    @Override
    protected void onDraw(Canvas canvas) {
        if (null == mImageView){
            return;
        }
        mWidth = getWidth();
        mHeight = getHeight();
        Bitmap bitmap = initBitmap();

        if (null != bitmap) {
            // Calculate radius of the circle. To ensure the circle, take half of the length or width as radius
            int radius = (mWidth < mHeight ? mWidth : mHeight) / 2;
            // get round Bitmap
            Bitmap roundBitmap = getCroppedCircleBitmap(bitmap, radius);
            // Draw Bitmap for display
            canvas.drawBitmap(roundBitmap, mWidth / 2 - radius, mHeight / 2 - radius, null);

            mImageView.setBitmap(roundBitmap);
        }
        else {
            super.onDraw(canvas);
        }
    }

    private Bitmap initBitmap()
    {
        Bitmap output = null;
        Drawable drawable1 = mImageView.getDrawable();
        Drawable drawable2 = mImageView.getBackground();
        Drawable drawable = drawable1==null ? drawable2 : drawable1;          // 不能在构造方法中获取drawable，为null
        if (null != drawable && drawable instanceof BitmapDrawable) {
            output = ((BitmapDrawable) drawable).getBitmap();
        } else if (null != drawable && drawable instanceof NinePatchDrawable) { //处理点9图片，利用canvas
            int width = drawable.getIntrinsicWidth(); // image original width
            int height = drawable.getIntrinsicHeight(); // image original height
            output = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(output);
            drawable.draw(canvas);
        } else if (null != drawable && drawable instanceof ColorDrawable){// 处理background设置的图片，没效果，待解决
            output = Bitmap.createBitmap(mWidth,
                    mHeight, Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(output);
            drawable.setBounds(0, 0, mWidth, mHeight);
            drawable.draw(canvas);
        }
        return output;
    }

其他方法参考
https://segmentfault.com/a/1190000012253911
https://blog.csdn.net/Mr_dsw/article/details/48629177

根据资源拿到bitmap图片的一个方法为

Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.pic);

以上是关于Android画圆形图片，clippath方式/Xfermode方式的主要内容，如果未能解决你的问题，请参考以下文章

Android 圆角、圆形 ImageView 实现

Android clipPath导致卡顿

Android_AsyncTaskDemo之QQ记步数（画圆形图片知识）

如何以编程方式用笔画制作圆形可绘制对象？

cocos2dx 3.X 利用clippingNode把图片裁剪成圆形

Android自己定义圆形ImageView(圆形头像可指定大小)