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

作者: HannyYeung | 来源:发表于2017-06-11 00:28 被阅读188次

自定义继承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);
    }

}

运行结果,图一就是!

相关文章

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

    自定义继承ImageView 效果如下: 实现圆角头像前我们首先做个小的测试:自定义一个PathView,在Xml...

  • css实现圆形锯齿边效果

    话无多说,先看效果。 效果如下: 发散一下,将前后两个色值设置为一样的,这样就可得到一个的圆环。如: 改变后的效果...

  • iOS开发常用库

    框架类 网络AFNetworking轻量级网络库。 网络-图像SDWebImage支持缓存的异步图片加载库。 图像...

  • iOS开发常用库

    框架类 网络AFNetworking轻量级网络库。 网络图像SDWebImage支持缓存的异步图片加载库。 图像G...

  • iOS开发常用库 总结这些优质开源库供快捷开发。如果您有其他优质

    框架类 网络AFNetworking轻量级网络库。 网络图像SDWebImage支持缓存的异步图片加载库。 图像G...

  • Flutter(四) Image组件的使用

    1. 加载远程图片 2. 实现圆形图片 通过把Container设置裁剪为圆形,设置decoration属性,里面...

  • Android实现圆形头像效果

    效果截图 实现原理 对于圆形头像的实现,其实就是对方形图像做某些处理,以达到圆形头像的效果。一般我们会通过Canv...

  • Glide4.0 使用 +圆形图(Shader来实现)

    有时候我们项目需要加载网络圆形图片 比如头像等,在这里我用的是Glide来加载圆形图的。 首先先把代码写下来: R...

  • CSS 锯齿实现

    使用before和after伪元素的border实现 左右和上下锯齿, 左右锯齿实现 设置上下锯齿

  • 深入理解js

    延迟加载 (Lazyload) 三种实现方式 延迟加载也称为惰性加载,即在长网页中延迟加载图像。用户滚动到它们之前...

网友评论

    本文标题:网络加载图像实现圆形无锯齿

    本文链接:https://www.haomeiwen.com/subject/tqgqqxtx.html