{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

DrawModifierKt

public final class DrawModifierKt


Summary

Public methods

static final @NonNull CacheDrawModifierNode
static final @NonNull Modifier
drawBehind(
    @NonNull Modifier receiver,
    @ExtensionFunctionType @NonNull Function1<@NonNull DrawScopeUnit> onDraw
)

Draw into a Canvas behind the modified content.

static final @NonNull Modifier
drawWithCache(
    @NonNull Modifier receiver,
    @ExtensionFunctionType @NonNull Function1<@NonNull CacheDrawScope, @NonNull DrawResult> onBuildDrawCache
)

Draw into a DrawScope with content that is persisted across draw calls as long as the size of the drawing area is the same or any state objects that are read have not changed.

static final @NonNull Modifier
drawWithContent(
    @NonNull Modifier receiver,
    @ExtensionFunctionType @NonNull Function1<@NonNull ContentDrawScopeUnit> onDraw
)

Creates a DrawModifier that allows the developer to draw before or after the layout's contents.

Public methods

CacheDrawModifierNode

public static final @NonNull CacheDrawModifierNode CacheDrawModifierNode(
    @ExtensionFunctionType @NonNull Function1<@NonNull CacheDrawScope, @NonNull DrawResult> onBuildDrawCache
)

drawBehind

public static final @NonNull Modifier drawBehind(
    @NonNull Modifier receiver,
    @ExtensionFunctionType @NonNull Function1<@NonNull DrawScopeUnit> onDraw
)

Draw into a Canvas behind the modified content.

drawWithCache

public static final @NonNull Modifier drawWithCache(
    @NonNull Modifier receiver,
    @ExtensionFunctionType @NonNull Function1<@NonNull CacheDrawScope, @NonNull DrawResult> onBuildDrawCache
)

Draw into a DrawScope with content that is persisted across draw calls as long as the size of the drawing area is the same or any state objects that are read have not changed. In the event that the drawing area changes, or the underlying state values that are being read change, this method is invoked again to recreate objects to be used during drawing

For example, a androidx.compose.ui.graphics.LinearGradient that is to occupy the full bounds of the drawing area can be created once the size has been defined and referenced for subsequent draw calls without having to re-allocate.

import androidx.compose.foundation.layout.Box
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color

Box(
    Modifier.drawWithCache {
        val gradient = Brush.linearGradient(
            colors = listOf(Color.Red, Color.Blue),
            start = Offset.Zero,
            end = Offset(size.width, size.height)
        )
        onDrawBehind {
            drawRect(gradient)
        }
    }
)
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color

val colors1 = listOf(Color.Red, Color.Blue)
val colors2 = listOf(Color.Yellow, Color.Green)
var toggle by remember { mutableStateOf(true) }
Box(
    Modifier.clickable { toggle = !toggle }.drawWithCache {
        val gradient = Brush.linearGradient(
            colors = if (toggle) colors1 else colors2,
            start = Offset.Zero,
            end = Offset(size.width, size.height)
        )
        onDrawBehind {
            drawRect(gradient)
        }
    }
)
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.Path
import androidx.compose.ui.graphics.vector.PathData
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.unit.dp

val vectorPainter = rememberVectorPainter(24.dp, 24.dp, autoMirror = true) {
        viewportWidth, viewportHeight ->
    Path(
        pathData = PathData {
            lineTo(viewportWidth, 0f)
            lineTo(0f, viewportHeight)
            close()
        },
        fill = SolidColor(Color.Black)
    )
}
Image(
    painter = vectorPainter,
    contentDescription = null,
    modifier = Modifier.requiredSize(120.dp).drawWithCache {
        val gradient = Brush.linearGradient(
            colors = listOf(Color.Red, Color.Blue),
            start = Offset.Zero,
            end = Offset(0f, size.height)
        )
        onDrawWithContent {
            drawContent()
            drawRect(gradient, blendMode = BlendMode.Plus)
        }
    }
)

drawWithContent

public static final @NonNull Modifier drawWithContent(
    @NonNull Modifier receiver,
    @ExtensionFunctionType @NonNull Function1<@NonNull ContentDrawScopeUnit> onDraw
)

Creates a DrawModifier that allows the developer to draw before or after the layout's contents. It also allows the modifier to adjust the layout's canvas.