使用 Glide/Coil 将 ImageBitmap 转换为画布

Question

我正在使用 a ，@Composable我需要通过参数 an 传递ImageBitmap，问题是我从给定 url 的服务器获取图像，所以我需要加载这些图像，将它们转换为 a Bitmap，然后转换为 aImageBitmap但我很卡住因为我不知道如何将其转换为 an ImageBitmap，这是我的@Composable

@ExperimentalComposeUiApi
@Composable
fun MyCanvas(
    myImage: ImageBitmap,
    modifier: Modifier = Modifier,
) {
    Canvas(modifier = modifier
        .size(220.dp)
        .clipToBounds()
        .clip(RoundedCornerShape(size = 16.dp)) {

        ...
        val canvasWidth = size.width.toInt()
        val canvasHeight = size.height.toInt()
        val imageSize = IntSize(width = canvasWidth, height = canvasHeight)

        drawImage(
            image = myImage, dstSize = imageSize
        )
        ...
    }
}

因此，当我调用此方法时，@Composable我需要加载图像，但不确定如何开始，并且我需要知道使用 Glide 或 Coil 哪个更好。

Answer 1

您不需要 ImageBitmap 将其绘制到 Canvas 中。您可以在 DrawScope 内绘制画家。您甚至实际上也不需要 Canvas 功能。androidx.compose.foundation.Canvas只不过是 Spacer 与Modifier.drawBehind

@Composable
fun Canvas(modifier: Modifier, onDraw: DrawScope.() -> Unit) =
    Spacer(modifier.drawBehind(onDraw))

你的问题的答案是

@Composable
private fun MyComposable() {
    val sizeModifier = Modifier
        .fillMaxWidth()

    val url =
        "https://avatars3.githubusercontent.com/u/35650605?s=400&u=058086fd5c263f50f2fbe98ed24b5fbb7d437a4e&v=4"

    Column(
        modifier =Modifier.fillMaxSize()
    ) {

      val painter =  rememberAsyncImagePainter(
            model = url
        )

        Canvas(modifier = Modifier
            .clip(RoundedCornerShape(size = 16.dp))
                .size(220.dp)
            ) {
                with(painter) {
                    draw(size = size)
                }
            }

    }
}

当您应用 Modifier.clip() 时，您不必应用 Modifier.clipToBounds()

两者都是一样的，clip 使用 shape extra 到 ClipToBounds

/**
 * Clip the content to the bounds of a layer defined at this modifier.
 */
@Stable
fun Modifier.clipToBounds() = graphicsLayer(clip = true)

/**
 * Clip the content to [shape].
 *
 * @param shape the content will be clipped to this [Shape].
 */
@Stable
fun Modifier.clip(shape: Shape) = graphicsLayer(shape = shape, clip = true)