Jetpack Compose初体验之自定义图表

开发项目的时候，难免会遇到原生控件无法满足，需要自定义的情况，今天通过绘制几个图表来练习一下Jetpack Compose 中的自定义View。

线形图

绘制原理和之前xml中一样，只不过实现的方式变了一些，比之前简单了很多，比如下面通过path来绘制线形图。构建好path之后，直接在Canvas中绘制就OK了。

如果想要对图标进行双指缩放，可以通过Modifier.graphicsLayer().transformable()来监听手势。通过rememberTransformableState来监听手指缩放的大小然后将返回值赋值给相应的变量就可以啦

完整代码：

    data class Point(val X: Float = 0f, val Y: Float = 0f)

    @Composable
    fun LineChart() {
        //用来记录缩放大小
        var scale by remember { mutableStateOf(1f) }
        val state = rememberTransformableState {
                zoomChange, panChange, rotationChange ->
            scale*=zoomChange
        }
        val point = listOf(
            Point(10f, 10f), Point(50f, 100f), Point(100f, 30f),
            Point(150f, 200f), Point(200f, 120f), Point(250f, 10f),
            Point(300f, 280f), Point(350f, 100f), Point(400f, 10f),
            Point(450f, 100f), Point(500f, 200f)
        )
        val path = Path()
        for ((index, item) in point.withIndex()) {
            if (index == 0) {
                path.moveTo(item.X*scale, item.Y)
            } else {
                path.lineTo(item.X*scale, item.Y)
            }
        }
        val point1 = listOf(
            Point(10f, 210f), Point(50f, 150f), Point(100f, 130f),
            Point(150f, 200f), Point(200f, 80f), Point(250f, 240f),
            Point(300f, 20f), Point(350f, 150f), Point(400f, 50f),
            Point(450f, 240f), Point(500f, 140f)
        )
        val path1 = Path()
        path1.moveTo(point1[0].X*scale, point1[0].Y)
        path1.cubicTo(point1[0].X*scale, point1[0].Y, point1[1].X*scale, point1[1].Y, point1[2].X*scale, point1[2].Y)
        path1.cubicTo(point1[3].X*scale, point1[3].Y, point1[4].X*scale, point1[4].Y, point1[5].X*scale, point1[5].Y)
        path1.cubicTo(point1[6].X*scale, point1[6].Y, point1[7].X*scale, point1[7].Y, point1[8].X*scale, point1[8].Y)
        path1.cubicTo(point1[7].X*scale, point1[7].Y, point1[8].X*scale, point1[8].Y, point1[9].X*scale, point1[9].Y)

        Canvas(
            modifier = Modifier
                .fillMaxWidth()
                .height(120.dp)
                .background(Color.White)
                //监听手势缩放
                .graphicsLayer(
                ).transformable(state)
        ) {
            //绘制 X轴 Y轴
            drawLine(
                start = Offset(10f, 300f),
                end = Offset(10f, 0f),
                color = Color.Black,
                strokeWidth = 2f
            )
            drawLine(
                start = Offset(10f, 300f),
                end = Offset(510f, 300f),
                color = Color.Black,
                strokeWidth = 2f
            )
            //绘制path
            drawPath(
                path = path,
                color = Color.Blue,
                style = Stroke(width = 2f)
            )
            drawPath(
                path = path1,
                color = Color.Green,
                style = Stroke(width = 2f)
            )
        }
    }

柱状图

下面来绘制柱状图，绘制很简单，直接根据坐标绘制矩形就可以了。Jetpack Compose中的绘制矩形的API跟之前XML中的API不大一样，需要提供绘制的左上角和矩形的大小就可以绘制了，看一下构造函数就知道了。

然后给柱子加上点击事件，Jetpack Compose中监听点击的屏幕位置坐标使用Modifier中的pointerInput方法，然后判断点击的坐标是否在矩形的范围之内即可，下面代码中只判断了X轴 的坐标，也可以在加上Y轴的判断。

最后再给柱形图加上动画，动画使用animateFloatAsState方法，值设置为0到1代表当前绘制高度的百分比，然后绘制的时候给高度添加该百分比的值就OK了。

