Draw Points With Canvas In Jetpack Compose.
2 min readMay 3, 2024
In this article we will see how to draw points with Canvas in Jetpack Compose.
I have already written few articles on canvas.
- Draw Line With Canvas
- Draw Circle With Canvas
- Draw Rectangle With Canvas
- Draw an arc With Canvas
- Draw an oval with Canvas
To draw points, you need two things ,
Canvas
Composable functiondrawPoints()
function
@Composable
fun DrawPoints() {
Canvas(
modifier = Modifier
.padding(30.dp)
.fillMaxWidth()
.height(300.dp)
) {
val width = size.width
val height = size.height
drawPoints(
points = listOf(
Offset(width / 2, 0f),
Offset(width / 2, height / 2),
Offset(width / 2, height)
),
pointMode = PointMode.Points,
color = Color.Red,
strokeWidth = 50f,
cap = StrokeCap.Round
)
}
}
As you can see above , we called Canvas
Composable function and also provide width and height.
First it will take list of point’s positions in points parameter
. Also provided the color
and strokeWidth
.
Cap is the shape of the points , i,e, Rounded
.
There are three types of Point Mode -
PointMode.Points
- we provide the point mode to
PointMode.Points
, that’s why it draw as a points.
PointMode.Polygon
pointMode = PointMode.Polygon,
Draw the entire sequence of point as one line.
PointMode.Lines
pointMode = PointMode.Lines
- Draw each sequence of two points as a line segment.
- If the number of points is odd, then the last point is ignored.
That’s all for today’s my friends , Hope you enjoyed and learnt something new from this article.