Draw Line With Canvas In Jetpack Compose.
In this medium article we will learn how to draw line with canvas in Jetpack Compose.
So for drawing the Line through canvas , we have to create two point (A,B) , once these two point is created , your line is drawn.
1). Draw Line to the Vertically Center
@Composable
fun DrawLineVerticallyCenter(
modifier: Modifier = Modifier
) {
Canvas(
modifier = modifier
.fillMaxSize()
) {
val canvasWidth = size.width
val canvasHeight = size.height
drawLine(
start = Offset(x = 0.dp.toPx(), y = canvasHeight / 2),
end = Offset(x = canvasWidth, y = canvasHeight / 2),
color = Color.Blue,
strokeWidth = 5.dp.toPx() // instead of 5.dp.toPx() , you can also pass 5f
)
}
}
In the above code you can see , first we have to call Canvas composable function , also width and height is mandatory (for now given fillMaxSize()).
Inside this canvas we will draw our line , while drawing line we have to find the width and height of the canvas.
Canvas takes two parameters , modifier & extension function of DrawScope , which has lots of options to create custom layouts, drawLine is one of them.
drawLine takes three mandatory parameters , start , end , color . As you remember i said above , for drawing line , we have to create two points(A,B).
start -> A Point
end -> B Point
Suppose I want to draw a line to the vertically centre of the screen. The first point will be at the CentreStart and another point will be at the CentreEnd .
Let’s first come at the CentreStart position , start takes Offset(x,y) parameter in it.
If we pass X to positive value it will move to the right direction and if we pass Y to positive value it will move to the bottom direction. By default x and y at the (0,0) position.
So what we will do, we will keep the x value to 0 and y to canvasHeight/2 ( which will take the half height of the canvas).
x and y takes float value , you can pass 0f or 0.dp.toPx(), both will get the same result.
For the CentreEnd position , By default value is (0,0) , if we pass the x value to canvasWidth it will moved at the TopEnd , Now pass y to canvasHeight/2 , which will move to the CentreEnd position.
Now two points is created , our line will be drawn at that position.
strokeWidth — parameter will increase the width of the line.
2). Draw Diagonal Right Line
@Composable
fun DrawDiagonallyRight(
modifier: Modifier = Modifier
) {
Canvas(
modifier = modifier
.fillMaxSize()
) {
val canvasWidth = size.width
val canvasHeight = size.height
drawLine(
start = Offset(x = 0.dp.toPx(), y = 0f),
end = Offset(x = canvasWidth, y = canvasHeight),
color = Color.Blue,
strokeWidth = 5.dp.toPx()
)
}
}
3). Draw Centre to Centre Line
@Composable
fun DrawCenterToCenterLine(
modifier: Modifier = Modifier
) {
Canvas(
modifier = modifier
.fillMaxSize()
) {
val canvasWidth = size.width
val canvasHeight = size.height
drawLine(
start = Offset(x = canvasWidth / 2, y = 0f),
end = Offset(x = canvasWidth / 2, y = canvasHeight),
color = Color.Blue,
strokeWidth = 5.dp.toPx()
)
}
}
4). Draw Multiple Line
@Composable
fun DrawMultipleLines(
modifier: Modifier = Modifier
) {
Canvas(
modifier = modifier
.fillMaxSize()
) {
val canvasWidth = size.width
val canvasHeight = size.height
drawLine(
start = Offset(x = 0.dp.toPx(), y = canvasHeight / 2),
end = Offset(x = canvasWidth, y = canvasHeight / 2),
color = Color.Blue,
strokeWidth = 5.dp.toPx()
)
drawLine(
start = Offset(x = canvasWidth / 2, y = 0f),
end = Offset(x = canvasWidth / 2, y = canvasHeight),
color = Color.Blue,
strokeWidth = 5.dp.toPx()
)
}
}
5). Draw Hut With Line
@Composable
fun HutWithCanvasLine(
modifier: Modifier = Modifier
) {
Box(modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Canvas(
modifier = Modifier
.padding(horizontal = 20.dp)
.fillMaxWidth()
.height(260.dp)
) {
val width = size.width
val height = size.height
// hut top part
drawLine(
color = Color.Red,
start = Offset(x = width / 4, y = 0f),
end = Offset(0f, y = height / 3),
strokeWidth = 5f
)
drawLine(
color = Color.Red,
start = Offset(x = width / 4, y = 0f),
end = Offset(width / 2, y = height / 3),
strokeWidth = 5f
)
drawLine(
color = Color.Red,
start = Offset(x = 0f, y = height / 3),
end = Offset(width / 2, y = height / 3),
strokeWidth = 5f
)
// door outer part
drawLine(
color = Color.Blue,
strokeWidth = 5f,
start = Offset(x = 0f, y = height / 3),
end = Offset(x = 0f, y = height)
)
drawLine(
color = Color.Blue,
strokeWidth = 5f,
start = Offset(x = width / 2, y = height / 3),
end = Offset(x = width / 2, y = height)
)
drawLine(
color = Color.Blue,
strokeWidth = 5f,
start = Offset(x = 0f, y = height),
end = Offset(x = width / 2, y = height)
)
// Door
drawLine(
color = Color.Black,
strokeWidth = 5f,
start = Offset(x = (width / 2) / 3, y = height),
end = Offset(x = (width / 2) / 3, y = height / 2)
)
drawLine(
color = Color.Black,
strokeWidth = 5f,
start = Offset(x = (width / 2) / 1.5f, y = height),
end = Offset(x = (width / 2) / 1.5f, y = height / 2)
)
drawLine(
color = Color.Black,
strokeWidth = 5f,
start = Offset(x = (width / 2) / 3, y = height / 2),
end = Offset(x = (width / 2) / 1.5f, y = height / 2)
)
// hut right side part
drawLine(
color = Color.Magenta,
strokeWidth = 5f,
start = Offset(x = width / 4, y = 0f),
end = Offset(x = width, y = 0f)
)
drawLine(
color = Color.Magenta,
strokeWidth = 5f,
start = Offset(x = width / 2, y = height / 3),
end = Offset(x = width - 100, y = (height / 3))
)
drawLine(
color = Color.Magenta,
strokeWidth = 5f,
start = Offset(x = width, y = 0f),
end = Offset(x = width - 100, y = height / 3)
)
drawLine(
color = Color.Magenta,
strokeWidth = 5f,
start = Offset(x = width, y = 0f),
end = Offset(x = width, y = height)
)
drawLine(
color = Color.Magenta,
strokeWidth = 5f,
start = Offset(x = width - 100, y = height / 3),
end = Offset(x = width - 100, y = height)
)
drawLine(
color = Color.Magenta,
strokeWidth = 5f,
start = Offset(x = width / 2, y = height),
end = Offset(x = width, y = height)
)
}
}
}That’s all for today’s my friends , Hope you enjoyed and learnt something new from this article.
