Custom Drawing in Compose - Londroid December 2022

Presented at Londroid 2022, custom drawing in Compose covers examples of how to draw custom designs in your Jetpack Compose Apps.

Covering things like:
Modifier.drawBehind
Modifier.drawWithContent
Modifier.drawWithCache
AGSL shaders, Paths and Animations.

Transcript

1. Custom Drawing in Compose Rebecca Franks (she/her) Developer Relations Engineer @riggaroo
2. goo.gle/compose-jetlagged-talk
4. goo.gle/compose-jetlagged
5. • Offset + Size of each rect is based on duration of sleep period • Rounded Rectangles joined together with lines in between periods • Gradient across the expanded bars Custom Drawing Sleep Score Emoji Sleep Periods with different durations
6. Drawing in Compose Canvas( onDraw = { drawRoundRect(Color.Blue) } ) Canvas Composable Modifiers Modifier.drawBehind { } Modifier.drawWithContent { } Modifier.drawWithCache { }
7. Canvas( onDraw = { drawRoundRect(Color.Blue) } ) Canvas Composable
8. @Composable fun Canvas(modifier: Modifier, onDraw: DrawScope.() -> Unit) = Spacer(modifier.drawBehind(onDraw)) Canvas implementation Just a spacer 🕵
9. Drawing in Compose 🎨 Draws behind the Composables content. Can specify the order of draw calls. Modifier.drawBehind Modifier.drawWithContent Objects that are used during drawing are cached, until size changes or state variables read inside change. Modifier.drawWithCache
10. • Top left has the coordinate of [0,0] • Bottom right has the coordinate of [width, height]. • Draw calls are performed with pixel measurements (not dp). • Relative to the parent Composable Co-ordinate System [width,height] [0,0] X axis Y axis x y [0,height] [width,0]
11. @Composable fun SleepBar( sleepData: SleepDayData, modifier: Modifier = Modifier ) { Spacer( modifier = modifier .drawWithCache { onDrawBehind { // this: DrawScope } } .fillMaxWidth() .height(48.dp) ) }
12. DrawScope Declarative, stateless drawing API to draw shapes, paths etc without needing to maintain your own state.
13. interface DrawScope { val center: Offset val size: Size fun drawLine() fun drawRect() fun drawImage() fun drawRoundRect() fun drawPath() // etc }
14. @Composable fun SleepBar( sleepData: SleepDayData, modifier: Modifier = Modifier ) { Spacer( modifier = modifier .drawWithCache { onDrawBehind { // this: DrawScope } } .fillMaxWidth() .height(24.dp) ) }
15. @Composable fun SleepBar( sleepData: SleepDayData, modifier: Modifier = Modifier ) { Spacer( modifier = modifier .drawWithCache { onDrawBehind { } } .fillMaxWidth() .height(24.dp) ) }
16. @Composable fun SleepBar( sleepData: SleepDayData, modifier: Modifier = Modifier ) { Spacer( modifier = modifier .drawWithCache { val brush = Brush.verticalGradient(listOf(YellowVariant, Yellow /*etc*/)) onDrawBehind { drawRoundRect(brush, cornerRadius = CornerRadius(10.dp.toPx())) } } .fillMaxWidth() .height(24.dp) ) }
17. fun drawRoundRect( brush: Brush, topLeft: Offset = Offset.Zero, size: Size = this.size.offsetSize(topLeft), cornerRadius: CornerRadius = CornerRadius.Zero, alpha: Float = 1.0f, style: DrawStyle = Fill, colorFilter: ColorFilter? = null, blendMode: BlendMode = DefaultBlendMode ) Default values
20. Draw Text ✍ From Com pose 1.3+
21. @Composable fun SleepBar( sleepData: SleepDayData, modifier: Modifier = Modifier ) { Spacer( modifier = modifier .drawWithCache { val brush = Brush.verticalGradient(listOf(YellowVariant, Yellow /*etc*/)) onDrawBehind { drawRoundRect(brush, cornerRadius = CornerRadius(10.dp.toPx())) } } .fillMaxWidth() .height(24.dp) ) }
22. @Composable fun SleepBar( sleepData: SleepDayData, modifier: Modifier = Modifier ) { Spacer( modifier = modifier .drawWithCache { val brush = Brush.verticalGradient(listOf(YellowVariant, Yellow /*etc*/)) onDrawBehind { drawRoundRect(brush, cornerRadius = CornerRadius(10.dp.toPx())) } } .fillMaxWidth() .height(24.dp) ) }
23. @Composable fun SleepBar( sleepData: SleepDayData, modifier: Modifier = Modifier ) { val textMeasurer = rememberTextMeasurer() Spacer( modifier = modifier .drawWithCache { val brush = Brush.verticalGradient(listOf(YellowVariant, Yellow /*etc*/)) onDrawBehind { drawRoundRect(brush, cornerRadius = CornerRadius(10.dp.toPx())) } } .fillMaxWidth() .height(24.dp) ) }
24. @Composable fun SleepBar( sleepData: SleepDayData, modifier: Modifier = Modifier ) { val textMeasurer = rememberTextMeasurer() Spacer( modifier = modifier .drawWithCache { val brush = Brush.verticalGradient(listOf(YellowVariant, Yellow /*etc*/)) val textResult = textMeasurer.measure(AnnotatedString("😴")) onDrawBehind { drawRoundRect(brush, cornerRadius = CornerRadius(10.dp.toPx())) } } .fillMaxWidth() .height(24.dp) ) }
25. @Composable fun SleepBar( sleepData: SleepDayData, modifier: Modifier = Modifier ) { val textMeasurer = rememberTextMeasurer() Spacer( modifier = modifier .drawWithCache { val brush = Brush.verticalGradient(listOf(YellowVariant, Yellow /*etc*/)) val textResult = textMeasurer.measure(AnnotatedString("😴")) onDrawBehind { drawRoundRect(brush, cornerRadius = CornerRadius(10.dp.toPx())) drawText(textResult) } } .fillMaxWidth() .height(24.dp) ) }
29. Animate height on click ✨
30. @Composable fun SleepBar( sleepData: SleepDayData, modifier: Modifier = Modifier ) { val textMeasurer = rememberTextMeasurer() Spacer( modifier = modifier .drawWithCache { // Our drawing code } .fillMaxWidth() .height(24.dp) ) }
31. Spacer( modifier = modifier .drawWithCache { // Our drawing code } .fillMaxWidth() .height(24.dp) ) }
32. var isExpanded by remember { mutableStateOf(false) } Spacer( modifier = modifier .drawWithCache { // Our drawing code } .fillMaxWidth() .height(24.dp) ) }
33. var isExpanded by remember { mutableStateOf(false) } Spacer( modifier = modifier .drawWithCache { // Our drawing code } .fillMaxWidth() .height(24.dp) ) }
34. var isExpanded by remember { mutableStateOf(false) } Spacer( modifier = modifier .drawWithCache { // Our drawing code } .fillMaxWidth() .height(24.dp) .clickable { isExpanded = !isExpanded } ) }
35. var isExpanded by remember { mutableStateOf(false) } Spacer( modifier = modifier .drawWithCache { // Our drawing code } .fillMaxWidth() .height(24.dp) .clickable { isExpanded = !isExpanded } ) }
36. var isExpanded by remember { mutableStateOf(false) } val transition = updateTransition(targetState = isExpanded) val height by transition.animateDp { targetExpanded -> if (targetExpanded) 110.dp else 24.dp } Spacer( modifier = modifier .drawWithCache { // Our drawing code } .fillMaxWidth() .height(24.dp) .clickable { isExpanded = !isExpanded } ) }
37. var isExpanded by remember { mutableStateOf(false) } val transition = updateTransition(targetState = isExpanded) val height by transition.animateDp { targetExpanded -> if (targetExpanded) 110.dp else 24.dp } Spacer( modifier = modifier .drawWithCache { // Our drawing code } .fillMaxWidth() .height(height) .clickable { isExpanded = !isExpanded } ) }
39. Text Offset Animation
40. var isExpanded by remember { mutableStateOf(false) } val transition = updateTransition(targetState = expanded) val height by transition.animateDp { targetExpanded -> if (targetExpanded) 110.dp else 24.dp } Spacer( modifier = Modifier .drawWithCache { val brush = Brush.verticalGradient(listOf(YellowVariant, Yellow /*etc*/)) val textResult = textMeasurer.measure(AnnotatedString("😴")) onDrawBehind { drawRoundRect(brush, cornerRadius = CornerRadius(10.dp.toPx())) drawText(textResult) } } .fillMaxWidth() .height(height) .clickable {
41. val transition = updateTransition(targetState = expanded) val height by transition.animateDp { targetExpanded -> if (targetExpanded) 110.dp else 24.dp } Spacer( modifier = Modifier .drawWithCache { val brush = Brush.verticalGradient(listOf(YellowVariant, Yellow /*etc*/)) val textResult = textMeasurer.measure(AnnotatedString("😴")) onDrawBehind { drawRoundRect(brush, cornerRadius = CornerRadius(10.dp.toPx())) drawText(textResult) } } .fillMaxWidth() .height(height) .clickable { expanded = !expanded
42. val transition = updateTransition(targetState = expanded) val height by transition.animateDp { targetExpanded -> if (targetExpanded) 110.dp else 24.dp } val textOffset by transition.animateFloat { targetExpanded -> if (targetExpanded) 1f else 0f } Spacer( modifier = Modifier .drawWithCache { val brush = Brush.verticalGradient(listOf(YellowVariant, Yellow /*etc*/)) val textResult = textMeasurer.measure(AnnotatedString("😴")) onDrawBehind { drawRoundRect(brush, cornerRadius = CornerRadius(10.dp.toPx())) drawText(textResult) } } .fillMaxWidth() .height(height) .clickable {
43. val transition = updateTransition(targetState = expanded) val height by transition.animateDp { targetExpanded -> if (targetExpanded) 110.dp else 24.dp } val textOffset by transition.animateFloat { targetExpanded -> if (targetExpanded) 1f else 0f } Spacer( modifier = Modifier .drawWithCache { val brush = Brush.verticalGradient(listOf(YellowVariant, Yellow /*etc*/)) val textResult = textMeasurer.measure(AnnotatedString("😴")) onDrawBehind { drawRoundRect(brush, cornerRadius = CornerRadius(10.dp.toPx())) drawText(textResult) } } .fillMaxWidth()
44. val transition = updateTransition(targetState = expanded) val height by transition.animateDp { targetExpanded -> if (targetExpanded) 110.dp else 24.dp } val textOffset by transition.animateFloat { targetExpanded -> if (targetExpanded) 1f else 0f } Spacer( modifier = Modifier .drawWithCache { val brush = Brush.verticalGradient(listOf(YellowVariant, Yellow /*etc*/)) val textResult = textMeasurer.measure(AnnotatedString("😴")) onDrawBehind { drawRoundRect(brush, cornerRadius = CornerRadius(10.dp.toPx())) translate(left = -textOffset * textResult.size.width) { drawText(textResult) } } } .fillMaxWidth()
45. Draw Paths ➰
47. val path = Path() var previousPeriod: SleepPeriod? = null sleepData.sleepPeriods.forEach { period -> previousPeriod = period } return path
48. if (previousPeriod != null) { path.lineTo(x = /..., y = /...) // STEP 1 } val path = Path() var previousPeriod: SleepPeriod? = null sleepData.sleepPeriods.forEach { period -> previousPeriod = period } return path
49. path.addRect(rect = /...) // STEP 2 val path = Path() var previousPeriod: SleepPeriod? = null sleepData.sleepPeriods.forEach { period -> if (previousPeriod != null) { path.lineTo(x = /..., y = /...) // STEP 1 } previousPeriod = period } return path
50. val path = Path() var previousPeriod: SleepPeriod? = null sleepData.sleepPeriods.forEach { period -> if (previousPeriod != null) { path.lineTo(x = /..., y = /...) // STEP 1 } path.addRect(rect = /...) // STEP 2 path.moveTo(x = /..., y = /…) // STEP 3 previousPeriod = period } return path gradi
51. val path = Path() var previousPeriod: SleepPeriod? = null sleepData.sleepPeriods.forEach { period -> if (previousPeriod != null) { path.lineTo(x = /..., y = /...) // STEP 1 } path.addRect(rect = /...) // STEP 2 path.moveTo(x = /..., y = /…) // STEP 3 previousPeriod = period } return path gradi
52. val path = generateSleepPath(/*pass data*/) onDrawBehind { drawPath(path, brush = gradientBrush) }
53. val path = generateSleepPath(/*pass data*/) onDrawBehind { drawPath(path, brush = gradientBrush) }
54. val path = generateSleepPath(/*pass data*/) onDrawBehind { // default arg: style = Fill drawPath(path, brush = gradientBrush) }
55. val path = generateSleepPath(/*pass data*/) onDrawBehind { // default arg: style = Fill drawPath(path, brush = gradientBrush) // call draw again with Stroke style drawPath(path, brush = gradientBrush style = Stroke(/**/), ) }
56. val path = generateSleepPath(/*pass data*/) onDrawBehind { // default arg: style = Fill drawPath(path, brush = gradientBrush) // call draw again with Stroke style drawPath(path, brush = gradientBrush style = Stroke(lineThicknessPx, cap = StrokeCap.Round, join = StrokeJoin.Round, pathEffect = PathEffect.cornerPathEffect( cornerRadiusPx * expandedProgress) ) ) }
57. val path = generateSleepPath(/*pass data*/) onDrawBehind { // default arg: style = Fill drawPath(path, brush = gradientBrush) // call draw again with Stroke style drawPath(path, brush = gradientBrush style = Stroke(/**/), ) }
60. Custom ShaderBrush with AGSL Using AGSL and want to use it with DrawScope in Compose… From Android T+ • Based on GLSL (OpenGL) • Android T+ • Runs on GPU so very efficient (parallel pixel calculations)
61. Taken from an online shader tool
62. @Composable private fun JetLaggedScreen() { Column() { JetLaggedHeader() JetLaggedSleepSummary() } JetLaggedHeaderTabs() TimeGraph() }
63. @Language("AGSL") val SHADER = """ uniform float2 resolution; uniform float time; layout(color) uniform half4 color; float4 main(in float2 fragCoord) { // do some math to calculate colour per pixel return float4(color, 1.0); } """.trimIndent() For each pixel in the area, main() is called with the coordinate of where its calling from
64. @Composable private fun JetLaggedScreen() { Column(modifier = Modifier .drawWithCache { }) { JetLaggedHeader() JetLaggedSleepSummary() } }
65. @Composable private fun JetLaggedScreen() { Column(modifier = Modifier .drawWithCache { val shader = RuntimeShader(WAVE_BAR_SHADER_AGSL) }) { JetLaggedHeader() JetLaggedSleepSummary() } }
66. @Composable private fun JetLaggedScreen() { Column(modifier = Modifier .drawWithCache { val shader = RuntimeShader(WAVE_BAR_SHADER_AGSL) val shaderBrush = ShaderBrush(shader) }) { JetLaggedHeader() JetLaggedSleepSummary() } }
67. @Composable private fun JetLaggedScreen() { Column(modifier = Modifier .drawWithCache { val shader = RuntimeShader(WAVE_BAR_SHADER_AGSL) val shaderBrush = ShaderBrush(shader) shader.setFloatUniform("iResolution", size.width, size.height) }) { JetLaggedHeader() JetLaggedSleepSummary() } }
68. @Composable private fun JetLaggedScreen() { Column(modifier = Modifier .drawWithCache { val shader = RuntimeShader(WAVE_BAR_SHADER_AGSL) val shaderBrush = ShaderBrush(shader) shader.setFloatUniform("iResolution", size.width, size.height) onDrawBehind { drawRect(shaderBrush) } }) { JetLaggedHeader() JetLaggedSleepSummary() } }
70. @Composable private fun JetLaggedScreen() { Column(modifier = Modifier .drawWithCache { val shader = RuntimeShader(WAVE_BAR_SHADER_AGSL) val shaderBrush = ShaderBrush(shader) shader.setFloatUniform("resolution", size.width, size.height) onDrawBehind { drawRect(shaderBrush) } }) { JetLaggedHeader() JetLaggedSleepSummary() } }
71. @Composable private fun JetLaggedScreen() { Column(modifier = Modifier .drawWithCache { val shader = RuntimeShader(WAVE_BAR_SHADER_AGSL) val shaderBrush = ShaderBrush(shader) shader.setFloatUniform("resolution", size.width, size.height) onDrawBehind { drawRect(shaderBrush) } }) { JetLaggedHeader() JetLaggedSleepSummary()
72. @Composable private fun JetLaggedScreen() { val time by produceState(0f) { while(true) { withInfiniteAnimationFrameMillis { value = it / 1000f } } } Column(modifier = Modifier .drawWithCache { val shader = RuntimeShader(WAVE_BAR_SHADER_AGSL) val shaderBrush = ShaderBrush(shader) shader.setFloatUniform("resolution", size.width, size.height) onDrawBehind { drawRect(shaderBrush) } }) { JetLaggedHeader() JetLaggedSleepSummary()
73. @Composable private fun JetLaggedScreen() { val time by produceState(0f) { while(true) { withInfiniteAnimationFrameMillis { value = it / 1000f } } } Column(modifier = Modifier .drawWithCache { val shader = RuntimeShader(WAVE_BAR_SHADER_AGSL) val shaderBrush = ShaderBrush(shader) shader.setFloatUniform("resolution", size.width, size.height) onDrawBehind { shader.setFloatUniform("time", time) drawRect(shaderBrush) } }) { JetLaggedHeader()
75. Accessing Canvas Sometimes you might want to have access to it…
76. @Composable private fun JetLaggedApp() { val paint = remember { Paint() } JetLaggedScreen() }
77. @Composable private fun JetLaggedApp() { val paint = remember { Paint() } JetLaggedScreen(modifier = Modifier .drawWithContent { drawContent() }) }
78. @Composable private fun JetLaggedApp() { val paint = remember { Paint() } JetLaggedScreen(modifier = Modifier .drawWithContent { val matrix = ColorMatrix().apply { setToSaturation(0f) } paint.colorFilter = colorMatrix(matrix) drawIntoCanvas { canvas -> canvas.saveLayer(size.toRect(), paint) this@drawWithContent.drawContent() canvas.restore() } }) }
79. 🧛
80. Modifier.drawWithContent Determine the drawing order yourself * Useful for BlendMode operations * Transformations to the content yourself (ie clipping to a complex path) * Or drawing on top of content
81. Column( modifier = Modifier .fillMaxSize() .pointerInput("dragging") { detectDragGestures { change, dragAmount -> pointerOffset += dragAmount } } .onSizeChanged { pointerOffset = Offset(it.width / 2f, it.height /2f) } .drawWithContent { drawContent() drawRect(Brush.radialGradient( listOf(Color.Transparent, Color.Black), center = pointerOffset, radius = 100.dp.toPx(), )) } ) { // content goes here }
82. Modifier.graphicsLayer{ } Modifier used to apply transformations to a Composable, such as: • scaleX, scaleY • rotationX, rotationY, rotationZ • alpha • translationX, translationY *Note: Will not change the layout size and placement of the composable
83. Image(painterResource(id = R.drawable.sun_icon), contentDescription = "", modifier = Modifier .size(320.dp) )
84. val infinite = rememberInfiniteTransition() val rotation by infinite.animateFloat( initialValue = 0f, targetValue = 360f, animationSpec = infiniteRepeatable( animation = tween(5000, easing = LinearEasing), ) ) Image(painterResource(id = R.drawable.sun_icon), contentDescription = "", modifier = Modifier .size(320.dp) )
85. val infinite = rememberInfiniteTransition() val rotation by infinite.animateFloat( initialValue = 0f, targetValue = 360f, animationSpec = infiniteRepeatable( animation = tween(5000, easing = LinearEasing), ) ) Image(painterResource(id = R.drawable.sun_icon), contentDescription = "", modifier = Modifier .size(320.dp) .graphicsLayer { rotationZ = rotation } )
87. graphicsLayer: RenderEffects Intermediate rendering step used to render drawing commands with a corresponding visual effect * BlurEffect - apply blur * RuntimeShader: Custom AGSL shader applied to whole composable
88. @Language("AGSL") val WOBBLE_SHADER = """ uniform float2 resolution; uniform float time; uniform shader contents; vec4 main(in vec2 fragCoord) { vec2 uv = fragCoord.xy / resolution.xy * 0.8 + 0.1; uv += sin(time * vec2(1.0, 2.0) + uv* 2.0) * 0.01; return contents.eval(uv * resolution.xy); } """.trimIndent()
89. val shader = RuntimeShader(WOBBLE_SHADER) Column(Modifier .onSizeChanged { size -> shader.setFloatUniform(“resolution", size.width.toFloat(), size.height.toFloat() ) } .graphicsLayer { renderEffect = android.graphics.RenderEffect .createRuntimeShaderEffect( shader, "contents" ) .asComposeRenderEffect() } ) { // your content here }
90. val shader = RuntimeShader(WOBBLE_SHADER) Column(Modifier .onSizeChanged { size -> shader.setFloatUniform(“resolution", size.width.toFloat(), size.height.toFloat() ) } .graphicsLayer { renderEffect = android.graphics.RenderEffect .createRuntimeShaderEffect( shader, "contents" ) .asComposeRenderEffect() } ) { // your content here }
91. graphicsLayer: CompositingStrategy New in Compose 1.4+ (alpha right now) Refers to how the layer will be composited (put together) with existing content on screen.
92. Offscreen Forces an offscreen buffer. Auto ModulateAlpha The default mode - no offscreen buffer. * Unless alpha or RenderEffects are set Each draw call has the alpha applied individually.
93. Image(painter = dogImagePainter, modifier = Modifier .drawWithCache { onDrawWithContent { drawContent() drawCircle( Color.Black, blendMode = BlendMode.Clear ) drawCircle( Color.Red ) } } )
94. Image(painter = dogImagePainter, modifier = Modifier .drawWithCache { onDrawWithContent { drawContent() drawCircle( Color.Black, blendMode = BlendMode.Clear ) drawCircle( Color.Red ) } } )
95. CompositingStrategy.Auto Image(painter = dogImagePainter, modifier = Modifier .graphicsLayer { compositingStrategy = Auto } .drawWithCache { onDrawWithContent { drawContent() drawCircle( Color.Black, blendMode = BlendMode.Clear ) drawCircle( Color.Red ) } } )
96. CompositingStrategy.Auto CompositingStrategy.Offscreen Image(painter = dogImagePainter, modifier = Modifier .graphicsLayer { compositingStrategy = Offscreen } .drawWithCache { onDrawWithContent { drawContent() drawCircle( Color.Black, blendMode = BlendMode.Clear ) drawCircle( Color.Red ) } } )
97. Having (even more) fun with Paths goo.gle/compose-gradient-along-path
98. private object HelloPath { val path = PathParser().parsePathString( "M13.63 248.31C13.63 248.31 51.84 206.67 84.21 169.31C140" + ".84 103.97 202.79 27.66 150.14 14.88C131.01 10.23 116.36 29.88 107.26 45.33C69.7 108.92 58.03 214.33 57.54 302.57C67.75 271.83 104.43 190.85 140.18 193.08C181.47 195.65 145.26 257.57 154.53 284.39C168.85 322.18 208.22 292.83 229.98 277.45C265.92 252.03 288.98 231.22 288.98 200.45C288.98 161.55 235.29 174.02 223.3 205.14C213.93 229.44 214.3 265.89 229.3 284.14C247.49 306.28 287.67 309.93 312.18 288.46C337 266.71 354.66 234.56 368.68 213.03C403.92 158.87 464.36 86.15 449.06 30.03C446.98 22.4 440.36 16.57 432.46 16.26C393.62 14.75 381.84 99.18 375.35 129.31C368.78 159.83 345.17 261.31 373.11 293.06C404.43 328.58 446.29 262.4 464.66 231.67C468.66 225.31 472.59 218.43 476.08 213.07C511.33 158.91 571.77 86.19 556.46 30.07C554.39 22.44 547.77 16.61 539.87 16.3C501.03 14.79 489.25 99.22 482.76 129.35C476.18 159.87 452.58 261.35 480.52 293.1C511.83 328.62 562.4 265.53 572.64 232.86C587.34 185.92 620.94 171.58 660.91 180.29C616 166.66 580.86 199.67 572.64 233.16C566.81 256.93 573.52 282.16 599.25 295.77C668.54 332.41 742.8 211.69 660.91 180.29C643.67 181.89 636.15 204.77 643.29 227.78C654.29 263.97 704.29 268.27 733.08 256" ) }
99. val painter = rememberVectorPainter( viewportHeight = bounds.height, viewportWidth = bounds.width, defaultWidth = bounds.width.dp, defaultHeight = bounds.height.dp, autoMirror = true ) { _, _ -> Path( HelloPath.path.toNodes(), stroke = Brush.linearGradient(colors) ) } Image(painter, contentDescription = "hello")
100. val path = remember { HelloPath.path.toPath() } val bounds = path.getBounds() val totalLength = remember { val pathMeasure = PathMeasure() pathMeasure.setPath(path, false) pathMeasure.length } val lines = remember { path.asAndroidPath().flatten(0.5f) }
101. val totalLength = remember { val pathMeasure = PathMeasure() pathMeasure.setPath(path, false) pathMeasure.length } val lines = remember { path.asAndroidPath().flatten(0.5f) } Box(modifier = Modifier.fillMaxSize()) { Canvas(modifier = Modifier .align(Alignment.Center), onDraw = { lines.forEach { line -> drawLine( brush = SolidColor(Color.Black), start = Offset(line.start.x, line.start.y), end = Offset(line.end.x, line.end.y)) } }) }
102. val totalLength = remember { val pathMeasure = PathMeasure() pathMeasure.setPath(path, false) pathMeasure.length } val lines = remember { path.asAndroidPath().flatten(30f) } Box(modifier = Modifier.fillMaxSize()) { Canvas(modifier = Modifier .align(Alignment.Center), onDraw = { lines.forEach { line -> drawLine( brush = SolidColor(Color.Black), start = Offset(line.start.x, line.start.y), end = Offset(line.end.x, line.end.y)) } }) }
103. val totalLength = remember { val pathMeasure = PathMeasure() pathMeasure.setPath(path, false) pathMeasure.length } val lines = remember { path.asAndroidPath().flatten(0.5f) } Box(modifier = Modifier.fillMaxSize()) { Canvas(modifier = Modifier .align(Alignment.Center), onDraw = { lines.forEach { line -> val startColor = interpolateColors(line.startFraction, colors) val endColor = interpolateColors(line.endFraction, colors) drawLine( brush = Brush.linearGradient(listOf(startColor, endColor)), start = Offset(line.start.x, line.start.y), end = Offset(line.end.x, line.end.y)) } }) }
104. private fun interpolateColors( progress: Float, colorsInput: List<Color>, ): Color { val scaledProgress = progress * (colorsInput.size - 1) val oldColor = colorsInput[scaledProgress.toInt()] val newColor = colorsInput[(scaledProgress + 1f).toInt()] val newScaledProgressValue = scaledProgress - floor(progress) return lerp( start = oldColor, stop = newColor, fraction = newScaledProgressValue) }
105. private fun interpolateColors( progress: Float, colorsInput: List<Color>, ): Color { val scaledProgress = progress * (colorsInput.size - 1) val oldColor = colorsInput[scaledProgress.toInt()] val newColor = colorsInput[(scaledProgress + 1f).toInt()] val newScaledProgressValue = scaledProgress - floor(progress) return lerp( start = oldColor, stop = newColor, fraction = newScaledProgressValue) } start stop fraction
107. val lines = remember { path.asAndroidPath().flatten(30f) } val progress = remember { Animatable(0f) } LaunchedEffect(Unit) { progress.animateTo( 1f, animationSpec = infiniteRepeatable(tween(3000)) ) } Box(modifier = Modifier.fillMaxSize()) { Canvas(modifier = Modifier .align(Alignment.Center), onDraw = { lines.forEach { line -> drawLine( //..) } }) }
108. val lines = remember { path.asAndroidPath().flatten(30f) } val progress = remember { Animatable(0f) } LaunchedEffect(Unit) { progress.animateTo( 1f, animationSpec = infiniteRepeatable(tween(3000)) ) } Box(modifier = Modifier.fillMaxSize()) { Canvas(modifier = Modifier .align(Alignment.Center), onDraw = { val currentLength = totalLength * progress.value lines.forEach { line -> if (line.startFraction * totalLength < currentLength) { drawLine( //..) } } })
109. goo.gle/compose-gradient-along-path
110. goo.gle/compose-graphics-docs goo.gle/compose-jetlagged goo.gle/compose-jellyfish goo.gle/compose-gradient-path
111. Thank you! Rebecca Franks (she/her) Developer Relations Engineer @riggaroo