如何在 Jetpack Compose 中使用线圈在图像上书写文字？

Question

如何在 Jetpack Compose 中使用线圈在图像上书写文字？

例如，我想写入线圈在 Jetpack Compose 中显示的电影图像的 IMDB 分数。也许有黄色背景。是否可以？谢谢你的帮助

举个例子：

    AsyncImage(
                model = ImageRequest.Builder(LocalContext.current)
                    .data("https://www.alamy.com/stock-photo/old-movie.html")
                    .crossfade(true)
                    .build(),
                placeholder = painterResource(R.drawable.ic_baseline_local_movies_24),
                contentDescription = movie.name,
                contentScale = ContentScale.Crop,
                modifier = Modifier.clip(
                    RoundedCornerShape(
                        5.dp,
                        5.dp,
                        0.dp,
                        0.dp
                    )
                )
            )

我应该在代码中的哪里添加文本？

Answer 1

一种解决方案可能是使用 Box。

这是一个例子：

Box {
        AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .data("https://www.alamy.com/stock-photo/old-movie.html")
                .crossfade(true)
                .build(),
            placeholder = painterResource(R.drawable.ic_baseline_local_movies_24),
            contentDescription = movie.name,
            contentScale = ContentScale.Crop,
            modifier = Modifier.clip(
                RoundedCornerShape(
                    5.dp,
                    5.dp,
                    0.dp,
                    0.dp
                )
            )
        )

        Text(
            modifier = Modifier
                 .background(Color.Yellow)
                 .align(Alignment.BottomStart),
            text = "IMDB: 7.4",
        )
    }

Answer 2

@M.Mahdi Behroozfar 的回答是在任何可组合项上绘制文本的主要方式。这是一种不太为人所知的替代方法，也可以让您绘制阴影。

drawText

函数是1.3.0-alpha02版本中引入的

DrawScope

的新函数。

@OptIn(ExperimentalTextApi::class)
@Composable
private fun DrawTextOverImageSample() {
    val textMeasurer = rememberTextMeasurer()

    Image(
        painter = painterResource(id = R.drawable.landscape1),
        contentDescription = null,
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(4 / 3f)
            .drawWithCache {
                val textLayoutResult = textMeasurer.measure(
                    text = AnnotatedString("IMDB 8.0"),
                    style = TextStyle(fontSize = 30.sp)
                )
                onDrawWithContent {
                    drawContent()
                    drawText(
                        textLayoutResult = textLayoutResult,
                        color = Color.White,
                        topLeft = Offset(
                            x = 0f,
                            y = 0f
                        ),
                        shadow = Shadow(
                            color = Color.LightGray,
                            offset = Offset(5f, 5f),
                            blurRadius = 5f
                        )
                    )
                }
            }
    )
}