• Android ImageView自定义圆形与边框(圆形头像)详解


    背景:

    当前我们在使用图片过程中,都知道正常的ImageView是一个矩形RectF,RectF只需要知道两个对角坐标就可以确定该图形的大小

    RectF rect=new RectF(int left,int top,int right,int bottom);

    四个参数可以确定四个角的坐标和矩形的长以及宽。

    但是我们在使用过程中进行会看见圆形或者不规则图片,比如三角形等图片展示,这是如何实现的呢?

    其实这些图片的基础都是矩形图片,如果我们用剪刀能在这边图片进行任意裁剪,那最后的图片就是我们想要显示的嘛?其实这个思路是正确的。

    那我们如何来实现这个呢?这就需要我们重写画布(即对画布的裁剪)

    说明:我们在使用过程中,只要是对画布的裁剪,如果你不放心,可以把裁剪过的ImageView的drawable区回来,设置在正常的显示即可。

    这个时候我们可以测试,发现。最终裁剪的是画布

    1.思路:裁剪

    裁剪这边其实需要我们用一个路径,即Canvas裁剪需要有一个路径,只有知道尺寸,裁缝才会沿着路径剪出精美的画布。

    这时,我们需要借助一个工具类Path

    Path path = new Path();
    path.addCircle(width / 2, height / 2, width / 2 , Path.Direction.CW);

    我们通过path路径,绘制出一个圆出来

    path.addCircle(cx,cy,radius , Path.Direction.CW);

    cx,cy:代表坐标

    radius :圆的半径

    Path.Direction.CW:代表绘制放心,是顺时针还是逆时针

    注意:在做半径的时候,我们应该取宽或者高的最小值做半径

    int radius=Math.min(width,height);

    这时候圆已出来了,接下来就是裁剪

    canvas.clipPath(path);

    一定在绘制之前进行裁剪,否则裁剪会不生效。

    这样,一个简单的裁剪就生成了 

    2.边框颜色

    借用上图,左上角有一个圆,并有一个红色的边框。

    我们知道作图是在画布上的,所以需要在画布sper以后,生成新画布我们再进行绘图。

    绘图我们需要画笔Paint

    Paint paint = new Paint();
    paint.setColor(Color.RED);//画笔颜色
    paint.setStrokeWidth(10);//画笔的笔尖宽
    paint.setStyle(Paint.Style.STROKE);//样式
    paint.setAntiAlias(true);//锯齿
    path.addCircle(width / 2, height / 2, width / 2, Path.Direction.CCW);
    canvas.drawPath(path, paint);

    1.初始化一个画笔,设置好画笔的参数

    2.我们依旧用path画圆,

    3.最后通过画布进行绘制。

    完整代码如下:

    @Override
    protected void onDraw(Canvas canvas) {
    
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        Path path = new Path();
        path.addCircle(width / 2, height / 2, width / 2 , Path.Direction.CCW);
        canvas.clipPath(path);
        super.onDraw(canvas);
    
        //如果需要在图形上进行二次绘画,需要调用super后,也就是剪切后的画布已生成,再进行创作
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        path.addCircle(width / 2, height / 2, width / 2, Path.Direction.CCW);
        canvas.drawPath(path, paint);
    
    
    }
    

    解释:

    有人会发现其他demo中会出现大量的代码,或者画笔的出现,以及BitmapShader来管理,我这边只是简单的处理,自身的熟悉依旧依赖ImageView去调试,你也可以通过BitmapShader生成你们业务需要的样式,拉伸或者填满等效果。这只是介绍入门

  • 相关阅读:
    选择图像区域矩形框控件【原创】
    java集合之Vector与LinkedList[68]
    【深度学习】 Python 和 NumPy 系列教程(五):Python容器:3、集合Set详解(初始化、访问元素、常用操作、常用函数)
    制售《原神》外挂非法获利200万,外挂的危害有多大?
    C++设计模式之观察者模式
    不影响原来python2的情况下安装python3
    Java8强大的新特性 —— “Stream API”
    小黑子—spring:第一章 Bean基础
    计算机毕业设计ssm基于中职学校的校医务室管理系统fb558系统+程序+源码+lw+远程部署
    Android 11.0 下拉状态栏录屏去掉弹窗直接录屏
  • 原文地址:https://blog.csdn.net/qq36246172/article/details/126472515