携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

前言

前段时间谷歌开发者公众号发布了一个 compose 进阶挑战，挑战内容是完全使用 compose 编写一个计算器 APP。

思考了一下准备做一个“仿真”形式的计算器。

那么，既然想要做“仿真”，自然少不了显示效果的还原，经典的计算器都是使用的 LCD 显示屏，通过控制不同显象区域的显示与隐藏达到显示 0-9 的数字的目的。

显示效果大致如下：

本文的内容就是通过使用 compose 的自定义绘制(Canvas)，实现上图效果。

最终实现效果如图：

开始编写

使用直线绘制

绘制主体

仔细分析上图，不难发现，其实不过就是一个由3条短横线，4条长竖线构成的 “8” 字形显示区域，通过变换不同的线段显示隐藏来生成不同的数字。

既然如此，肯定想到的就是使用 drawLine 来实现。

首先定义一个 composable 函数：

@Composable
fun LcdNumber(
    number: Int,
    modifier: Modifier = Modifier,
    defaultColor: Color = Color.Gray,
    numberColor: Color = Color.Black,
    numberSize: IntSize = IntSize(10, 30)
)

其中， number 表示要显示的数字，这里只允许传入 0-9；defaultColor 表示线段没有显示时的默认颜色； numberColor 表示线段需要显示时的颜色； numberSize 表示绘制数字的区域大小。

在开始正式实现之前，我们需要先写几个辅助方法。

首先，我们需要判断某条线段是否应该显示，为了方便说明，我们把不同线段编号如下：

然后，编写判断方法如下：

private fun isNeedShow(index: Int, number: Int): Boolean {
    return when (index) {
        0 -> {
            number != 1 && number != 4
        }
        1 -> {
            number != 5 && number != 6
        }
        2 -> {
            number != 2
        }
        3-> {
            number != 1 && number != 4 && number != 7
        }
        4-> {
            number != 1 && number != 3 && number != 4 && number != 5 && number != 7 && number != 9
        }
        5-> {
            number != 1 && number != 2 && number != 3
        }
        6 -> {
            number != 0 && number != 1 && number != 7
        }
        else -> {
            false
        }
    }
}

方法写的很简单粗暴，一看就懂，例如，参考上面的图示索引，对于编号为 0 的直线，除了数字 1 和 4 ，其他数字都需要显示。

有了判断是否需要显示的方法，再简单加两个方法：

private fun getLcdNumberColor(defaultColor: Color, numberColor: Color, isNeedShow: Boolean): Color {
    return if (isNeedShow) numberColor else defaultColor
}

private fun getLcdNumberAlpha(isNeedShow: Boolean): Float {
    return if (isNeedShow) 1f else 0.35f
}

一个用来获取直线颜色，因为却决于直线是否显示，它们的颜色是不同的；一个用来获取直线的透明度，当某条直线不显示时，不仅要使用浅色颜色，还应该把透明度降低，不然不好看。

完成上面的辅助方法后，就可以开始绘制直线了：

