业务需求

公司产品的用户中心有一个资产统计模块，需要用一个饼状图展示用户资产的分类统计情况，效果图如下：

思路分析

首先，这种效果肯定是要使用自定义控件来实现的。

1. 普通的饼状图很好实现，使用canvas.drawArc()方法绘制弧形即可。

2. 那选中部分的突出效果该如何实现呢？我们可以扩大绘制弧形的矩形区域，同时调整笔记的宽度，即可绘制出如图的突出选中效果。

以下是Kotlin版的代码实现。

代码实现(Kotlin)

/**
 * 自定义饼状图
 */
class AssetPieChart(context: Context, attrs: AttributeSet) : View(context, attrs) {

    private val paint = Paint()

    private val rectF = RectF(0f, 0f, 400f, 400f)

    /**
     * 对自定义控件进行测量
     */
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        val width = View.resolveSize(500, widthMeasureSpec)
        val height = View.resolveSize(500, heightMeasureSpec)
        this.setMeasuredDimension(width, height)
    }

    override fun onDraw(canvas: Canvas) {
        // 移动画布的坐标系
        canvas.translate(100f, 100f)
        // 绘制环形饼状图的普通部分
        paint.strokeWidth = 100f
        paint.color = Color.MAGENTA
        paint.style = Paint.Style.STROKE
        canvas.drawArc(rectF, 0f, -300f, false, paint)
        // 绘制环形饼状图选中(突出)部分
        val offset = -5f
        rectF.inset(offset, offset) // 扩大矩形的快捷方法
        paint.strokeWidth -= offset * 2
        paint.color = Color.GREEN
        canvas.drawArc(rectF, 60f, -60f, false, paint)
    }
}

总结思考

在绘制弧形时，通过改变弧形所在的矩形区域大小以及调整画笔的宽度，即可实现饼状图的选中效果。

思考：如何确定弧形区域的点击范围？