Zoltan Demant
09/20/2021, 2:24 PMBox
that renders an arc with Canvas
and a centered `Text`; why is the Box
sizing wrong if contentAlignment is set to center? 🧵Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f),
contentAlignment = Center,
content = {
Canvas(
modifier = Modifier.matchParentSize(),
onDraw = {
val progressCircleWidth = ProgressCircleWidth.toPx()
val backgroundCircleWidth = TrackCircleWidth.toPx()
val radius = size.width / 2
drawCircularIndicator(
startAngle = StartAngle,
sweep = 360f,
color = trackCircleColor,
strokeWidth = backgroundCircleWidth,
radius = radius
)
drawCircularIndicator(
startAngle = StartAngle,
sweep = animatedProgress * EndAngle,
color = progressCircleColor,
strokeWidth = progressCircleWidth,
radius = radius
)
}
)
center() //Text
}
)
private fun DrawScope.drawCircularIndicator(
startAngle: Float,
sweep: Float,
color: Color,
strokeWidth: Float,
radius: Float
) {
drawArc(
color = color,
startAngle = startAngle,
sweepAngle = sweep,
useCenter = false,
topLeft = size.center - Offset(
x = radius,
y = radius
),
size = Size(
size.width,
size.height,
),
style = Stroke(
width = strokeWidth,
cap = Round
)
)
}
Zach Klippenstein (he/him) [MOD]
09/20/2021, 4:33 PMcenter()
?steelahhh
09/20/2021, 4:34 PMZoltan Demant
09/20/2021, 4:50 PMZach Klippenstein (he/him) [MOD]
09/20/2021, 5:33 PMZoltan Demant
09/20/2021, 5:36 PMZach Klippenstein (he/him) [MOD]
09/20/2021, 5:46 PMZoltan Demant
09/21/2021, 4:05 AM