@Composable
fun LcdNumber(
    number: Int,
    modifier: Modifier = Modifier,
    defaultColor: Color = Color.Gray,
    numberColor: Color = Color.Black,
    numberSize: IntSize = IntSize(10, 30)
) {
    Canvas(modifier = modifier.size(numberSize.width.dp, numberSize.height.dp)) {
        if (number !in 0..9) return@Canvas

        val shortLineSize = numberSize.width.toFloat()
        val longLineSize = numberSize.height / 2f
        val strokeWidth = shortLineSize / 3f

        var isNeedShow = isNeedShow(0, number)
        drawLine(
            color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
            start = Offset(0f, 0f),
            end = Offset(shortLineSize, 0f),
            strokeWidth = strokeWidth,
            alpha = getLcdNumberAlpha(isNeedShow)
        )
        isNeedShow = isNeedShow(1, number)
        drawLine(
            color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
            start = Offset(shortLineSize, 0f),
            end = Offset(shortLineSize, longLineSize),
            strokeWidth = strokeWidth,
            alpha = getLcdNumberAlpha(isNeedShow)
        )
        isNeedShow = isNeedShow(2, number)
        drawLine(
            color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
            start = Offset(shortLineSize, longLineSize),
            end = Offset(shortLineSize, longLineSize * 2),
            strokeWidth = strokeWidth,
            alpha = getLcdNumberAlpha(isNeedShow)
        )
        isNeedShow = isNeedShow(3, number)
        drawLine(
            color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
            start = Offset(0f, longLineSize*2),
            end = Offset(shortLineSize, longLineSize*2),
            strokeWidth = strokeWidth,
            alpha = getLcdNumberAlpha(isNeedShow)
        )
        isNeedShow = isNeedShow(4, number)
        drawLine(
            color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
            start = Offset(0f, longLineSize),
            end = Offset(0f, longLineSize*2),
            strokeWidth = strokeWidth,
            alpha = getLcdNumberAlpha(isNeedShow)
        )
        isNeedShow = isNeedShow(5, number)
        drawLine(
            color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
            start = Offset(0f, 0f),
            end = Offset(0f, longLineSize),
            strokeWidth = strokeWidth,
            alpha = getLcdNumberAlpha(isNeedShow)
        )
        isNeedShow = isNeedShow(6, number)
        drawLine(
            color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
            start = Offset(0f, longLineSize),
            end = Offset(shortLineSize, longLineSize),
            strokeWidth = strokeWidth,
            alpha = getLcdNumberAlpha(isNeedShow)
        )
    }
}

同样是简单粗暴的直接绘制，我们看一下预览效果：

@Preview(showSystemUi = true)
@Composable
fun PreviewLcdNumber() {
    Column(modifier = Modifier
        .fillMaxSize()
        .padding(8.dp)
    ) {
        Row {
            LcdNumber(number = 0)
            LcdNumber(number = 1)
            LcdNumber(number = 2)
            LcdNumber(number = 3)
            LcdNumber(number = 4)
            LcdNumber(number = 5)
            LcdNumber(number = 6)
            LcdNumber(number = 7)
            LcdNumber(number = 8)
            LcdNumber(number = 9)
        }
        
    }
}

好像也还行？但是仔细一看，好像不够拟真啊？再看看原图和仿写的对比：

发现了吗？没错，原图每个直线的两端都是有不同的斜角的，而且直线之间并不是直接连在一起的，而是有一定的间距的。

间距这个还好调整，修改一下 drawLine 的 start 和 end 参数就行了。

但是斜角要怎么实现呢？

查看 drawLine 方法参数，发现有一个 cap 参数：

cap treatment applied to the ends of the line segment

可以使用这个参数更改线段的末尾样式，但是，只提供了三种变换方式：

companion object {
    /**
     * Begin and end contours with a flat edge and no extension.
     */
    val Butt = StrokeCap(0)

    /**
     * Begin and end contours with a semi-circle extension.
     */
    val Round = StrokeCap(1)

    /**
     * Begin and end contours with a half square extension. This is
     * similar to extending each contour by half the stroke width (as
     * given by [Paint.strokeWidth]).
     */
    val Square = StrokeCap(2)
}

貌似还不支持自己编写，反正我翻了一圈文档和源码，没有发现能自己编写的地方。

也就是说，这个也行不通。

那怎么办呢？

或许我们可以稍微变通一下，使用绘制矩形来实现斜角效果？

绘制两端斜角

我们可以通过 rotate 方法，旋转绘制的内容。

因此或许我们可以绘制一个特定尺寸的矩形，然后旋转，以此实现斜角效果：

@Preview(showSystemUi = true)
@Composable
fun PreviewLine() {
    Canvas(modifier = Modifier.size(100.dp, 100.dp)) {
        drawLine(
            color = Color.Black,
            start = Offset(10f, 20f),
            end = Offset(70f, 20f),
            strokeWidth = 20f
        )


        withTransform({
            rotate(45F, Offset(80f, 20f))
        }) {
            drawRect(
                Color.Black,
                topLeft = Offset(65f, 20f),
                size = Size(15f, 15f)
            )
        }
    }
}

