Skip to content

Instantly share code, notes, and snippets.

@riggaroo
Last active January 21, 2024 21:29
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save riggaroo/e067206e7f7450c17616a2bda64e858e to your computer and use it in GitHub Desktop.
Save riggaroo/e067206e7f7450c17616a2bda64e858e to your computer and use it in GitHub Desktop.
GraphicsLayer CompositingStrategy Example demonstrating offscreen compositing strategy in Jetpack Compose, leveraging BlendMode.Clear to mask some of the image away.
/* Copyright 2022 Google LLC.
SPDX-License-Identifier: Apache-2.0 */
@Composable
fun GraphicsLayerCompositingStrategyExample() {
Image(painter = painterResource(id = R.drawable.dog),
contentDescription = "Dog",
contentScale = ContentScale.Crop,
modifier = Modifier
.size(120.dp)
.aspectRatio(1f)
.background(
Brush.linearGradient(
listOf(
Color(0xFFC5E1A5),
Color(0xFF80DEEA)
)
)
)
.padding(8.dp)
.graphicsLayer {
compositingStrategy = CompositingStrategy.Offscreen
}
.drawWithCache {
val path = Path()
path.addOval(
Rect(
topLeft = Offset.Zero,
bottomRight = Offset(size.width, size.height)
)
)
onDrawWithContent {
clipPath(path) {
// this draws the actual image - if you don't call drawContent, it wont
// render anything
this@onDrawWithContent.drawContent()
}
val dotSize = size.width / 8f
// Clip a white border for the content
drawCircle(
Color.Black,
radius = dotSize,
center = Offset(
x = size.width - dotSize,
y = size.height - dotSize
),
blendMode = BlendMode.Clear
)
// draw the red circle indication
drawCircle(
Color(0xFFEF5350), radius = dotSize * 0.8f,
center = Offset(
x = size.width - dotSize,
y = size.height - dotSize
)
)
}
}
)
}
@riggaroo
Copy link
Author

complex_modifier_example_drawWithCache_background

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment