compose modifiy icon set part of the color

Question

I have an icon to indicate sequence.

My requirement is that when the order is reversed, the lower half of the icon turns blue; when the order is turned, the upper half of the icon turns blue.

I found a related question, but it conflicts with my needs in two points. First, I don't know how to write such code in compose. Second, I prefer to use code to control the color transformation.

Answer 1

Using BlendModes you can manipulate any pixel using another shape, png file, drawing or Path. You can refer these answers for more details

Jetpack Compose Applying PorterDuffMode to Image

How to clip or cut a Composable?

Result

Implementation

@Preview
@Composable
private fun Test() {
    Image(
        modifier = Modifier
            .size(100.dp)
            .drawWithContent {
                val height = size.height

                with(drawContext.canvas.nativeCanvas) {
                    val checkPoint = saveLayer(null, null)

                    // Destination
                    drawContent()

                    // Source
                    drawRect(
                        Color.Red,
                        topLeft = Offset(0f, height / 2),
                        size = Size(size.width, size.height / 2),
                        blendMode = BlendMode.SrcIn

                    )

                }
            },
        painter = painterResource(id = R.drawable.arrows),
        contentDescription = null
    )
}