tad
10/13/2023, 7:35 PMdrawIntoCanvas { it.nativeCanvas.drawRenderNode(...) }
wasn't drawing anything. Turns out you need to call RenderNode.setPosition()
before drawing! So a nice cached render modifier for API >= 29 is:
fun Modifier.drawCached(): Modifier = drawWithCache {
val width = size.width.roundToInt()
val height = size.height.roundToInt()
val renderNode = RenderNode("drawCached")
renderNode.setPosition(0, 0, width, height)
onDrawWithContent {
val recordingCanvas = renderNode.beginRecording(width, height)
draw(this, layoutDirection, Canvas(recordingCanvas), size) {
this@onDrawWithContent.drawContent()
}
renderNode.endRecording()
drawIntoCanvas { it.nativeCanvas.drawRenderNode(renderNode) }
}
}
This works well for expensive composables in lazy layouts like HorizontalPager, e.g. when layering several layouts in the child pages.romainguy
10/13/2023, 7:47 PMgraphicsLayer{}
?tad
10/13/2023, 7:48 PMromainguy
10/13/2023, 7:48 PMNader Jawad
10/13/2023, 7:53 PMtad
10/13/2023, 7:55 PMgraphicsLayer
in the wrong place. The context is a parallax animation inside HorizontalPager, so I wanted to render a Composable to a RenderNode to avoid re-drawing when translating it; however, I am using a custom Alignment
implementation for the parallax offset instead of using graphicsLayer { translationX = ... }
. I will rework this and report back.romainguy
10/13/2023, 7:57 PMgraphicsLayer { translationX = ... }
is pretty much freeRenderNode
Nader Jawad
10/13/2023, 7:57 PMromainguy
10/13/2023, 7:57 PMtad
10/13/2023, 8:30 PMModifier.layout
with placeRelativeWithLayer
works pretty well.