After a lot of research and tries, I decided to ask you for some help.
I have 2 drawables that I'd like to merge into one.
The one going on top should be limited to the shape of the one behind.
This is what I've come up with but for some reason, the transparent parts of the one on top is not transparent.
Don't mind the weird offset of the background drawable, that's something I'll fix later.
Later on I want to be able to pass an image and have it fill the shape except the stroke. But maybe I can add the stroke after?
Here is the code:
@Composable
fun Avatar(backgroundDrawable: Int, avatarSize: Int = 80) {
val imageBitmapDst =
getBitmapFromImage(LocalContext.current, backgroundDrawable)
.asImageBitmap()
val imageBitmapSrc =
getBitmapFromImage(LocalContext.current, R.drawable.default_avatar)
.asImageBitmap()
Canvas(modifier = Modifier.size(avatarSize.dp)) {
val dimension = size.height.coerceAtMost(size.width) / 2f
val xPos = (size.width - dimension) / 2f
val yPos = (size.height - dimension) / 2f
drawImage(
image = imageBitmapDst,
)
drawImage(
image = imageBitmapSrc,
dstOffset = IntOffset(xPos.toInt(), yPos.toInt()),
dstSize = IntSize(dimension.toInt(), dimension.toInt()),
blendMode = BlendMode.SrcIn
)
}
}
I feel like I'm nearly there but I missed something.
Thanks in advance for your help!
You either need to set alpha of Canvas less than 1f or use a layer to be able to apply Blend or Porter Duff modes.
with(drawContext.canvas.nativeCanvas) {
val checkPoint = saveLayer(null, null)
// Destination
drawImage(
image = imageBitmapDst,
)
// Source
drawImage(
image = imageBitmapSrc,
dstOffset = IntOffset(xPos.toInt(), yPos.toInt()),
dstSize = IntSize(dimension.toInt(), dimension.toInt()),
blendMode = BlendMode.SrcIn
)
restoreToCount(checkPoint)
}
You can refer these questions and answers
https://stackoverflow.com/a/69790654/5457853