上面的代码中，我们先绘制了一个直线，然后绘制一个矩形，并应用旋转变换，得出效果如下：

emmm，怎么说呢，确实是实现了斜角的效果，可是这也和原图的不符合啊，而且原图是单面斜角，不是这种箭头啊。 如果能够绘制一个三角形，直接把三角形拼上去就简单多了，但是很显然， compose 没有提供绘制三角形的方法， 但是可以通过 drawPath 自己实现，不过都使用 drawPath 了，为什么还要采用拼接直线和三角形的方法呢？直接用 drawPath 一把梭哈不是更香？

直接使用 drawPath 绘制

先用量角器量一下斜角的角度：

很显然，是 45° ，其它的斜角我也量过了，都是 45° ，那就好说了，至少不用算三角函数了。

接下来就是使用 drawPath 绘制直线，这里我们以 0 号直线为例：

@Composable
private fun Line0(width: Float, length: Float) {
    Canvas(modifier = Modifier.size(100.dp, 100.dp)) {
        val path = Path()
        path.moveTo(0f, 0f)
        path.lineTo(length, 0f)
        path.lineTo(length-width, width)
        path.lineTo(width, width)

        drawPath(path = path, color = Color.Black)
    }
}

上面代码中 width 表示线宽， length 表示线长。

因为斜角是 45° 所以不需要做坐标计算，直接使用 path.lineTo(length-width, width) 即可绘制出右边斜角，而左边斜角则直接使用 path.lineTo(width, width) 绘制。

让我们来看看效果：

唔，终于对味了，那接下来就是把其他几条直线也画出来就 OK 了：

