android 如何在Jetpack Compose中设计一条带有曲线的冒险路径?

x8diyxa7  于 2023-03-16  发布在  Android
关注(0)|答案(1)|浏览(125)

我想在Jetpack ComposeAndroid中为教育级别设计一条冒险路径,其中每个级别都通过曲线连接到下一个和上一个级别。
每个级别都是一个圆形视图,例如可以单击的图像。

cnjp1d6j

cnjp1d6j1#

您可以使用Canvas绘制圆和直线。
比如:

Canvas(modifier = Modifier.fillMaxSize(), onDraw = {

        //draw a circle
        drawCircle(color = Red,
            center = Offset(120f,120f),  
            radius = 100f)     

        //draw a simple line.In your case you can use a Bezier curves          
        val strokePath = Path().apply {   
            moveTo (220f, 120f)
            lineTo (size.width - 220f, 400f)
        }
        drawPath(
            path = strokePath,
            color = Blue,
            style = Stroke(
                width = 3.dp.toPx(),
                cap = StrokeCap.Round
            )
        )

        //draw the 2nd circle
        drawCircle(color = Color.Red,
            center = Offset(size.width - 120f,400f),
            radius = 100f)
    })

要启用可单击区域,可以为每个圆定义一个Rect列表,然后将pointerInput修改器应用于Canvas
比如:

val circles = ArrayList<Rect>()

Canvas(modifier = Modifier
    .fillMaxSize()
    .pointerInput(Unit) {
        detectTapGestures(
            onTap = { tapOffset ->

                circles.add(Rect(top = 70f, left = 70f, bottom = 170f, right = 170f))
                circles.add(
                    Rect(
                        top = 350f,
                        left = size.width - 170f,
                        bottom = 450f,
                        right = size.width - 70f
                    )
                )

                for (rect in circles) {
                    if (rect.contains(tapOffset)) {
                        //Handle the click here and do something
                        //....
                    }
                }
            }
        )
    },
    onDraw = { /* .... */ })

相关问题