完整代码：

  private fun identifyClickItem(points: List<Point>, x: Float, y: Float): Int {
        for ((index, point) in points.withIndex()) {
            if (x > point.X+20 && x < point.X + 20+40) {
                return index
            }
        }
        return -1
    }

    @Composable
    fun BarChart() {
        val point = listOf(
            Point(10f, 10f), Point(90f, 100f), Point(170f, 30f),
            Point(250f, 200f), Point(330f, 120f), Point(410f, 10f),
            Point(490f, 280f), Point(570f, 100f), Point(650f, 10f),
            Point(730f, 100f), Point(810f, 200f)
        )
        var start by remember { mutableStateOf(false) }
        val heightPre by animateFloatAsState(
            targetValue = if (start) 1f else 0f,
            animationSpec = FloatTweenSpec(duration = 1000)
        )
        Canvas(
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp)
                .background(Color.White)
                .pointerInput(Unit) {
                    detectTapGestures(
                        onTap = {
                            val i = identifyClickItem(point, it.x, it.y)
                            Log.d("pointerInput", "onTap: ${it.x} ${it.y} item:$i")
                            Toast
                                .makeText(this@FourActivity, "onTap: $i", Toast.LENGTH_SHORT)
                                .show()
                        }
                    )
                }
        ) {
            //绘制 X轴 Y轴
            drawLine(
                start = Offset(10f, 600f),
                end = Offset(10f, 0f),
                color = Color.Black,
                strokeWidth = 2f
            )
            drawLine(
                start = Offset(10f, 600f),
                end = Offset(850f, 600f),
                color = Color.Black,
                strokeWidth = 2f
            )
            start = true
            for (p in point) {
                drawRect(
                    color = Color.Blue,
                    topLeft = Offset(p.X + 20, 600 - (600 - p.Y) * heightPre),
                    size = Size(40f, (600 - p.Y) * heightPre)
                )
            }
        }
    }

饼图

最后绘制一个饼图，饼图的实现方式可以通过绘制drawPath和drawArc两种方式实现，drawArc的方式简单一点。

给饼图中的每一块添加点击事件，点击事件也是在Modifier的pointerInput方法中监听点击的坐标。Math.atan2()返回从原点（0,0） 到 （x,y）的线与x轴正方向的弧度值，然后通Math.toDegrees()方法把弧度转化为角度，最后通过角度获取点击的区域。

完整代码：

 private fun getPositionFromAngle(angles:List<Float>,touchAngle:Double):Int{
        var totalAngle = 0f
        for ((i, angle) in angles.withIndex()) {
            totalAngle +=angle
            if(touchAngle<=totalAngle){
                return i
            }
        }
        return -1
    }
    @Composable
    fun PieChart() {
        val point = listOf(10f, 40f, 20f, 80f, 100f, 60f)
        val color = listOf(Color.Blue, Color.Yellow, Color.Green, Color.Gray, Color.Red, Color.Cyan)
        val sum = point.sum()
        var startAngle = 0f
        val radius = 200f
        val rect = Rect(Offset(-radius, -radius), Size(2 * radius, 2 * radius))
        val path = Path()
        val angles = mutableListOf<Float>()
        val regions = mutableListOf<Region>()
        var start by remember { mutableStateOf(false) }
        val sweepPre by animateFloatAsState(
            targetValue = if (start) 1f else 0f,
            animationSpec = FloatTweenSpec(duration = 1000)
        )
        Canvas(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .background(Color.White)
                .pointerInput(Unit) {
                    detectTapGestures(
                        onTap = {
                            Log.d(
                                "pointerInput",
                                "onTap: ${it.x - radius.toInt()} ${it.y - radius.toInt()} ${regions}"
                            )
                            var x = it.x - radius
                            var y = it.y - radius
                            var touchAngle = Math.toDegrees(Math.atan2(y.toDouble(),x.toDouble()))
                            //坐标1,2象限返回-180~0  3,4象限返回0~180
                            if(x<0&&y<0 || x>0&&y<0){//1,2象限
                                touchAngle += 360;
                            }
                            val position = getPositionFromAngle(touchAngle = touchAngle,angles = angles)
                            Toast
                                .makeText(
                                    this@FourActivity,
                                    "onTap: $position",
                                    Toast.LENGTH_SHORT
                                )
                                .show()
                        }
                    )
                }
        ) {
            translate(radius, radius) {
                start = true
                for ((i, p) in point.withIndex()) {
                    var sweepAngle = p / sum * 360f
                    println("sweepAngle: $sweepAngle  p:$p  sum:$sum")
                    path.moveTo(0f, 0f)
                    path.arcTo(rect = rect, startAngle, sweepAngle*sweepPre, false)
                    angles.add(sweepAngle)
                    drawPath(path = path, color = color[i])
                    path.reset()

//                    drawArc(color = color[i],
//                        startAngle = startAngle,
//                        sweepAngle = sweepAngle,
//                        useCenter = true,
//                        topLeft = Offset(-radius,-radius),
//                        size = Size(2*radius,2*radius)
//                    )

                    startAngle += sweepAngle
                }
            }
        }
    }

