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.