इस पेज का अनुवाद Cloud Translation API से किया गया है.

इमेज को पसंद के मुताबिक बनाना

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
)CustomizeImageSnippets.kt

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)
)CustomizeImageSnippets.kt

सर्कल के आकार वाली इमेज से क्लिप बनाना — **पहली इमेज**: 'सर्कल के आकार' वाली इमेज से क्लिप बनाना

गोल कोने का आकार - 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))
)CustomizeImageSnippets.kt

राउंडेड कॉर्नर शेप से इमेज से क्लिप बनाना — **दूसरी इमेज**: राउंडेड कॉर्नर शेप वाली इमेज से क्लिप बनाना

आप 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())
)CustomizeImageSnippets.kt

**तीसरी इमेज**: पसंद के मुताबिक पाथ आकार वाली इमेज से क्लिप बनाना

`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)
)CustomizeImageSnippets.kt

**चौथी इमेज**: किसी इमेज को क्लिप करें और उसके चारों तरफ़ बॉर्डर बनाएं

अगर आपको ग्रेडिएंट बॉर्डर बनाना है, तो 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)
)CustomizeImageSnippets.kt

**इमेज 5**: रेनबो ग्रेडिएंट सर्कल बॉर्डर

पसंद के मुताबिक आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) सेट करना

किसी इमेज को कस्टम आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में बदलने के लिए, इसका इस्तेमाल करें किसी इमेज (या किसी भी इमेज) के लिए, पसंद के मुताबिक अनुपात देने के लिए Modifier.aspectRatio(16f/9f) बनाने में मदद मिलती है).

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    modifier = Modifier.aspectRatio(16f / 9f)
)CustomizeImageSnippets.kt

इमेज पर Modifier.aspectRatio(16f/9f) का इस्तेमाल करना — **इमेज 6**: इमेज पर `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)
)CustomizeImageSnippets.kt

LayoutMode.SrcIn की मदद से, ColorFilter.tint को लागू किया गया — **सातवीं इमेज**: iOSMode.SrcIn की मदद से, ColorFilter.tint की इमेज इस्तेमाल करना

अन्य 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)
)CustomizeImageSnippets.kt

LayoutMode.Darken के साथ कलर.ग्रीन टिंट — **इमेज 8**: HTMLMode.Darken के साथ कलर.ग्रीन टिंट

इस अलग-अलग ब्लेंड मोड उपलब्ध हैं.

कलर मैट्रिक्स वाला `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) })
)CustomizeImageSnippets.kt

सैचुरेशन 0 वाला कलर मैट्रिक्स (काली और सफ़ेद रंग की इमेज) — **इमेज 9**: सैचुरेशन 0 के साथ कलर मैट्रिक्स (ब्लैक और व्हाइट इमेज)

`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))
)CustomizeImageSnippets.kt

ColorMatrix का इस्तेमाल करके, इमेज की चमक और कंट्रास्ट को अडजस्ट किया गया — **इमेज 10**: ColorMatrix का इस्तेमाल करके, इमेज की चमक और कंट्रास्ट को कम या ज़्यादा किया गया

`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))
)CustomizeImageSnippets.kt

`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))
        )
)CustomizeImageSnippets.kt

**इमेज 12**: इमेज पर धुंधला करने वाला इफ़ेक्ट लागू किया गया

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))
)CustomizeImageSnippets.kt

ब्लरएडजट्रीटमेंट.अनबाउंड — **इमेज 13**::घुरघुराने का इलाज.अनबाउंड

आपके लिए सुझाव

ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
ग्राफ़िक्स मॉडिफ़ायर
इमेज लोड हो रही हैं {:#loading-images}
मटीरियल आइकॉन {:#material-icons}

इमेज को पसंद के मुताबिक बनाना

कॉन्टेंट स्केल

साइज़ के हिसाब से, Image कंपोज़ेबल को क्लिप करें

Image कंपोज़ेबल में बॉर्डर जोड़ें