Jetpack Compose 刚出来有一些功能还不完善，可以在drawIntoCanvas的作用域中使用使用原来的canvas，按照原来的方式来绘制。drawIntoCanvas作用域内的对象是一个canvas，通过it.nativeCanvas方法可以返回一个原生Android中的canvas对象。我们就可以通过它来按照原来的方式绘制了。

比如上面的饼图的点击事件，原来我们可以通过Path和Region这两个类结合，计算出每一块的绘制区域。但是在使用的时候发现Jetpack Compose的UI包中没有对应的Region类，只有对应的Path类，想要使用上面的功能就只能使用原来的Path类和Region来计算了。使用方式如下：

@Composable
    fun PieChart1(){
        val point = listOf(10f, 40f, 20f, 80f, 100f, 60f)
        val colors = listOf(Color.Blue, Color.Yellow, Color.Green, Color.Gray, Color.Red, Color.Cyan)
        val sum = point.sum()
        var startAngle = 0f
        val radius = 200f
        val path = android.graphics.Path()
        val rect = android.graphics.RectF(-radius,-radius,radius,radius)
        val regions = mutableListOf<Region>()
        val paint = Paint()
        paint.isAntiAlias = true
        paint.style = Paint.Style.FILL
        Canvas(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .background(Color.White)
                .pointerInput(Unit) {
                    detectTapGestures(
                        onTap = {
                            Log.d(
                                "pointerInput",
                                "onTap: ${it.x - radius.toInt()} ${it.y - radius.toInt()} ${regions.toString()}"
                            )
                            val x = it.x - radius
                            val y = it.y - radius
                            var position = -1
                            for ((i, region) in regions.withIndex()) {
                                if(region.contains(x.toInt(),y.toInt())){
                                    position = i
                                }
                            }
                            Toast
                                .makeText(
                                    this@FourActivity,
                                    "onTap: $position",
                                    Toast.LENGTH_SHORT
                                )
                                .show()
                        }
                    )
                }
        ) {
            translate(radius, radius) {
                drawIntoCanvas {
                    for ((i, p) in point.withIndex()) {
                        var sweepAngle = p / sum * 360f
                        println("sweepAngle: $sweepAngle  p:$p  sum:$sum")
                        path.moveTo(0f, 0f)
                        path.arcTo(rect,startAngle,sweepAngle)
                        //计算绘制区域并保存
                        val r = RectF()
                        path.computeBounds(r,true)
                        val region = Region()
                        region.setPath(path, Region(r.left.toInt(),r.top.toInt(),r.right.toInt(),r.bottom.toInt()))
                        regions.add(region)

                        paint.color = colors[i].toArgb()
                        it.nativeCanvas.drawPath(path,paint)
                        path.reset()
                        startAngle += sweepAngle
                    }
                }
            }
        }
    }

运行效果跟跟前面绘制的饼图效果一样。

总结：Jetpack Compose中自定义View的API比原来的方式简洁了不少，而且当当前API无法满足需求的时候，也可以很方便的使用原来的API进行绘制，体验很不错。