背景:

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


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


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

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

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

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

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

Android CircleImageView自定义圆形与边框(圆形头像)详解_顺时针

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

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);


Android CircleImageView自定义圆形与边框(圆形头像)详解_顺时针_02

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

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

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生成你们业务需要的样式,拉伸或者填满等效果。这只是介绍入门