@Composable
fun LcdNumber(
    number: Int,
    modifier: Modifier = Modifier,
    defaultColor: Color = Color.Gray,
    numberColor: Color = Color.Black,
    numberSize: IntSize = IntSize(10, 30)
) {
    Canvas(modifier = modifier.size(numberSize.width.dp, numberSize.height.dp)) {
        if (number !in 0..9) return@Canvas // 如果不是数字 0-9 就直接退出

        val path = Path()
        
        var shortLineSize = numberSize.width.toFloat() // 使用画布宽度作为横线长度
        val longLineSize = numberSize.height / 2f // 使用画布高度的一半作为竖线长度
        val strokeWidth = shortLineSize / 3f // 使用横线的 1/3 作为线段宽度
        val spacing = 1f // 线段间隔 1 像素
        var isNeedShow = false

        // draw line 0
        isNeedShow = isNeedShow(0, number)
        path.moveTo(0f, 0f) // 移动画笔至画布原点
        path.lineTo(shortLineSize, 0f) // 从上一个点向右直线移动到横线长度位置
        path.lineTo(shortLineSize - strokeWidth, strokeWidth) // 从上一个点向左偏移线段宽度并向下偏移线段宽度，直线移动
        path.lineTo(strokeWidth, strokeWidth) // 从上一个偏移至xy轴至线段宽度，直线移动
        // 按照上面的路径绘制图形，闭合最后一个坐标和第一个坐标，并且填充图形
        drawPath(
            path = path,
            color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
            alpha = getLcdNumberAlpha(isNeedShow)
        )
        // draw line3
        isNeedShow = isNeedShow(3, number)
        // 直接通过旋转 0 号直线的 path 绘制 3 号直线
        // 旋转角度为顺时针 180° ，旋转中心为 shortLineSize/2, longLineSize+strokeWidth+spacin
        // 即整个数字的中心点
        rotate(180f, Offset(shortLineSize/2, longLineSize+strokeWidth+spacing)) {
            drawPath(
                path = path,
                color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
                alpha = getLcdNumberAlpha(isNeedShow)
            )
        }

        // draw line1
        path.reset() // 清除上次对 Path 的操作，重新开始新的偏移
        isNeedShow = isNeedShow(1, number)
        path.moveTo(shortLineSize+spacing, spacing)
        path.lineTo(shortLineSize+spacing, spacing + longLineSize)
        path.lineTo(shortLineSize+spacing-strokeWidth/2, longLineSize+spacing+strokeWidth)
        path.lineTo(shortLineSize+spacing-strokeWidth, longLineSize+spacing)
        path.lineTo(shortLineSize+spacing-strokeWidth, strokeWidth+spacing)
        drawPath(
            path = path,
            color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
            alpha = getLcdNumberAlpha(isNeedShow)
        )

        // draw line4
        isNeedShow = isNeedShow(4, number)
        rotate(180f, Offset(shortLineSize/2, longLineSize+strokeWidth+spacing)) {
            drawPath(
                path = path,
                color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
                alpha = getLcdNumberAlpha(isNeedShow)
            )
        }

        // draw line2
        isNeedShow = isNeedShow(2, number)
        path.reset()
        path.moveTo(shortLineSize+spacing-strokeWidth/2, longLineSize+spacing*2+strokeWidth)
        path.lineTo(shortLineSize+spacing, longLineSize+spacing*2+strokeWidth*2)
        path.lineTo(shortLineSize+spacing, longLineSize*2+spacing*2+strokeWidth*2)
        path.lineTo(shortLineSize+spacing-strokeWidth, longLineSize*2+spacing*2+strokeWidth)
        path.lineTo(shortLineSize+spacing-strokeWidth, longLineSize+spacing*2+strokeWidth*2)
        drawPath(
            path = path,
            color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
            alpha = getLcdNumberAlpha(isNeedShow)
        )

        // draw line5
        isNeedShow = isNeedShow(5, number)
        rotate(180f, Offset(shortLineSize/2, longLineSize+strokeWidth+spacing)) {
            drawPath(
                path = path,
                color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
                alpha = getLcdNumberAlpha(isNeedShow)
            )
        }

        // draw line6
        isNeedShow = isNeedShow(6, number)
        shortLineSize -= strokeWidth
        path.reset()
        path.moveTo(strokeWidth+spacing, longLineSize+spacing*2)
        path.lineTo(strokeWidth+spacing+shortLineSize-strokeWidth*2, longLineSize+spacing*2)
        path.lineTo(strokeWidth+spacing+shortLineSize-strokeWidth, longLineSize+spacing*2+strokeWidth/2)
        path.lineTo(strokeWidth+spacing+shortLineSize-strokeWidth*2, longLineSize+spacing*2+strokeWidth)
        path.lineTo(strokeWidth+spacing, longLineSize+spacing*2+strokeWidth)
        path.lineTo(strokeWidth+spacing-strokeWidth, longLineSize+spacing*2+strokeWidth/2)
        translate(left = strokeWidth/2, top = strokeWidth/2) {
            drawPath(
                path = path,
                color = getLcdNumberColor(defaultColor, numberColor, isNeedShow),
                alpha = getLcdNumberAlpha(isNeedShow)
            )
        }

    }
}

上面代码我已经添加了注释。

这里说一下， 3 号直线可以由 0 号直线旋转得到、4 号 可由 1 号旋转得来、5 号可由 2 号旋转得来。

其实，理论上来说，横向的直线，除了六号，其他全部可以由 0 号旋转得来，竖向直线全部可以由 1 号旋转得来，但是我翻遍了文档和源码没有找到 Z 轴旋转，只有 X，Y 轴旋转，所以导致有些线无法直接旋转得到。

（ps：其实看源码找到一个通过矩阵变形可以实现 Z 轴旋转，但是引入矩阵反而会更麻烦了，索性多写几个算了）

我们来看看效果怎么样：

哈哈，终于像了！

虽然因为某些尺寸计算可能不太完美，导致字体有点偏“瘦长”了，但是总体来说还是挺还原的。

对了，上面的代码，我没有对单位进行换算，各位使用时别忘了换算一下单位

总结

compose 的 Canvas 的自定义绘制相比于原生 view 的绘制简单的多，因为少了很多模板代码，也不用去考虑生命周期的问题。

但是简单也有简单的劣势，那就是可定制性相比于原生 view 没有那么多，少了一些方法。

对了，写完这个“仿真”显示界面，我突然觉得好像“仿真”计算器并没有什么意思，所以决定不做这个类型的了（笑