Image
कंपोज़ेबल में मौजूद प्रॉपर्टी का इस्तेमाल करके, इमेज को पसंद के मुताबिक बनाया जा सकता है
(contentScale
, colorFilter
). आप मौजूदा Modifiers
को भी लागू कर सकते हैं
Image
पर अलग-अलग इफ़ेक्ट लागू करें. मॉडिफ़ायर का इस्तेमाल किसी भी
कंपोज़ेबल, सिर्फ़ Image
कंपोज़ेबल नहीं, बल्कि contentScale
और
colorFilter
, कंपोज़ेबल Image
में साफ़ तौर पर मौजूद पैरामीटर हैं.
कॉन्टेंट स्केल
किसी इमेज को काटने या स्केल करने के तरीके में बदलाव करने के लिए, contentScale
विकल्प तय करें
इसकी सीमाएं हैं. डिफ़ॉल्ट रूप से, अगर आप contentScale
विकल्प नहीं चुनते हैं, तो
ContentScale.Fit
का इस्तेमाल किया जाएगा.
नीचे दिए गए उदाहरण में, इमेज कंपोज़ेबल को 150dp के साइज़ में
Image
कंपोज़ेबल पर बॉर्डर और बैकग्राउंड को पीले रंग पर सेट किया गया है, ताकि उन्हें दिखाया जा सके
नीचे टेबल में ContentScale
के अलग-अलग विकल्प मौजूद हैं.
val imageModifier = Modifier .size(150.dp) .border(BorderStroke(1.dp, Color.Black)) .background(Color.Yellow) Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Fit, modifier = imageModifier )
ContentScale
के अलग-अलग विकल्प सेट करने पर, अलग-अलग आउटपुट मिलेंगे. तय सीमा से कम
इस टेबल से आपको सही ContentScale
मोड चुनने में मदद मिलेगी
ज़रूरी है:
सोर्स इमेज |
![]() |
![]() |
ContentScale |
नतीजा - पोर्ट्रेट इमेज: | नतीजा - लैंडस्केप इमेज: |
ContentScale.Fit : आसपेक्ट रेशियो (डिफ़ॉल्ट) रखते हुए, इमेज का साइज़ एक जैसा रखें. अगर कॉन्टेंट साइज़ से छोटा है, तो इमेज को सीमाओं में फ़िट करने के लिए स्केल किया जाता है. |
![]() |
![]() |
ContentScale.Crop : इमेज को उपलब्ध जगह पर बीच में काटें. |
![]() |
![]() |
ContentScale.FillHeight : आस्पेक्ट रेशियो को बनाए रखते हुए सोर्स को स्केल करें, ताकि बाउंड, डेस्टिनेशन की ऊंचाई से मेल खा सकें. |
![]() |
![]() |
ContentScale.FillWidth : आस्पेक्ट रेशियो को बनाए रखते हुए सोर्स को स्केल करें, ताकि बाउंड, डेस्टिनेशन की चौड़ाई से मेल खाएं. |
![]() |
![]() |
ContentScale.FillBounds : डेस्टिनेशन की सीमाओं को भरने के लिए, कॉन्टेंट को एक ही तरह से वर्टिकल और हॉरिज़ॉन्टल तौर पर स्केल करें. (ध्यान दें: अगर इमेज को किसी ऐसे कंटेनर में रखा जाता है जो इमेज के सटीक अनुपात से मेल नहीं खाते, तो इससे इमेज डिस्टॉर्शन हो जाएगी) |
![]() |
![]() |
ContentScale.Inside : डेस्टिनेशन की सीमाओं के अंदर आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखने के लिए, सोर्स को स्केल करें. अगर सोर्स, दोनों डाइमेंशन में डेस्टिनेशन से छोटा या उसके बराबर है, तो यह `कोई नहीं` की तरह काम करता है. सामग्री हमेशा इन सीमाओं के अंदर शामिल की जाएगी. अगर सामग्री सीमा से छोटी है, तो कोई स्केलिंग लागू नहीं होगी. |
सोर्स इमेज सीमा से बड़ी है:
![]() ![]() |
सोर्स इमेज सीमा से बड़ी है:
![]() ![]() |
ContentScale.None : सोर्स पर कोई स्केलिंग लागू न करें. अगर कॉन्टेंट का साइज़, तय की गई सीमा से कम है, तो उसे एरिया के हिसाब से नहीं बढ़ाया जा सकेगा. |
सोर्स इमेज सीमा से बड़ी है:
![]() ![]() |
सोर्स इमेज सीमा से बड़ी है:
![]() ![]() |
साइज़ के हिसाब से, Image
कंपोज़ेबल को क्लिप करें
किसी इमेज को सही आकार देने के लिए, उसमें पहले से मौजूद clip
मॉडिफ़ायर का इस्तेमाल करें.
किसी इमेज को गोल आकार में काटने के लिए, Modifier.clip(CircleShape)
का इस्तेमाल करें:
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(200.dp) .clip(CircleShape) )
![सर्कल के आकार वाली इमेज से क्लिप बनाना](https://developer.android.com/static/develop/ui/compose/images/graphics-clipcircle.png?authuser=4&hl=hi)
गोल कोने का आकार - Modifier.clip(RoundedCornerShape(16.dp)
) का इस्तेमाल करें
कोनों का आकार जिन्हें आप गोल करना चाहते हैं:
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(200.dp) .clip(RoundedCornerShape(16.dp)) )
![राउंडेड कॉर्नर शेप से इमेज से क्लिप बनाना](https://developer.android.com/static/develop/ui/compose/images/graphics-roundedcorners.png?authuser=4&hl=hi)
आप Shape
को बड़ा करके और
आकार के आस-पास क्लिप बनाने के लिए Path
:
class SquashedOval : Shape { override fun createOutline( size: Size, layoutDirection: LayoutDirection, density: Density ): Outline { val path = Path().apply { // We create an Oval that starts at ¼ of the width, and ends at ¾ of the width of the container. addOval( Rect( left = size.width / 4f, top = 0f, right = size.width * 3 / 4f, bottom = size.height ) ) } return Outline.Generic(path = path) } } Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(200.dp) .clip(SquashedOval()) )
![पसंद के मुताबिक पाथ आकार वाली इमेज से क्लिप बनाना](https://developer.android.com/static/develop/ui/compose/images/graphics-customcrop.png?authuser=4&hl=hi)
Image
कंपोज़ेबल में बॉर्डर जोड़ें
Modifier.border()
को Modifier.clip()
के साथ जोड़ना एक सामान्य कार्रवाई है
चित्र के चारों ओर बॉर्डर बनाने के लिए:
val borderWidth = 4.dp Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(150.dp) .border( BorderStroke(borderWidth, Color.Yellow), CircleShape ) .padding(borderWidth) .clip(CircleShape) )
![इमेज को क्लिप करें और उसके चारों तरफ़ बॉर्डर बनाएं](https://developer.android.com/static/develop/ui/compose/images/graphics-border.png?authuser=4&hl=hi)
अगर आपको ग्रेडिएंट बॉर्डर बनाना है, तो Brush
API का इस्तेमाल करके
इमेज के चारों ओर रेनबो ग्रेडिएंट बॉर्डर बनाएं:
val rainbowColorsBrush = remember { Brush.sweepGradient( listOf( Color(0xFF9575CD), Color(0xFFBA68C8), Color(0xFFE57373), Color(0xFFFFB74D), Color(0xFFFFF176), Color(0xFFAED581), Color(0xFF4DD0E1), Color(0xFF9575CD) ) ) } val borderWidth = 4.dp Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(150.dp) .border( BorderStroke(borderWidth, rainbowColorsBrush), CircleShape ) .padding(borderWidth) .clip(CircleShape) )
![रेनबो ग्रेडिएंट सर्कल बॉर्डर](https://developer.android.com/static/develop/ui/compose/images/graphics-gradientborder.png?authuser=4&hl=hi)
पसंद के मुताबिक आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) सेट करना
किसी इमेज को कस्टम आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में बदलने के लिए, इसका इस्तेमाल करें
किसी इमेज (या किसी भी इमेज) के लिए, पसंद के मुताबिक अनुपात देने के लिए Modifier.aspectRatio(16f/9f)
बनाने में मदद मिलती है).
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), modifier = Modifier.aspectRatio(16f / 9f) )
![इमेज पर Modifier.aspectRatio(16f/9f) का इस्तेमाल करना](https://developer.android.com/static/develop/ui/compose/images/graphics-aspectratio.png?authuser=4&hl=hi)
Modifier.aspectRatio(16f/9f)
का इस्तेमाल करनारंग फ़िल्टर - चित्र के पिक्सेल रंगों को रूपांतरित करें
इमेज कंपोज़ेबल में एक colorFilter
पैरामीटर है, जो
अपनी इमेज के अलग-अलग पिक्सल.
इमेज का रंग बदलना
ColorFilter.tint(color, blendMode)
का इस्तेमाल करने पर, ब्लेंड मोड इस तरीके से लागू हो जाएगा:
आपके Image
कंपोज़ेबल को रंग दिया गया है. ColorFilter.tint(color, blendMode)
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
कॉन्टेंट को टिंट करने के लिए BlendMode.SrcIn
का इस्तेमाल करता है. इसका मतलब है कि दिया गया रंग
जहां स्क्रीन पर इमेज दिखती है. यह आइकॉन और
जिन्हें अलग-अलग थीम पर बनाया जाना चाहिए.
Image( painter = painterResource(id = R.drawable.baseline_directions_bus_24), contentDescription = stringResource(id = R.string.bus_content_description), colorFilter = ColorFilter.tint(Color.Yellow) )
![LayoutMode.SrcIn की मदद से, ColorFilter.tint को लागू किया गया](https://developer.android.com/static/develop/ui/compose/images/graphics-bus.png?authuser=4&hl=hi)
अन्य BlendMode
पर, अलग-अलग तरह का असर दिखता है. उदाहरण के लिए, सेटिंग
इमेज पर Color.Green
वाला BlendMode.Darken
, ये जनरेट करता है
नतीजा:
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken) )
![LayoutMode.Darken के साथ कलर.ग्रीन टिंट](https://developer.android.com/static/develop/ui/compose/images/graphics-blendmode.png?authuser=4&hl=hi)
इस अलग-अलग ब्लेंड मोड उपलब्ध हैं.
कलर मैट्रिक्स वाला Image
फ़िल्टर लागू करना
कलर मैट्रिक्स ColorFilter
विकल्प का इस्तेमाल करके, अपनी इमेज बदलें. उदाहरण के लिए,
अपनी इमेज पर ब्लैक एंड व्हाइट फ़िल्टर लगाने के लिए,
ColorMatrix
और सेचुरेशन को 0f
पर सेट करें.
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) }) )
![सैचुरेशन 0 वाला कलर मैट्रिक्स (काली और सफ़ेद रंग की इमेज)](https://developer.android.com/static/develop/ui/compose/images/graphics-bw.png?authuser=4&hl=hi)
Image
कंपोज़ेबल के कंट्रास्ट या चमक को घटाएं या बढ़ाएं
किसी इमेज का कंट्रास्ट और चमक बदलने के लिए,
वैल्यू बदलने के लिए ColorMatrix
:
val contrast = 2f // 0f..10f (1 should be default) val brightness = -180f // -255f..255f (0 should be default) val colorMatrix = floatArrayOf( contrast, 0f, 0f, 0f, brightness, 0f, contrast, 0f, 0f, brightness, 0f, 0f, contrast, 0f, brightness, 0f, 0f, 0f, 1f, 0f ) Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix)) )
![ColorMatrix का इस्तेमाल करके, इमेज की चमक और कंट्रास्ट को अडजस्ट किया गया](https://developer.android.com/static/develop/ui/compose/images/graphics-colormatrix.png?authuser=4&hl=hi)
Image
कंपोज़ेबल के रंगों को बदलें
किसी इमेज के रंग को उलटने के लिए, ColorMatrix
को
रंग:
val colorMatrix = floatArrayOf( -1f, 0f, 0f, 0f, 255f, 0f, -1f, 0f, 0f, 255f, 0f, 0f, -1f, 0f, 255f, 0f, 0f, 0f, 1f, 0f ) Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix)) )
![इमेज पर उलटे रंग](https://developer.android.com/static/develop/ui/compose/images/graphics-inverted.png?authuser=4&hl=hi)
Image
कंपोज़ेबल को धुंधला करें
किसी इमेज को धुंधला करने के लिए, Modifier.blur()
का इस्तेमाल करें. इसके लिए, radiusX
और radiusY
दें,
यह सुविधा, हॉरिज़ॉन्टल और वर्टिकल डायरेक्शन में ब्लर रेडियस बताती है
क्रम से.
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(150.dp) .blur( radiusX = 10.dp, radiusY = 10.dp, edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp)) ) )
![इमेज पर धुंधला करने वाला इफ़ेक्ट लागू किया गया](https://developer.android.com/static/develop/ui/compose/images/graphics-blur.png?authuser=4&hl=hi)
Images
को धुंधला करने के लिए, BlurredEdgeTreatment(Shape)
,
के बजाय BlurredEdgeTreatment.Unbounded
के बजाय, क्योंकि बाद वाले का इस्तेमाल धुंधला करने के लिए किया जाता है
की सीमाओं के बाहर रेंडर होने की उम्मीद की जाती है.
ओरिजनल कॉन्टेंट. इमेज के लिए, यह संभावना है कि वे इमेज के बाहर रेंडर नहीं होंगी
कॉन्टेंट की सीमाएं; जबकि गोल आकार वाले आयत को धुंधला करने के लिए
अंतर.
उदाहरण के लिए, अगर हम BlurredEdgeTreatment
को ऊपर दिए गए विकल्पों पर 'अनबाउंड नहीं' पर सेट करते हैं
इमेज के लिए, इमेज के किनारे साफ़ के बजाय धुंधले दिखते हैं:
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(150.dp) .blur( radiusX = 10.dp, radiusY = 10.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded ) .clip(RoundedCornerShape(8.dp)) )
![ब्लरएडजट्रीटमेंट.अनबाउंड](https://developer.android.com/static/develop/ui/compose/images/graphics-unbounded.png?authuser=4&hl=hi)
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- ग्राफ़िक्स मॉडिफ़ायर
- इमेज लोड हो रही हैं {:#loading-images}
- मटीरियल आइकॉन {:#material-icons}