Определение пользовательских границ для составного объекта

Question

По умолчанию все составные элементы, как и представления, определены в виде Rects, т. е. четыре определенные угловые точки с различными свойствами. Теперь, если я хочу реализовать что-то вроде этого

(Это просто пример, я хочу реализовать это с помощью очень сложных форм (PATHS с использованием Canvas))

Итак, когда пользователь щелкает по любому из треугольников, должен выполняться определенный кодовый блок, реализованный для этого треугольника.

У меня почти нет возможных подходов к этому, поэтому, пожалуйста, сообщите, если у кого-нибудь есть, спасибо!

Answer 1

Вы можете сделать это, создав пользовательскую форму и применив изображение, которое было нарисовано последним в поле.

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