Shalaga44
03/24/2021, 5:00 AMSurface(modifier = Modifier.fillMaxSize()) {
Box {
Canvas(Modifier.fillMaxSize()) {
val midWidth = size.width / 2
val midSpace = 200f * density
val leftPoint = midWidth - (midSpace / 2)
val rightPoint = midWidth + (midSpace / 2)
val leftPath = Path().apply {
moveTo(size.width, 0f)
lineTo(rightPoint, 0f)
lineTo(leftPoint, size.height)
lineTo(size.width, size.height)
close()
}
val rightPath = Path().apply {
moveTo(0f, 0f)
lineTo(rightPoint, 0f)
lineTo(leftPoint, size.height)
lineTo(0f, size.height)
close()
}
drawPath(leftPath, Color.Red)
drawPath(rightPath, Color.Black)
}
val text = "ABILITY TO"
Text(
text = text,
textAlign = TextAlign.Center,
modifier = Modifier.align(Alignment.Center),
style = MaterialTheme.typography.h1,
fontWeight = FontWeight.Bold,
color = Color.Black
)
Text(
text = text,
textAlign = TextAlign.Center,
modifier = Modifier.align(Alignment.Center),
style = MaterialTheme.typography.h1,
fontWeight = FontWeight.Bold,
color = Color.Red,
)
}
}
olonho
03/25/2021, 11:57 AMNader Jawad
03/25/2021, 6:20 PMBlendMode.Xor
spierce7
03/26/2021, 1:38 AMNader Jawad
03/26/2021, 2:08 AMAlbert Chang
03/26/2021, 2:16 AMgraphicsLayer
though.Nader Jawad
03/26/2021, 5:20 AM/**
* Create a linear gradient that begins from the top left to the bottom right of the drawing area.
* Use manual stops from 0 to 0.5 and 0.5 to 1.0 to create a solid separation instead of
* a gradual color ramp between the start and end colors
* Not specifying start/end offsets as we want to size the gradient implicitly with the
* bounds of the composable
*/
fun createDiagonalBrush(startColor: Color, endColor: Color): Brush =
Brush.linearGradient(
0f to startColor,
0.5f to startColor,
0.5f to endColor,
1.0f to endColor
)
@Composable
fun MaskedText() {
// Mask text color. Can be anything just make sure it's not transparent
val textColor = Color.White
val fontSize = 40.sp
// Create alternating gradients for the background and the text respectively
val backgroundGradient = createDiagonalBrush(Color.Black, Color.Red)
val textGradient = createDiagonalBrush(Color.Red, Color.Black)
Column(modifier = Modifier.fillMaxSize()
.background(backgroundGradient)
// Create a graphics layer with slight alpha to render into an offscreen buffer
// Note future releases of compose will have a manual userCompositingLayer field instead
// of using alpha as a side effect for this behavior
// This offscreen buffer is necessary to leverage blending modes only against
// the pixels drawn by the text composable and ignore drawing in transparent regions
.graphicsLayer(alpha = 0.99f)
.drawWithContent {
// Draw the text content
drawContent()
// Draw a rectangle to cover only the pixels drawn by the Text composable
// by using the src in blend mode
drawRect(textGradient, blendMode = BlendMode.SrcIn)
}, verticalArrangement = Arrangement.Center) {
Text(
modifier = Modifier.fillMaxWidth().padding(start = 20.dp),
textAlign = TextAlign.Left,
text = "THE",
color = textColor,
fontSize = fontSize
)
Text(
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
text = "ABILITY",
color = textColor,
fontSize = fontSize
)
Text(
modifier = Modifier.fillMaxWidth().padding(end = 20.dp),
textAlign = TextAlign.Right,
text = "TO CHANGE",
color = Color.White,
fontSize = fontSize
)
}
}
ShaderBrush
to return an instance of linearGradientShader
, or you can replace the Modifier.background
usages to a DrawModifier and create the gradient with the actual size of the composable.Albert Chang
03/26/2021, 5:26 AMdrawRect(Color.Unspecified, blendMode = BlendMode.Clear)
to clear the layer before drawing the text, which necessarily makes it black. This is the reason I said graphicsLayer
is not necessary.Nader Jawad
03/26/2021, 7:32 PMAlbert Chang
03/27/2021, 3:14 AM