By default all the Composables, much like views are defined in form of Rects, i.e., four specific corner points with distinct properties. Now, if I want to implement something like this
(This is just an example, I want to implement this with much complex shapes (PATHS using Canvas))
So, when the user clicks on either of the triangles, the specific codeblock implemented for that triangle should be executed.
I got almost no possible approaches to this, so please inform if anyone does, thanks!
You can accomplish it by creating a custom shape and applying the image that is drawn latest in a Box
@Composable
private fun DividedImage() {
Box(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
) {
val context = LocalContext.current
val shapeLeft = GenericShape { size: Size, layoutDirection: LayoutDirection ->
val width = size.width
val height = size.height
moveTo(0f, 0f)
lineTo(0f, height)
lineTo(width, height)
close()
}
val modifierLeft = Modifier
.fillMaxWidth()
.height(200.dp)
.graphicsLayer {
clip = true
shape = shapeLeft
}
.clickable {
Toast
.makeText(context, "LEFT", Toast.LENGTH_SHORT)
.show()
}
.border(3.dp, Color.Green)
val modifierRight = Modifier
.fillMaxWidth()
.height(200.dp)
.clickable {
Toast
.makeText(context, "RIGHT", Toast.LENGTH_SHORT)
.show()
}
.border(3.dp, Color.Red)
Image(
modifier = modifierRight,
painter = painterResource(id = R.drawable.landscape2),
contentDescription = null,
contentScale = ContentScale.FillBounds
)
Image(
modifier = modifierLeft,
painter = painterResource(id = R.drawable.landscape1),
contentDescription = null,
contentScale = ContentScale.FillBounds
)
}
}
