Jetpack Compose 將 PorterDuffMode 應用於圖像

Question

基於此頁面中的圖像和 PorterDuffModes

我下載了圖像，最初即使它們是png ，它們也有不透明的淺灰色和深灰色矩形並將它們刪除。

並使用此示例代碼進行檢查，將可繪制對象替換為原始代碼中的可繪制對象，並得到結果

看起來它應該與 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 一起使用？

Answer 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可以正常工作 - 我嘗試了許多模式並且一切都按預期工作。

我不知道為什么這不能直接在可組合的 canvas 上工作，但我的解決方法對我來說很好。

Answer 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
        )
    }
}

結果