Android 自定义 View 练手 Demo（二）：巧用 Canvas 打造圆形头像

2024-02-16 19:45:57

在我们的 Android 开发实践中，自定义 View 是一个非常重要的技能，它可以让我们轻松实现一些特殊的效果或控件，满足各种业务需求。在上一篇博文中，我们介绍了如何使用 XML 来实现圆形头像的效果。今天，我们再进一步，使用 Canvas 来实现同样的效果，深入了解自定义 View 的绘制机制。

Canvas 简介

Canvas 是 Android 中用来绘制图形和文本的基本组件，它提供了丰富的 API 来控制绘制的位置、颜色、大小和样式。通过使用 Canvas，我们可以直接在屏幕上绘制出各种形状、图像和文字，实现各种自定义效果。

实现圆形头像

使用 Canvas 实现圆形头像的步骤如下：

创建自定义 View 类： 首先，我们需要创建一个自定义 View 类，并重写 onDraw() 方法，在该方法中使用 Canvas 来绘制圆形头像。
绘制圆形： 在 onDraw() 方法中，我们可以使用 Canvas.drawCircle() 方法来绘制一个圆形，其中圆形的中心坐标和半径由我们指定。
设置抗锯齿： 为了让圆形边缘更加平滑，我们可以使用 Canvas.setAntiAlias(true) 来启用抗锯齿功能。
裁剪画布： 为了让圆形只显示在指定区域内，我们可以使用 Canvas.clipPath() 方法来裁剪画布，指定一个与圆形相匹配的裁剪路径。
绘制头像： 裁剪画布后，我们就可以使用 Canvas.drawBitmap() 方法将头像绘制到圆形区域内。

代码示例

class CircleImageView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : ImageView(context, attrs, defStyleAttr) {

    private val paint = Paint().apply {
        isAntiAlias = true
    }

    override fun onDraw(canvas: Canvas) {
        val radius = width / 2f
        canvas.drawCircle(radius, radius, radius, paint)
        canvas.clipPath(Path().apply {
            addCircle(radius, radius, radius, Path.Direction.CW)
        })
        super.onDraw(canvas)
    }
}