androidandroid-jetpack-composeandroid-jetpack-compose-canvas

Jetpack Compose: How to draw a path like this


I wanted to show two points in this way:

image!

Is there some reference that I can look up?


Solution

  • Just use a Canvas and draw 2 circles and 1 line.

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

    enter image description here