meshGradient

Functions summary

Modifier
Modifier.meshGradient(
    rows: @IntRange(from = 1) Int,
    columns: @IntRange(from = 1) Int,
    hasBicubicColor: Boolean,
    block: MeshGradientScope.() -> Unit
)

A MeshGradient is a 2D grid of patches defined by vertices.
Cmn

Functions

Modifier.meshGradient

Cmn 
fun Modifier.meshGradient(
    rows: @IntRange(from = 1) Int,
    columns: @IntRange(from = 1) Int,
    hasBicubicColor: Boolean = false,
    block: MeshGradientScope.() -> Unit
): Modifier

A MeshGradient is a 2D grid of patches defined by vertices. Each vertex has a position, color, and four optional Bezier control points (tangents) that define the curvature of the edges connecting neighboring vertices.

Grid Dimensions: For a given rows and columns (representing the number of patches), there are a total of (rows + 1) * (columns + 1) vertices. For example, a 1x1 mesh consists of 4 vertices forming a single rectangular patch.

Coordinate System: All positions and Bezier offsets use a normalized coordinate system where (0,0) is the top-left and (1,1) is the bottom-right of the modifier's drawing bounds.

Bezier Tangents: Bezier control points are provided as an Offset relative to the vertex position. The default value of a Bezier control point is Offset.Unspecified. If a control point is Offset.Unspecified, the renderer automatically infers a tangent based on the neighboring vertices to ensure C1 continuity (smooth transitions) across patches.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.meshGradient
import androidx.compose.ui.unit.dp

val rows = 1
val columns = 1
Box(
    Modifier.size(300.dp).meshGradient(rows, columns) {
        // (row, column, position, color)
        setVertex(
            0,
            0,
            Offset(0f, 0f),
            Color.Red,
            rightControlPoint = Offset(0.5f, 0.5f),
        ) // Top-Left
        setVertex(0, 1, Offset(1f, 0f), Color.Blue) // Top-Right
        setVertex(1, 0, Offset(0f, 1f), Color.Green) // Bottom-Left
        setVertex(1, 1, Offset(1f, 1f), Color.Yellow) // Bottom-Right
    }
)
Parameters
rows: @IntRange(from = 1) Int

The number of patches along the vertical axis. Must be at least 1.
columns: @IntRange(from = 1) Int

The number of patches along the horizontal axis. Must be at least 1.
hasBicubicColor: Boolean = false

When true, uses Catmull-Rom interpolation for colors, resulting in smoother transitions compared to bilinear interpolation.
block: MeshGradientScope.() -> Unit

Lambda invoked to configure the mesh. Use the provided MeshGradientScope to set the properties of each vertex.