将 Flutter Painter 转换为 compose

Jetpack组成画布的对应物如下

需要注意的事情.路径在内部，记住不要在任何重新组合时创建新实例，并且我们在路径为空时设置了一次

如果需要应用混合模式，我们应该将画布的Alpha设置为小于1f，或者使用一个层，如this answer

@Composable
private fun FaceOutlineComposable(modifier: Modifier, frameColor: Color) {

    val path = remember { Path() }

    Canvas(modifier = modifier) {

        if (path.isEmpty) {

            val canvasWidth = size.width
            val canvasHeight = size.height
            val width = size.width * 0.95f

            val rect = Rect(
                offset = Offset((canvasWidth - width) / 2, (canvasHeight - width) / 2),
                size = Size(width, width)
            )

            path.apply {
                addArcRad(
                    rect.translate(0.0f, -rect.height * 0.4f),
                    (Math.PI * 9.0 / 8.0).toFloat(),
                    (Math.PI * 2.0 / 8.0).toFloat(),
                )
                addArcRad(
                    rect.translate(0.0f, -rect.height * 0.4f),
                    (Math.PI * 13.0 / 8.0).toFloat(),
                    (Math.PI * 2.0 / 8.0).toFloat(),
                )
                addArcRad(
                    rect,
                    (Math.PI * 1.0 / 8.0).toFloat(),
                    (Math.PI * 2.0 / 8.0).toFloat(),
                )
                addArcRad(
                    rect,
                    (Math.PI * 5.0 / 8.0).toFloat(),
                    (Math.PI * 2.0 / 8.0).toFloat(),
                )
            }
        }
        
        // This is for applying blend modes
        with(drawContext.canvas.nativeCanvas) {
            val checkPoint = saveLayer(null, null)

            drawPath(
                path = path,
                color = frameColor,
                style = Stroke(
                    width = 8.dp.toPx(),
                    cap = StrokeCap.Round,
                    join = StrokeJoin.Round
                ),
                blendMode = BlendMode.Screen
            )

            restoreToCount(checkPoint)
        }
    }
}

用法

FaceOutlineComposable(
    modifier = Modifier
        .fillMaxSize()
        .background(Color(0xff12252a)),
    frameColor = Color(0xff2196F3)
)

结果