'लिखें' बॉक्स में मौजूद Brush
से पता चलता है कि किसी कॉन्टेंट को स्क्रीन पर कैसे ड्रॉ किया जाता है: उसे
ड्रॉइंग एरिया में बनाए गए रंग तय करता है (जैसे कि सर्कल,
वर्ग, पाथ). कुछ ऐसे ब्रश मौजूद हैं जो ड्रॉइंग के लिए काम के हैं,
जैसे कि LinearGradient
, RadialGradient
या सादा
SolidColor
ब्रश.
ब्रश का इस्तेमाल Modifier.background()
, TextStyle
या
DrawScope
कॉन्टेंट पर पेंटिंग स्टाइल लागू करने के लिए, कॉल ड्रॉ करें
बनाया जा रहा है.
उदाहरण के लिए, हॉरिज़ॉन्टल ग्रेडिएंट ब्रश का इस्तेमाल करके सर्कल बनाना
DrawScope
:
val brush = Brush.horizontalGradient(listOf(Color.Red, Color.Blue)) Canvas( modifier = Modifier.size(200.dp), onDraw = { drawCircle(brush) } )
![क्षैतिज ग्रेडिएंट के साथ बनाया गया वृत्त](https://developer.android.com/static/develop/ui/compose/images/graphics/brush/draw_circle_example.png?authuser=5&hl=hi)
ग्रेडिएंट ब्रश
इसमें पहले से मौजूद कई ग्रेडिएंट ब्रश हैं, जिनका इस्तेमाल करके अलग-अलग ग्रेडिएंट इफ़ेक्ट. इन ब्रश की मदद से, आपके पास उन रंगों की सूची चुनने का विकल्प होता है से एक ग्रेडिएंट बनाना चाहते हैं.
उपलब्ध ग्रेडिएंट ब्रश और उनसे जुड़े आउटपुट की सूची:
ग्रेडिएंट ब्रश टाइप | आउटपुट |
---|---|
Brush.horizontalGradient(colorList) |
![]() |
Brush.linearGradient(colorList) |
![]() |
Brush.verticalGradient(colorList) |
![]() |
Brush.sweepGradient(colorList)
ध्यान दें: रंगों के बीच आसानी से ट्रांज़िशन करने के लिए, आखिरी रंग को शुरुआती रंग पर सेट करें. |
![]() |
Brush.radialGradient(colorList) |
![]() |
colorStops
की मदद से रंगों का डिस्ट्रिब्यूशन बदलें
ग्रेडिएंट में रंगों के दिखने का तरीका पसंद के मुताबिक बनाने के लिए,
हर एक पेज के लिए colorStops
वैल्यू. colorStops
को भिन्न के रूप में बताया जाना चाहिए,
0 और 1 के बीच होना चाहिए. एक से ज़्यादा वैल्यू होने पर, वे रंग रेंडर नहीं होंगे
का इस्तेमाल करें.
कलर स्टॉप को अलग-अलग रकम देने के लिए कॉन्फ़िगर किया जा सकता है, जैसे कि कम या एक या ज़्यादा रंग:
val colorStops = arrayOf( 0.0f to Color.Yellow, 0.2f to Color.Red, 1f to Color.Blue ) Box( modifier = Modifier .requiredSize(200.dp) .background(Brush.horizontalGradient(colorStops = colorStops)) )
जैसा कि colorStop
में बताया गया है, रंग दिए गए ऑफ़सेट पर बिखर जाते हैं
जोड़ें, लाल और नीले रंग से कम पीला.
![अलग-अलग कलर स्टॉप के साथ कॉन्फ़िगर किया गया ब्रश](https://developer.android.com/static/develop/ui/compose/images/graphics/brush/color_stops.png?authuser=5&hl=hi)
TileMode
के साथ पैटर्न दोहराएं
हर ग्रेडिएंट ब्रश के लिए TileMode
सेट करने का विकल्प होता है. आप शायद ये न कर पाएं
अगर आपने ग्रेडिएंट के लिए शुरू और खत्म होने का समय सेट नहीं किया है, तो TileMode
पर ध्यान दें.
इससे डिफ़ॉल्ट तौर पर, पूरा इलाका भर जाएगा. TileMode
में सिर्फ़ ग्रेडिएंट को टाइल किया जाएगा
अगर एरिया का साइज़ ब्रश के साइज़ से बड़ा हो.
यहां दिया गया कोड, ग्रेडिएंट पैटर्न को चार बार दोहराएंगा, क्योंकि endX
50.dp
पर सेट करें और साइज़ 200.dp
पर सेट किया गया है:
val listColors = listOf(Color.Yellow, Color.Red, Color.Blue) val tileSize = with(LocalDensity.current) { 50.dp.toPx() } Box( modifier = Modifier .requiredSize(200.dp) .background( Brush.horizontalGradient( listColors, endX = tileSize, tileMode = TileMode.Repeated ) ) )
यहां दी गई टेबल में बताया गया है कि
ऊपर दिया गया HorizontalGradient
उदाहरण:
टाइलमोड | आउटपुट |
---|---|
TileMode.Repeated : एज को पिछले रंग से पहले तक दोहराया जाता है. |
![]() |
TileMode.Mirror : एज को पिछले रंग से लेकर पहले रंग तक मिरर किया गया है. |
![]() |
TileMode.Clamp : किनारे को आखिरी रंग के साथ रखा गया है. इसके बाद, वह बाकी जगह के हिसाब से सबसे सही रंग पेंट करेगा. |
![]() |
TileMode.Decal : सिर्फ़ सीमाओं के साइज़ के हिसाब से ही रेंडर करें. TileMode.Decal , ओरिजनल रेंज से बाहर के कॉन्टेंट का सैंपल देने के लिए, पारदर्शी काले रंग का इस्तेमाल करता है, जबकि TileMode.Clamp किनारे के रंग के सैंपल का इस्तेमाल करता है. |
![]() |
TileMode
उसी तरह काम करता है जैसे अन्य डायरेक्शनल ग्रेडिएंट के लिए काम करता है,
दोहराव की दिशा में अंतर होता है.
ब्रश का साइज़ बदलें
अगर आपको उस जगह का साइज़ पता है जहां ब्रश बनाया जाएगा, तो
endX
टाइल को सेट करें, जैसा कि हमने ऊपर TileMode
सेक्शन में दिखाया है. अगर आप
DrawScope
है, तो एरिया का साइज़ जानने के लिए, इसकी size
प्रॉपर्टी का इस्तेमाल किया जा सकता है.
अगर आपको अपने ड्रॉइंग एरिया का साइज़ नहीं पता है (उदाहरण के लिए,
Brush
को Text के लिए असाइन किया गया है), तो आप Shader
को बढ़ा सकते हैं और
createShader
फ़ंक्शन में ड्रॉइंग एरिया.
इस उदाहरण में, पैटर्न को चार बार दोहराने के लिए, साइज़ को 4 से विभाजित करें:
val listColors = listOf(Color.Yellow, Color.Red, Color.Blue) val customBrush = remember { object : ShaderBrush() { override fun createShader(size: Size): Shader { return LinearGradientShader( colors = listColors, from = Offset.Zero, to = Offset(size.width / 4f, 0f), tileMode = TileMode.Mirror ) } } } Box( modifier = Modifier .requiredSize(200.dp) .background(customBrush) )
![शेडर के साइज़ को चार से भाग दिया गया](https://developer.android.com/static/develop/ui/compose/images/graphics/brush/tile_mode_mirror.png?authuser=5&hl=hi)
ब्रश के साइज़ को किसी अन्य ग्रेडिएंट, जैसे कि रेडियल के साइज़ में भी बदला जा सकता है
ग्रेडिएंट. अगर आपने साइज़ और सेंटर की जानकारी नहीं दी, तो ग्रेडिएंट,
DrawScope
की पूरी सीमा और रेडियल ग्रेडिएंट डिफ़ॉल्ट का केंद्र
DrawScope
की सीमा के केंद्र तक. इससे रेडियल ग्रेडिएंट का
जो छोटे डाइमेंशन के सेंटर में दिख रहा है (चौड़ाई या
लंबाई):
Box( modifier = Modifier .fillMaxSize() .background( Brush.radialGradient( listOf(Color(0xFF2be4dc), Color(0xFF243484)) ) ) )
![रेडियल ग्रेडिएंट सेट, जिसके साइज़ में कोई बदलाव नहीं हुआ](https://developer.android.com/static/develop/ui/compose/images/graphics/brush/radial_gradient_default.png?authuser=5&hl=hi)
दायरे के साइज़ को ज़्यादा से ज़्यादा डाइमेंशन पर सेट करने के लिए, जब रेडियल ग्रेडिएंट बदला जाता है, तो देखा जा सकता है कि यह एक बेहतर रेडियल ग्रेडिएंट प्रभाव पैदा करता है:
val largeRadialGradient = object : ShaderBrush() { override fun createShader(size: Size): Shader { val biggerDimension = maxOf(size.height, size.width) return RadialGradientShader( colors = listOf(Color(0xFF2be4dc), Color(0xFF243484)), center = size.center, radius = biggerDimension / 2f, colorStops = listOf(0f, 0.95f) ) } } Box( modifier = Modifier .fillMaxSize() .background(largeRadialGradient) )
![क्षेत्रफल के आकार के आधार पर, रेडियल ग्रेडिएंट पर बड़ा दायरा](https://developer.android.com/static/develop/ui/compose/images/graphics/brush/radial_size_biggest_dimension.png?authuser=5&hl=hi)
यह ध्यान देने वाली बात है कि असल साइज़ जो
शेडर को वहां से तय किया जाता है जहां से उसे शुरू किया जाता है. डिफ़ॉल्ट रूप से, Brush
अगर साइज़ पिछले साइज़ से अलग है, तो Shader
को अंदरूनी तौर पर फिर से असाइन करें
Brush
को बनाना या अगर शेडर को बनाने में इस्तेमाल किए जाने वाले स्टेट ऑब्जेक्ट ने
बदल दिया गया है.
नीचे दिया गया कोड अलग-अलग तरीकों से तीन अलग-अलग समय पर शेडर बनाता है आकार, जैसे-जैसे ड्रॉइंग एरिया का साइज़ बदलता है:
val colorStops = arrayOf( 0.0f to Color.Yellow, 0.2f to Color.Red, 1f to Color.Blue ) val brush = Brush.horizontalGradient(colorStops = colorStops) Box( modifier = Modifier .requiredSize(200.dp) .drawBehind { drawRect(brush = brush) // will allocate a shader to occupy the 200 x 200 dp drawing area inset(10f) { /* Will allocate a shader to occupy the 180 x 180 dp drawing area as the inset scope reduces the drawing area by 10 pixels on the left, top, right, bottom sides */ drawRect(brush = brush) inset(5f) { /* will allocate a shader to occupy the 170 x 170 dp drawing area as the inset scope reduces the drawing area by 5 pixels on the left, top, right, bottom sides */ drawRect(brush = brush) } } } )
किसी इमेज को ब्रश की तरह इस्तेमाल करें
ImageBitmap को Brush
के तौर पर इस्तेमाल करने के लिए, इमेज को ImageBitmap
के तौर पर लोड करें.
और ImageShader
ब्रश बनाएं:
val imageBrush = ShaderBrush(ImageShader(ImageBitmap.imageResource(id = R.drawable.dog))) // Use ImageShader Brush with background Box( modifier = Modifier .requiredSize(200.dp) .background(imageBrush) ) // Use ImageShader Brush with TextStyle Text( text = "Hello Android!", style = TextStyle( brush = imageBrush, fontWeight = FontWeight.ExtraBold, fontSize = 36.sp ) ) // Use ImageShader Brush with DrawScope#drawCircle() Canvas(onDraw = { drawCircle(imageBrush) }, modifier = Modifier.size(200.dp))
ब्रश का इस्तेमाल कुछ अलग-अलग तरह की ड्रॉइंग पर किया जाता है: बैकग्राउंड, टेक्स्ट और कैनवस. इसका नतीजा यह होता है:
![अलग-अलग तरीकों से इस्तेमाल किए जाने वाले ImageShader ब्रश](https://developer.android.com/static/develop/ui/compose/images/graphics/brush/image_brush.png?authuser=5&hl=hi)
ध्यान दें कि अब ImageBitmap
का इस्तेमाल करके टेक्स्ट को भी रेंडर किया गया है.
पिक्सल.
बेहतर उदाहरण: कस्टम ब्रश
एजीएसएल RuntimeShader
ब्रश
एजीएसएल में, जीएलएसएल शेडर सुविधाओं का सबसेट उपलब्ध है. शेडर ये काम कर सकते हैं: AGSL में लिखा गया है और इसे Compose में ब्रश के साथ इस्तेमाल किया गया है.
शेडर ब्रश बनाने के लिए, पहले शेडर को AGSL शेडर स्ट्रिंग के रूप में परिभाषित करें:
@Language("AGSL") val CUSTOM_SHADER = """ uniform float2 resolution; layout(color) uniform half4 color; layout(color) uniform half4 color2; half4 main(in float2 fragCoord) { float2 uv = fragCoord/resolution.xy; float mixValue = distance(uv, vec2(0, 1)); return mix(color, color2, mixValue); } """.trimIndent()
ऊपर दिया गया शेडर दो इनपुट रंग लेता है, नीचे से दूरी की गणना करता है
ड्रॉइंग एरिया की बाईं ओर (vec2(0, 1)
) और दोनों कलर के बीच mix
है
दूरी के आधार पर. इससे ग्रेडिएंट इफ़ेक्ट पैदा होता है.
फिर, शेडर ब्रश बनाएं और resolution
के लिए यूनिफ़ॉर्म सेट करें - साइज़
और वह color
और color2
जिसे आपको इनपुट के तौर पर इस्तेमाल करना है
आपका कस्टम ग्रेडिएंट:
val Coral = Color(0xFFF3A397) val LightYellow = Color(0xFFF8EE94) @RequiresApi(Build.VERSION_CODES.TIRAMISU) @Composable @Preview fun ShaderBrushExample() { Box( modifier = Modifier .drawWithCache { val shader = RuntimeShader(CUSTOM_SHADER) val shaderBrush = ShaderBrush(shader) shader.setFloatUniform("resolution", size.width, size.height) onDrawBehind { shader.setColorUniform( "color", android.graphics.Color.valueOf( LightYellow.red, LightYellow.green, LightYellow .blue, LightYellow.alpha ) ) shader.setColorUniform( "color2", android.graphics.Color.valueOf( Coral.red, Coral.green, Coral.blue, Coral.alpha ) ) drawRect(shaderBrush) } } .fillMaxWidth() .height(200.dp) ) }
इसे चलाने पर, स्क्रीन पर रेंडर की गई ये चीज़ें देखी जा सकती हैं:
![Compose में कस्टम एजीएसएल शेडर चल रहा है](https://developer.android.com/static/develop/ui/compose/images/graphics/brush/shaders.png?authuser=5&hl=hi)
यह ध्यान देने वाली बात है कि शेडर का इस्तेमाल करके, ग्रेडिएंट के अलावा भी बहुत कुछ किया जा सकता है, क्योंकि ये सभी गणना गणित पर आधारित हैं. AGSL के बारे में ज़्यादा जानकारी के लिए, यहां जाएं: AGSL दस्तावेज़.
अन्य संसाधन
Compose में ब्रश का इस्तेमाल करने के ज़्यादा उदाहरणों के लिए, ये संसाधन देखें:
- Compose में ब्रश के टेक्स्ट को कलर करने का ऐनिमेशन 🖌️
- Compose में कस्टम ग्राफ़िक और लेआउट - Android Dev Summit 2022
- JetLagged सैंपल - RuntimeShader Brush
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- ग्राफ़िक्स मॉडिफ़ायर
- कंपोज़ में ग्राफ़िक्स
- टेक्स्ट की स्टाइल करना