Jetpack Compose clip modifier inversion

Question

I have a screen where I display a Grid and behind it an Image for cropping action.

I am trying to achieve the UI where the cropped section of the Image will be displayed with a dark layer on top of it.

I have the written the code below where I clip the layer that darkens the Image with a GenericShape

Box {
    Spacer(
        modifier = Modifier
            .clip(GenericShape { size, _ ->
                moveTo((size.width - gridWidth) / 2, (size.height - gridHeight) / 2)
                relativeLineTo(gridWidth, 0f)
                relativeLineTo(0f, gridHeight)
                relativeLineTo(-gridWidth, 0f)
                close()
            })
            .background(Color.Black.copy(alpha = GRID_OPACITY))
            .fillMaxSize()
    )
    Grid(
        modifier = Modifier
            .width(widthDp)
            .height(heightDp)
            .align(Alignment.Center),
        numberOfColumns = 3,
        lineColor = Color.White
    )
}

The code above is achieving the opposite result of the desired one. The easy way out is just to invert the clip path. Is there a way to invert the clip?

check out [this answer](https://stackoverflow.com/a/69048352/3585796) — Phil Dukhov, May 01 '22 at 05:13
Thanks @PylypDukhov, this actually helped me solving this. Will post the working code shortly — TareK Khoury, May 01 '22 at 05:38
You're welcome. Since this answer has helped you, please upvote it. Voting is the most appropriate way to thank someone on SO. I see that you don't put upvotes often, see [Why is voting important?](https://stackoverflow.com/help/why-vote). I personally put an upvote for every answer from which I learned something, and for the question it was posted on, as without that there would be no answer. — Phil Dukhov, May 01 '22 at 08:05
@PylypDukhov Of course. Gave you the credit in the answer I posted as well. No need to write a second comment to explain this :) — TareK Khoury, May 03 '22 at 13:21
I still can't see any recent upvotes under [my answer](https://stackoverflow.com/a/69048352/3585796) in the [votes history](https://stackoverflow.com/posts/69048352/timeline?filter=WithVoteSummaries), wonder why :) — Phil Dukhov, May 04 '22 at 04:58

score 0 · Answer 1 · answered May 01 '22 at 05:44

Thanks to Pylyp Dukhov comment that forward me to this post, I have a working implementation:

Box {
    Canvas(
        modifier = Modifier.fillMaxSize(),
        onDraw = {
            val rectPath = Path().apply {
                moveTo((size.width - gridWidth) / 2, (size.height - gridHeight) / 2)
                relativeLineTo(gridWidth, 0f)
                relativeLineTo(0f, gridHeight)
                relativeLineTo(-gridWidth, 0f)
                close()
            }
            clipPath(rectPath, clipOp = ClipOp.Difference) {
                drawRect(Color.Black.copy(alpha = GRID_OPACITY))
            }
        }
    )
    Grid(
        modifier = Modifier
            .width(widthDp)
            .height(heightDp)
            .align(Alignment.Center),
        numberOfColumns = 3,
        lineColor = Color.White
    )
}

Result:

Jetpack Compose clip modifier inversion

1 Answers1