英文:

compose modifiy icon set part of the color

问题

我有一个用于指示顺序的图标。

我的要求是，当顺序被颠倒时，图标的下半部分变成蓝色；当顺序被翻转时，图标的上半部分变成蓝色。

我找到了一个相关的问题，但在两个方面与我的需求冲突。首先，我不知道如何在Compose中编写这样的代码。其次，我更喜欢使用代码来控制颜色变换。

英文:

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.

答案1

得分: 2

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

https://stackoverflow.com/questions/65653560/jetpack-compose-applying-porterduffmode-to-image

https://stackoverflow.com/questions/73590695/how-to-clip-or-cut-a-composable/73590696#73590696

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

<details>
<summary>英文:</summary>

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

https://stackoverflow.com/questions/65653560/jetpack-compose-applying-porterduffmode-to-image

https://stackoverflow.com/questions/73590695/how-to-clip-or-cut-a-composable/73590696#73590696


Result

[![enter image description here][1]][1]

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


  [1]: https://i.stack.imgur.com/qF3Fv.png

</details>