এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

একটি ছবি কাস্টমাইজ করুন

Image কম্পোজেবল ( contentScale , colorFilter ) এর বৈশিষ্ট্যগুলি ব্যবহার করে চিত্রগুলি কাস্টমাইজ করা যেতে পারে। আপনি আপনার Image বিভিন্ন প্রভাব প্রয়োগ করতে বিদ্যমান Modifiers প্রয়োগ করতে পারেন। সংশোধক যেকোন কম্পোজেবলে ব্যবহার করা যেতে পারে, শুধু Image কম্পোজেবল নয়, যেখানে contentScale এবং colorFilter হল Image কম্পোজেবলের স্পষ্ট প্যারামিটার।

বিষয়বস্তু স্কেল

একটি চিত্রকে কীভাবে তার সীমার মধ্যে স্কেল করা হয় তা ক্রপ বা পরিবর্তন করতে একটি contentScale বিকল্প নির্দিষ্ট করুন। ডিফল্টরূপে, আপনি একটি contentScale বিকল্প নির্দিষ্ট না করলে, ContentScale.Fit ব্যবহার করা হবে।

নীচের উদাহরণে, চিত্র কম্পোজেবল একটি সীমানা সহ একটি 150dp আকারে সীমাবদ্ধ এবং নীচের সারণীতে বিভিন্ন ContentScale বিকল্পগুলি প্রদর্শন করার জন্য Image কম্পোজেবলের পটভূমি হলুদে সেট করা হয়েছে৷

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

**চিত্র 1** : CircleShape দিয়ে একটি ছবি ক্লিপ করা

বৃত্তাকার কোণার আকৃতি - আপনি যে কোণগুলিকে বৃত্তাকার করতে চান তার আকারের সাথে 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

RoundedCornerShape দিয়ে একটি ছবি ক্লিপ করা — **চিত্র 2** : রাউন্ডেড কর্নারশেপ সহ একটি চিত্র ক্লিপ করা

এছাড়াও আপনি 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

কাস্টম পাথ আকৃতি সহ একটি চিত্র ক্লিপ করা হচ্ছে — **চিত্র 3** : কাস্টম পাথ আকৃতি সহ একটি চিত্র ক্লিপ করা

একটি `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

একটি চিত্র ক্লিপ করুন এবং এটির চারপাশে একটি সীমানা প্রদান করুন — **চিত্র 4** : একটি চিত্র ক্লিপ করুন এবং এর চারপাশে একটি সীমানা প্রদান করুন

আপনি যদি একটি গ্রেডিয়েন্ট সীমানা তৈরি করতে চান, আপনি চিত্রের চারপাশে একটি রংধনু গ্রেডিয়েন্ট সীমানা আঁকতে 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

BlendMode.SrcIn এর সাথে ColorFilter.tint প্রয়োগ করা হয়েছে — **চিত্র 7** : ColorFilter.tint BlendMode.SrcIn এর সাথে প্রয়োগ করা হয়েছে

অন্যান্য 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

BlendMode.Darken সহ রঙ।সবুজ আভা — **চিত্র 8** : BlendMode.Darken সহ রঙ.সবুজ আভা

উপলব্ধ বিভিন্ন মিশ্রণ মোড সম্পর্কে আরও তথ্যের জন্য BlendMode রেফারেন্স ডকুমেন্টেশন দেখুন।

রঙ ম্যাট্রিক্স সহ একটি `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

**চিত্র 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** : কালারম্যাট্রিক্স ব্যবহার করে চিত্রের উজ্জ্বলতা এবং বৈসাদৃশ্য সামঞ্জস্য করা হয়েছে

একটি `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

ছবিতে BlurEffect প্রয়োগ করা হয়েছে — **চিত্র 12** : ব্লার ইফেক্ট ছবিতে প্রয়োগ করা হয়েছে

Images অস্পষ্ট করার সময়, BlurredEdgeTreatment.Unbounded এর পরিবর্তে BlurredEdgeTreatment(Shape) ব্যবহার করার পরামর্শ দেওয়া হয়, কারণ পরবর্তীটি নির্বিচারে রেন্ডারিংগুলিকে অস্পষ্ট করার জন্য ব্যবহার করা হয় যা মূল বিষয়বস্তুর সীমার বাইরে রেন্ডার হওয়ার আশা করা হয়৷ চিত্রগুলির জন্য, সম্ভবত তারা বিষয়বস্তুর সীমার বাইরে রেন্ডার করবে না; একটি বৃত্তাকার আয়তক্ষেত্র অস্পষ্ট করার জন্য এই পার্থক্য প্রয়োজন হতে পারে।

উদাহরণস্বরূপ, যদি আমরা উপরের ছবিতে 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** : BlurEdgeTreatment.Unbounded

{% শব্দার্থে %} {% endverbatim %}

আপনার জন্য প্রস্তাবিত

দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
গ্রাফিক্স মডিফায়ার
ছবি লোড হচ্ছে {:#loading-images}
উপাদান আইকন {:#material-icons}

{% শব্দার্থে %} {% endverbatim %}

একটি ছবি কাস্টমাইজ করুন

বিষয়বস্তু স্কেল

একটি আকারে কম্পোজযোগ্য একটি Image ক্লিপ করুন

একটি Image রচনাযোগ্য একটি সীমানা যোগ করুন