概述

写自定义View也有一阵了，买的书基本上也看的差不多了，今天就抽空整理一下实现圆形头像的方法，顺便也回顾一下之前的知识点~

目标

在日常的开发中我们会对图像进行多种处理，有可能是圆形，也可能是边框带圆弧的形状，虽然形状不一，但是我们实现的思路是一样的，那么今天就拿圆形头像来举例说明了，其他图形应该也很容易举一反三了，我们现在的目标，就是要得到如下一个圆形头像

头像结果

circleImageView.png

准备工作

一般绘制时我们都是需要知道控件的大小的，这里我们就需要获得中心点的x,y坐标和半径的大小，以及图片数据

    private var centerX = 0f
    private var centerY = 0f
    private var radius = 0f
    private var bitmap : Bitmap = BitmapFactory.decodeResource(resources, R.drawable.avatar)

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        centerX = (w/2).toFloat()
        centerY = (h/2).toFloat()
        radius = (w/2).toFloat()
        bitmap = Bitmap.createScaledBitmap(bitmap,w,height,false)
        setLayerType(LAYER_TYPE_SOFTWARE,null)
    }

多种实现方式

1.切割画布

这个方法主要是以下步骤

1. 先保存Canvas的状态
1. 然后将Canvas切割成一个圆形
1. 在这个Canvas上绘制图像
1. 最后再恢复画布状态。(因为clip函数是不可逆的，一定要先保存状态)

    private fun byClipCanvas(canvas: Canvas){
        var matrix = Matrix()
        var saveId = canvas.save()
        var path = Path()
        path.addCircle(centerX,centerY,radius,Path.Direction.CW)
        canvas.clipPath(path)
        canvas.drawBitmap(bitmap,matrix,null)
        canvas.restoreToCount(saveId)
    }

2.利用BitmapShader

这种方式相对来说比较简单，步骤如下

1.创建一个bitmapShader
2.将其设置给画笔
3.画笔绘制出对应的圆形区域即可

 private fun byBitmapShader(canvas: Canvas){
        var paint = Paint()
        var bitmapShader = BitmapShader(bitmap,Shader.TileMode.CLAMP,Shader.TileMode.CLAMP)
        paint.shader = bitmapShader
        canvas.drawCircle(centerX,centerY,radius,paint)
    }

3.利用PorterDuffXfermode混合模式来进行绘制

这种方式我们主要利用PorterDuff.Mode.SRC_IN这个模式的特性，首先我们看这个模式的计算公式

         * <p>\(\alpha_{out} = \alpha_{src} * \alpha_{dst}\)</p>
         * <p>\(C_{out} = C_{src} * \alpha_{dst}\)</p>

由此我们可见，当dst的alpha值为0时，最终输出的alpha值也为0，那么在头像图片是不透明的情况下，我们可以采用这样的方式

1.先绘制一个圆，paint的默认颜色为Black，所以可以不用特别设置颜色
2.给Paint设置PorterDuff.Mode.SRC_IN模式
3.绘制头像

private fun byPorterDufferModeCanvas(canvas: Canvas) {
        var paint = Paint()
        canvas.drawCircle(centerX, centerY, radius, paint)
        paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
        canvas.drawBitmap(bitmap, Matrix(), paint)
        paint.xfermode = null
    }

4.利用ShapeDrawable

ShapeDrawable的构造方法中，有一个是OvalShape,顾名思义就是一个椭圆形的drawable,那么我们就可以这样做

1.创建一个圆形的shapeDrawable
2.给shapeDrawable的paint设置BitmapShader
3.然后将shapeDrawable绘制在canvas上

private fun byOvalDrawable(canvas: Canvas) {
        var ovalShapeDrawable = ShapeDrawable(OvalShape())
        // ovalShapeDrawable 在控件中的位置 
        ovalShapeDrawable.setBounds(
            (centerX - radius).toInt(),
            (centerY - radius).toInt(), (centerX + radius).toInt(), (centerY + radius).toInt()
        )
        ovalShapeDrawable.paint.shader =
            BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
        ovalShapeDrawable.draw(canvas)
    }