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

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

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

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

নিচের উদাহরণে, Image কম্পোজেবলটিকে একটি বর্ডারসহ ১৫০ডিপি আকারে সীমাবদ্ধ রাখা হয়েছে এবং এর 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 : গন্তব্যের সীমার মধ্যে আকৃতির অনুপাত বজায় রাখতে উৎসটিকে স্কেল করুন। যদি উৎসটি উভয় দিকেই গন্তব্যের চেয়ে ছোট বা সমান হয়, তবে এটি None এর মতোই কাজ করে। কন্টেন্ট সর্বদা সীমার মধ্যে থাকবে। যদি কন্টেন্ট সীমার চেয়ে ছোট হয়, তবে কোনো স্কেলিং প্রয়োগ করা হবে না। উৎস চিত্র সীমার চেয়ে বড়: একটি পোর্ট্রেট ছবি, যা মূলত তার বর্গাকার সীমার চেয়ে বড় ছিল, সেটিকে আকৃতির অনুপাত বজায় রেখে মানানসই করার জন্য ছোট করা হয়েছে এবং এর দুই পাশে হলুদ পটভূমি দেখা যাচ্ছে। উৎস চিত্র সীমার চেয়ে ছোট: একটি প্রতিকৃতি ছবি, যা মূলত তার বর্গাকার সীমার চেয়ে ছোট ছিল, ফ্রেমের মধ্যে তার আসল আকারে প্রদর্শিত হচ্ছে এবং এর চারপাশে একটি হলুদ পটভূমি দেখা যাচ্ছে। উৎস চিত্র সীমার চেয়ে বড়: একটি ল্যান্ডস্কেপ ছবি, যা মূলত তার বর্গাকার সীমার চেয়ে বড় ছিল, সেটিকে আকৃতির অনুপাত বজায় রেখে মানানসই করার জন্য ছোট করা হয়েছে এবং এর উপরে ও নিচে হলুদ পটভূমি দেখা যাচ্ছে। উৎস চিত্র সীমার চেয়ে ছোট: একটি ভূদৃশ্যের ছবি, যা মূলত তার বর্গাকার সীমার চেয়ে ছোট ছিল, ফ্রেমের মধ্যে তার আসল আকারে প্রদর্শিত হচ্ছে এবং এর চারপাশে একটি হলুদ পটভূমি দেখা যাচ্ছে।
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)
)

একটি কুকুরের ছবিকে নিখুঁত বৃত্তে কেটে নেওয়া হয়েছে।
চিত্র ১। 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))
)

একটি কুকুরের বর্গাকার ছবি, যার কোণাগুলো গোলাকার করে কাটা হয়েছে।
চিত্র ২। RoundedCornerShape ব্যবহার করে একটি চিত্র ক্লিপিং করা।

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

একটি কুকুরের বর্গাকার ছবিকে কেটে একটি বিশেষ ডিম্বাকৃতি আকৃতি দেওয়া হয়েছে।
চিত্র ৩। নিজস্ব পাথ আকৃতি ব্যবহার করে কোনো চিত্রকে ক্লিপিং করা।

একটি কম্পোজেবল 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)
)

একটি কুকুরের বর্গাকার ছবিকে কেটে বৃত্তাকার করা হয়েছে এবং বৃত্তাকার আকৃতিটির চারপাশে একটি হলুদ বর্ডার রয়েছে।
চিত্র ৪। চারপাশে বর্ডারসহ একটি খণ্ডিত চিত্র।

গ্রেডিয়েন্ট বর্ডার তৈরি করতে, আপনি Brush এপিআই ব্যবহার করে ছবিটির চারপাশে একটি রংধনু গ্রেডিয়েন্ট বর্ডার আঁকতে পারেন:

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)
)

একটি কুকুরের বৃত্তাকার ছবি, যার চারপাশে রংধনুর গ্রেডিয়েন্ট বর্ডার রয়েছে।
চিত্র ৫। রংধনু গ্রেডিয়েন্ট বৃত্তাকার বর্ডার।

