Hello a Help to implement this design . I don't ne...

# compose

[Saliou seck]

Hello a Help to implement this design .
I don't need the scanner logic but just the overlapping desing how to implement it with compose .

[Travis Griggs]

Are you just asking how to draw that effect?

[Saliou seck]

yes just to have it on top of my fullscreen scanner

[Travis Griggs]

This is probably more/different than what you want:

*private fun* ScrimCover(
hole: ModalPeekhole, color: Color
) {
*val* outline = hole.*shape*.createOutline(
size = hole.*bounds*.*size*,
layoutDirection = _LocalLayoutDirection_.*current*,
density = _LocalDensity_.current
)
*val* cutout = _Path_()._apply_ *{*
_addOutline_(outline)
translate(_Offset_(hole.*bounds*.*left*, hole.*bounds*.*top*))
}
Canvas(modifier = Modifier
._fillMaxSize_()
._pointerInteropFilter_ *{* event *->*
*val* center = _Offset_(event._x_, event._y_)
*val* peephole = _Path_()._apply_ *{* addRect(_Rect_(center = center, 1f)) *}*
*val* isOutside = Path.combine(PathOperation.*Intersect*, cutout, peephole).*isEmpty*
isOutside
*}*) *{*
*val* full = _Path_()._apply_ *{* addRect(_Rect_(Offset.*Zero*, *size*)) *}*
*val* cover = Path.combine(operation = PathOperation.*Difference*, path1 = full, path2 = cutout)
drawPath(path = cover, color = color, style = Fill)
}
}

I use this to put a visual AND pointer mask that has a Shape as a cutout somewhere in it over the whole screen. So you could go with that.

On a simpler note, if you're just going the Rounded rectangle, you should be able to do a Path, add a rect for the outside, and then add a roundedRect for the peekhole. And then fill. You may need to use one of, or a combination of changing the winding rule of the Path, and having the direction of the inner rectangle be the opposite of the parent.

[Saliou seck]

Thank's for your answer i can't import ModalPeekhole to test it

[Travis Griggs]

Yeah, you'll have to rework that part yourself. I would just change that to a Shape parameter and reference the shape directly (instead of hole.shape)

[Saliou seck]

Thank's very much i will 👍

[Travis Griggs]

Looking at the docs, it looks like winding direction isn't available until 1.7.0. so unless you're on the bleeding edge, you'll have to go with the path combining via a diference to get the "cutout"

[Saliou seck]

👍