Jonny
02/10/2023, 5:06 PMhttps://i.imgur.com/pvzMByH.png▾
romainguy
02/10/2023, 5:18 PMJonny
02/10/2023, 5:18 PMhttps://i.imgur.com/vNrkkkX.png▾
romainguy
02/10/2023, 5:26 PMnativeCanvas
and an android.graphics.Paint
to achieve thisCornerPathEffect
on the Paint
as a PathEffect
DashPathEffect
using https://developer.android.com/reference/android/graphics/ComposePathEffectComposePathEffect
containing a DashPathEffect
+ CornerPathEffect
Path
that’s your arc with the dashesCornerPathEffect
Jonny
02/10/2023, 5:30 PMromainguy
02/10/2023, 5:31 PMJonny
02/10/2023, 5:32 PMromainguy
02/10/2023, 5:33 PMgetFillPath
approach I mentionedKirill Grouchnikov
02/10/2023, 5:34 PMJonny
02/10/2023, 5:34 PMKirill Grouchnikov
02/10/2023, 5:34 PMJonny
02/10/2023, 5:34 PMandroidx.compose.foundation.Canvas(
modifier = modifier
.then(Modifier.size(500.dp))
.drawWithCache {
val paths = mutableListOf<Path>()
val outerRadius = min(size.width, size.height) / 2
val currentThickness = thickness(outerRadius)
val currentCornerRadius = cornerRadius(outerRadius)
val sweepAng = (2 * PI / indicatorCount - gapAng).toFloat()
for (idx in 0 until indicatorCount) {
val ang =
(idx / indicatorCount.toFloat() * 2 * PI - PI / 2 - gapAng / 2 + 2 * PI / indicatorCount).toFloat()
val path = Path()
path.arcToRad(
Rect(
-outerRadius + currentThickness,
-outerRadius + currentThickness,
outerRadius - currentThickness,
outerRadius - currentThickness
).translate(outerRadius, outerRadius),
ang,
-sweepAng,
false
)
path.arcToRad(
Rect(-outerRadius, -outerRadius, outerRadius, outerRadius)
.translate(outerRadius, outerRadius),
ang - sweepAng,
sweepAng,
false
)
path.close()
paths.add(path)
}
onDrawWithContent {
drawIntoCanvas { canvas ->
paths.forEach { path ->
canvas.drawOutline(
outline = Outline.Generic(path),
paint = Paint().apply {
color = colors.backgroundColor
pathEffect =
PathEffect.cornerPathEffect(currentCornerRadius)
}
)
}
}
}
}
) {
}
https://i.imgur.com/TVEibyh.png▾
romainguy
02/10/2023, 5:46 PMJonny
02/10/2023, 5:46 PMromainguy
02/10/2023, 5:46 PMJonny
02/10/2023, 5:47 PMromainguy
02/10/2023, 5:48 PMJonny
02/10/2023, 5:48 PMromainguy
02/10/2023, 5:49 PMJonny
02/10/2023, 5:54 PMromainguy
02/10/2023, 5:54 PMJonny
02/10/2023, 5:55 PMromainguy
02/10/2023, 5:55 PMPaint.getFillPath
to get your dashed oval as a path meant to be filledKirill Grouchnikov
02/10/2023, 5:59 PMJonny
02/10/2023, 6:03 PMKirill Grouchnikov
02/10/2023, 6:05 PMromainguy
02/10/2023, 6:06 PMPath
you can just use a canvas rotation to draw it all around your circleKirill Grouchnikov
02/10/2023, 6:06 PMromainguy
02/10/2023, 6:06 PMPathDashPathEffect
to stamp it along the arc!Jonny
02/10/2023, 6:06 PMromainguy
02/10/2023, 6:07 PMstampedPathEffect
in Compose)stampedPathEffect
with a simple rounded rect, using the morph
stamp effectKirill Grouchnikov
02/10/2023, 6:20 PMJonny
02/10/2023, 6:23 PMdrawPath(
path = path,
brush = SolidColor(colors.backgroundColor),
style = Stroke(
currentThickness,
pathEffect = PathEffect.chainPathEffect(
PathEffect.dashPathEffect(floatArrayOf(50f, 20f)),
PathEffect.cornerPathEffect(20f)
)
)
)
romainguy
02/10/2023, 6:26 PMJonny
02/10/2023, 8:22 PMKirill Grouchnikov
02/10/2023, 8:40 PMJonny
02/10/2023, 8:42 PMKirill Grouchnikov
02/10/2023, 8:43 PMJonny
02/10/2023, 8:45 PMKirill Grouchnikov
02/10/2023, 8:45 PMJonny
02/10/2023, 8:45 PMromainguy
02/10/2023, 9:29 PMJonny
02/10/2023, 9:48 PMromainguy
02/10/2023, 9:50 PMJonny
02/10/2023, 9:52 PMromainguy
02/10/2023, 10:00 PMJonny
02/10/2023, 10:14 PMhttps://i.imgur.com/tcF9YhB.png▾
Kirill Grouchnikov
02/10/2023, 11:27 PMJonny
02/10/2023, 11:42 PMKirill Grouchnikov
02/10/2023, 11:54 PMJonny
02/11/2023, 12:41 AMKirill Grouchnikov
02/11/2023, 12:43 AMJonny
02/11/2023, 12:46 AMKirill Grouchnikov
02/11/2023, 12:51 AMJonny
02/11/2023, 12:52 AMKirill Grouchnikov
02/11/2023, 12:53 AMJonny
02/11/2023, 12:54 AMKirill Grouchnikov
02/11/2023, 12:54 AMJonny
02/11/2023, 12:55 AMKirill Grouchnikov
02/11/2023, 12:58 AMJonny
02/11/2023, 12:59 AMephemient
02/11/2023, 4:47 AMJonny
02/11/2023, 9:13 PMephemient
02/12/2023, 12:30 AM