android 喷气背包组合:如何绘制这样的路径

1l5u6lss  于 2022-11-27  发布在  Android
关注(0)|答案(1)|浏览(138)

我想以这种方式表明两点:

有什么参考资料我可以查一下吗?

gab6jxml

gab6jxml1#

只需使用Canvas并绘制2个圆和1条直线。

Canvas(Modifier.fillMaxSize()){

    val radius = 64f //radius of circles
    val strokeWidth = 20f 
    val lineHeight = 300f
    val centerFirstCircle = Offset(100f, 100f)

    drawCircle(
        color = Color.Red,
        radius = radius,
        center = centerFirstCircle,
        style = Stroke(width = strokeWidth)
    )

    //calculate the start and end of the vertical line
    val xLine = centerFirstCircle.x
    val yLine = centerFirstCircle.y + radius + strokeWidth/2

    drawLine(
        color = Red,
        start = Offset(xLine, yLine),
        end = Offset(xLine , yLine + lineHeight),
        strokeWidth = strokeWidth
    )

    //calculate the center of the second circle
    val centerSecondCircle = Offset( centerFirstCircle.x,
        centerFirstCircle.y + (radius*2) + lineHeight + (strokeWidth/2 *2) )

    drawCircle(
        color = Color.Red,
        radius = radius,
        center = centerSecondCircle,
        style = Stroke(width = strokeWidth)
    )
}

相关问题