একটি কাস্টম অ্যাসপেক্ট রেশিও সেট করুন

কোনো ইমেজকে কাস্টম অ্যাস্পেক্ট রেশিওতে রূপান্তর করতে, Modifier.aspectRatio(16f/9f) ব্যবহার করে ইমেজটির (বা যেকোনো কম্পোজেবল) জন্য একটি কাস্টম রেশিও প্রদান করুন।

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

একটি কুকুরের বর্গাকার ছবিকে ১৬:৯ অনুপাতে রূপান্তর করে আরও চওড়া ও খাটো করা হয়েছে।
চিত্র ৬। একটি Image Modifier.aspectRatio(16f/9f) এর ব্যবহার।

কালার ফিল্টার: ছবির পিক্সেলের রঙ পরিবর্তন করে

Image কম্পোজেবল-এ একটি 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)
)

হলুদ আভা দেওয়া একটি বাসের ছবি।
চিত্র ৭। BlendMode.SrcIn সহ ColorFilter.tint প্রয়োগ করা হয়েছে।

অন্যান্য BlendMode এর ফলে ভিন্ন ভিন্ন প্রভাব দেখা যায়। উদাহরণস্বরূপ, কোনো ছবিতে BlendMode.Darken সাথে Color.Green সেট করলে নিম্নলিখিত ফলাফল পাওয়া যায়:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken)
)

BlendMode.Darken ব্যবহার করে একটি কুকুরের গায়ে সবুজ আভা প্রয়োগ করা হয়েছে, যার ফলে সবুজের গাঢ়তর আভা তৈরি হয়েছে।
চিত্র ৮। Color.Green tint , 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) })
)

একটি কুকুরের উপর সাদা-কালো ফিল্টার প্রয়োগ করা হয়েছে, যার ফলে রঙের সমস্ত উজ্জ্বলতা মুছে গেছে।
চিত্র ৯। স্যাচুরেশন ০ সহ কালার ম্যাট্রিক্স (সাদা-কালো ছবি)।

একটি কম্পোজেবল 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 ব্যবহার করে ছবির উজ্জ্বলতা ও কনট্রাস্ট সমন্বয় করা হয়েছে।

একটি কম্পোজেবল 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))
)

একটি কুকুরের রঙ উল্টে দেওয়া হয়েছে, যা একটি নেতিবাচক-সদৃশ প্রভাব দেখাচ্ছে।
চিত্র ১১। ছবিতে বিপরীত রং।

একটি Image ঝাপসা করুন যা রচনাযোগ্য

কোনো ছবি ব্লার করতে, Modifier.blur() ব্যবহার করুন এবং radiusXradiusY উল্লেখ করুন, যা যথাক্রমে আনুভূমিক ও উল্লম্ব দিকে ব্লার ব্যাসার্ধ নির্দিষ্ট করে।

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))
        )
)

একটি কুকুরের উপর তীব্র ব্লার এফেক্ট প্রয়োগ করা হয়েছে, যার ফলে এটিকে অস্পষ্ট ও ফোকাসের বাইরে দেখাচ্ছে।
চিত্র ১২। একটি ছবিতে BlurEffect প্রয়োগ করা হয়েছে।

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

উদাহরণস্বরূপ, যদি আমরা পূর্ববর্তী ছবিতে BlurredEdgeTreatment Unbounded এ সেট করি, তাহলে ছবিটির প্রান্তগুলি স্পষ্ট হওয়ার পরিবর্তে ঝাপসা দেখাবে:

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))
)

একটি কুকুরের ঝাপসা ছবি, যেখানে ঝাপসা ভাবটি মূল ছবির সীমানা ছাড়িয়ে যাওয়ায় এর কিনারাগুলো অস্পষ্ট হয়ে গেছে।
চিত্র ১৩। BlurEdgeTreatment.Unbounded
{% হুবহু %} {% endverbatim %} {% হুবহু %} {% endverbatim %}