概述
写自定义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.切割画布
这个方法主要是以下步骤
- 先保存Canvas的状态
- 然后将Canvas切割成一个圆形
- 在这个Canvas上绘制图像
- 最后再恢复画布状态。(因为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)
}
注意点
在绘制的过程中一定要记得bitmap的大小缩放问题，因为控件的宽高和bitmap的宽高是两码事，在使用bitmapShader的时候尤其要注意，它并不会对bitmap进行缩放，而且是从左上角开始绘制
总结
圆形头像的实现只是其中一种用途，我们还可以使用上述的几种方式来实现各种形状图片的绘制~今天就到这吧，改天再想想下一篇写点啥...
