Android Jetpack Compose Canvas drawText colored颜色 混合

您需要设置要使用小于1f的blendMode的Composable的Alpha，或者使用要在其中绘制源和目标的层.降低Alpha会在引擎盖下增加一层，这两者基本上是一样的.

Jetpack Compose Applying PorterDuffMode to Image个

How to clip or cut a Composable?个

fun DrawScope.drawWithLayer(block: DrawScope.() -> Unit) {
    with(drawContext.canvas.nativeCanvas) {
        val checkPoint = saveLayer(null, null)
        block()
        restoreToCount(checkPoint)
    }
}

由于drawText没有blendMode参数，我们需要将其绘制为目标，还添加了动画来演示通过BlendMode进行的 colored颜色 变化.

@Composable
private fun BlendModeSample() {

    val textMeasurer = rememberTextMeasurer()

    val infiniteTransition = rememberInfiniteTransition()


    val offset by infiniteTransition.animateFloat(
        initialValue = -1f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 3000),
            repeatMode = RepeatMode.Reverse
        )
    )
    Canvas(
        modifier = Modifier.size(256.dp),
        onDraw = {

            val textSize = textMeasurer.measure(text = AnnotatedString("A"))
            drawText(
                textMeasurer = textMeasurer,
                text = "A",
                style = TextStyle(
                    color = Color.Black,
                    fontSize = 14.sp
                ),
                topLeft = Offset(
                    x = size.width / 2 - 100f - (textSize.size.width / 2),
                    y = size.height / 2 - (textSize.size.height / 2)
                )
            )


            drawWithLayer {

                // Destination
                drawText(
                    textMeasurer = textMeasurer,
                    text = "B",
                    style = TextStyle(
                        color = Color.Black,
                        fontSize = 14.sp
                    ),
                    topLeft = Offset(
                        x = size.width / 2 - (textSize.size.width / 2),
                        y = size.height / 2 - (textSize.size.height / 2) + offset * 100f
                    ),

                    )

                // Source
                drawCircle(
                    color = Color.Magenta,
                    radius = 50f,
                    center = Offset(
                        x = size.width / 2,
                        y = size.height / 2
                    ),
                    blendMode = BlendMode.SrcOut
                )
            }


        }
    )
}

你也可以使用混合模式来建立一个评级条.

Jetpack Compose: How to create a rating bar?个