Jetpack Compose 将 PorterDuffMode 应用于图像答案

【问题标题】：Jetpack Compose Applying PorterDuffMode to ImageJetpack Compose 将 PorterDuffMode 应用于图像
【发布时间】：2021-04-15 14:39:24
【问题描述】：

基于this page中的图片和PorterDuffModes

我下载了图片，虽然它们最初是 png，但它们有不透明的浅灰色和深灰色矩形并将它们删除。

并使用this sample code 进行检查，将drawables 替换为原始代码中的drawables，然后我得到结果

看起来它可以在 Android View 中正常工作，但是当我使用 Jetpack Canvas 时

androidx.compose.foundation.Canvas(modifier = Modifier.size(500.dp),
    onDraw = {

        drawImage(imageBitmapDst)
        drawImage(imageBitmapSrc, blendMode = BlendMode.SrcIn)

    })

BlendMode.SrcIn 在黑色矩形上绘制蓝色矩形，其他模式也不会返回正确的结果。 BlendMode.SrcOut 返回黑屏。

并使用Box 堆叠在一起的 2 张图片

val imageBitmapSrc: ImageBitmap = imageResource(id = R.drawable.c_src)
val imageBitmapDst: ImageBitmap = imageResource(id = R.drawable.c_dst)

Box {
    Image(bitmap = imageBitmapSrc)
    Image(
        bitmap = imageBitmapDst,
        colorFilter = ColorFilter(color = Color.Unspecified, blendMode = BlendMode.SrcOut)
    )
}

只有蓝色的 src 矩形是可见的。

也尝试了Painter，但也无法使其工作

val imageBitmapSrc: ImageBitmap = imageResource(id = R.drawable.c_src)
val imageBitmapDst: ImageBitmap = imageResource(id = R.drawable.c_dst)

val blendPainter = remember {
    object : Painter() {

        override val intrinsicSize: Size
            get() = Size(imageBitmapSrc.width.toFloat(), imageBitmapSrc.height.toFloat())

        override fun DrawScope.onDraw() {
            drawImage(imageBitmapDst, blendMode = BlendMode.SrcOut)
            drawImage(imageBitmapSrc)
        }
    }
}

Image(blendPainter)

Blend 或 PorterDuff 模式应如何与 Jetpack Compose 一起使用？

【问题讨论】：

标签： android canvas android-jetpack-compose porter-duff

【解决方案1】：

对于类似的问题，我真的很沮丧整整一周，但是你的问题帮助我找到了解决方案，如何让它发挥作用。

编辑：

我正在使用撰写1.0.0

在我的情况下，我使用双缓冲之类的东西，而不是直接在画布上绘图 - 只是作为一种解决方法。

Canvas(modifier = Modifier.fillMaxWidth().fillMaxHeight()) {

    // First I create bitmap with real canva size
    val bitmap = ImageBitmap(size.width.toInt(), size.height.toInt())

    // here I'm creating canvas of my bitmap
    Canvas(bitmap).apply {
       // here I'm driving on canvas
    }
   
    // here I'm drawing my buffered image
    drawImage(bitmap)
}

在Canvas(bitmap) 内部，我正在使用drawPath、drawText 等进行绘画：

val colorPaint = Paint().apply {
    color = Color.Red
    blendMode = BlendMode.SrcAtop
}

以这种方式BlendMode 工作正常 - 我尝试了许多模式，一切都按预期工作。

我不知道为什么这不能直接在可组合的画布上工作，但我的解决方法对我来说很好。

【讨论】：

我无法让它工作。你能提供一个完整的示例或 gist/github 示例来试用吗？
我会在这周尝试这样做色雷斯人，使用 compose 1.0.0 stable 对你来说可以吗？
没关系。再次感谢。我用 1.0.0 进行了检查，但无法像图像中那样解决它。
@Thracian 我刚刚更新了我的答案，我希望它会更有帮助。如果它仍然无法解决您的问题，我会再尝试帮助您:)

【解决方案2】：

解决问题的最简单方法是添加 .graphicsLayer(alpha = 0.99f) 到 Modifier 以确保屏幕外缓冲区

@Composable
fun DrawWithBlendMode() {


    val imageBitmapSrc = ImageBitmap.imageResource(
        LocalContext.current.resources,
        R.drawable.composite_src
    )
    val imageBitmapDst = ImageBitmap.imageResource(
        LocalContext.current.resources,
        R.drawable.composite_dst
    )


    Canvas(
        modifier = Modifier
            .fillMaxSize()
            // Provide a slight opacity to for compositing into an
            // offscreen buffer to ensure blend modes are applied to empty pixel information
            // By default any alpha != 1.0f will use a compositing layer by default
            .graphicsLayer(alpha = 0.99f)
    ) {


        val dimension = (size.height.coerceAtMost(size.width) / 2f).toInt()

        drawImage(
            image = imageBitmapDst,
            dstSize = IntSize(dimension, dimension)
        )
        drawImage(
            image = imageBitmapSrc,
            dstSize = IntSize(dimension, dimension),
            blendMode = BlendMode.SrcOut
        )
    }
}

结果

【讨论】：