如何根据加载图像的颜色绘制边框？答案

【问题标题】：How to draw border depending of color of loaded image?如何根据加载图像的颜色绘制边框？
【发布时间】：2022-06-10 17:34:09
【问题描述】：

我使用线圈库通过 url 加载图像。加载后，我需要根据上传图片的背景颜色在图像周围绘制边框。比如我加载的是白色背景的图片，我需要设置黑色边框。

    val painter = 
            rememberAsyncImagePainter(
                ImageRequest.Builder(LocalContext.current)
                .data(data = imageUrl)
                .apply(block = fun ImageRequest.Builder.() {
                    crossfade(true)
                    allowHardware(false)
                }).build()
            )
        val painterState = painter.state
        Image(
            painter = painter,
            contentDescription = null,
            modifier = Modifier
                .padding(start = 20.dp, top = 20.dp)
                .width(130.dp)
                .height(68.dp)
        )

当painter.state 成功时，我正在使用Palette 库选择加载的drawable 的颜色。

加载成功后如何获取图片并绘制所需颜色的边框？

【问题讨论】：

标签： android android-jetpack-compose coil

【解决方案1】：

我猜你是说

by 成功后如何获取图片

区域的确切边界是在带有ContentScale 的图像内绘制的ImageBitmap。如果那是问题，我构建了一个库，该库返回确切的边界以及绘制的图像的哪一部分，但因为我不确定是否不添加样本。如果您不需要确切的界限，请检查下面的答案

您可以使用 var color by remember {mutableStateOf(Color.Unspecified) 定义颜色

Modifier.border(x.dp, color) 将在此颜色更改时重新组合。从Palette Api 获得所需的颜色后，如果您设置 color = colorVibrant 例如，您将能够以正确的尺寸在您的Image 周围绘制边框。

此处的状态检查是为了创建可生产的样本

val painter =
    rememberAsyncImagePainter(
        ImageRequest.Builder(LocalContext.current)
            .data(data = "https://source.unsplash.com/pGM4sjt_BdQ")
            .apply(block = fun ImageRequest.Builder.() {
                crossfade(true)
                allowHardware(false)
            }).build()
    )

var color by remember { mutableStateOf(Color.Unspecified) }
val painterState = painter.state

if (painterState is AsyncImagePainter.State.Success) {
    color = Color.Red
}

Column() {
    Spacer(Modifier.height(50.dp))
    Text("PainterState State: ${painterState.painter}")
    Image(
        painter = painter,
        contentDescription = null,
        modifier = Modifier
            .padding(start = 20.dp, top = 20.dp)
            .border(2.dp, color)
            .width(300.dp)
            .height(268.dp)
    )
}

【讨论】：

【解决方案2】：

我也认为@Thracian 是正确的。

【讨论】：