网络加载图像实现圆形无锯齿

自定义继承ImageView

效果如下:

device-2017-06-10-221258.png

实现圆角头像前我们首先做个小的测试:
自定义一个PathView,在Xml里面设置背景为粉红色:

T6GQNEMZMYGC{)B2`YDF`7W.png
画一个和控件大小一样的正方形,背景色为白色

  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.WHITE);
        canvas.drawRect(0,0,width,height,mPaint);
    }

运行效果如下:

device-2017-06-10-230508.png

很简单的东西,然后在PathView里面添加如下代码:
设置Paint

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

设置Path

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        height = h;
        initPath();
    }
    private void initPath() {
        //设置
        path = new Path();
        path.addCircle(width / 2, height / 2, width / 2,
                Path.Direction.CW);
        path.setFillType(Path.FillType.INVERSE_WINDING);
    }

重写onDraw

     @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画白色矩形
        mPaint.setColor(Color.WHITE);
        canvas.drawRect(0,0,width,height,mPaint);
        //画Path
        mPaint.setColor(Color.YELLOW);
        canvas.drawPath(path,mPaint);
    }

反正代码是很简单的东西,看看效果:

device-2017-06-10-230909.png
如何实现这一步的呢,是根据path的四中填充方式,这里用的是反:反非零环绕数规则(INVERSE_WINDING)具体参考:GscSloop

重点

如果我们将path画的黄色部分,变为透明的漏出底部红色背景不就正好了,不就实现了圆形头像,这里运用了一个很重要的知识:
将paint设置为:

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

//设置图形重叠时的处理方式，如合并，取交集或并集，经常用来制作橡皮的擦除效果
setXfermode(Xfermode xfermode);

看看效果:

device-2017-06-10-231923.png

尼玛确实是橡皮擦效果,结果把我的背景都擦没有了,留下黑黑的背景

结果背景问题

因为背景没有了,所以要要处理这一个那就保存原有背景:

      //保留图层
        canvas.saveLayer(0,0,width,height,null ,Canvas.ALL_SAVE_FLAG);

看看效果:

device-2017-06-10-232403.png

果然可以实现这个效果了,那么如果实现图片圆形更是很简单了,过程不再赘述直接贴上代码,总体很简单:

代码:

public class CircleImage extends ImageView {

    private Bitmap bitmap = null;
    private int width;
    private int height;
    private TechView.FitType mFitType = TechView.FitType.CENTER;
    private Bitmap newbitmap;
    private Paint mPaint;
    private Path path;

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

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

    public CircleImage(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
        setScaleType(ScaleType.MATRIX);
        setBitmap(context);
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        height = h;
        intPath();
    }

    private void intPath() {
        //设置
        path = new Path();
        path.addCircle(width / 2, height / 2, width / 2,
                Path.Direction.CW);
        path.setFillType(Path.FillType.INVERSE_WINDING);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (null != newbitmap) {
            //要保存画布,要不会出现背景为黑色的情况
             canvas.saveLayer(0, 0, width, width, null, Canvas.ALL_SAVE_FLAG);
            canvas.drawBitmap(newbitmap, new Matrix(), new Paint());
            canvas.drawPath(path, mPaint);
        }
    }

    public void setBitmap(final Context mContext) {
        String url = "https://ws1.sinaimg.cn/large/610dc034ly1fgchgnfn7dj20u00uvgnj.jpg";
        Glide.with(mContext)
                .load(url)
                .asBitmap()
                .placeholder(R.mipmap.ic_launcher)
                .error(R.mipmap.ic_launcher)
                .into(new SimpleTarget<Bitmap>() {
                    @Override
                    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                        bitmap = resource;
                        //缩放图片
                        setScaleImage(bitmap);
                        invalidate();
                    }

                    @Override
                    public void onLoadFailed(Exception e, Drawable errorDrawable) {
                        super.onLoadFailed(e, errorDrawable);
                        bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.image_1);
                        setScaleImage(bitmap);
                        invalidate();
                    }
                });
    }

    private void setScaleImage(Bitmap mBitmap) {
        // 获得图片的宽高
        int btWidth = mBitmap.getWidth();
        int btHeight = mBitmap.getHeight();
        // 设置想要的大小
        int newWidth = width;
        int newHeight = height;
        // 计算缩放比例
        float scaleWidth = ((float) newWidth) / btWidth;
        float scaleHeight = ((float) newHeight) / btHeight;
        // 取得想要缩放的matrix参数
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        // 得到新的图片
        newbitmap = Bitmap.createBitmap(mBitmap, 0, 0, btWidth, btHeight, matrix,
                true);
    }

}

运行结果,图一就是!