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 )
বিভিন্ন 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) )
![CircleShape দিয়ে একটি ছবি ক্লিপ করা](https://developer.android.com/static/develop/ui/compose/images/graphics-clipcircle.png?authuser=1&hl=bn)
বৃত্তাকার কোণার আকৃতি - আপনি যে কোণগুলিকে বৃত্তাকার করতে চান তার আকারের সাথে 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 দিয়ে একটি ছবি ক্লিপ করা](https://developer.android.com/static/develop/ui/compose/images/graphics-roundedcorners.png?authuser=1&hl=bn)
এছাড়াও আপনি 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=1&hl=bn)
একটি 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=1&hl=bn)
আপনি যদি একটি গ্রেডিয়েন্ট সীমানা তৈরি করতে চান, আপনি চিত্রের চারপাশে একটি রংধনু গ্রেডিয়েন্ট সীমানা আঁকতে 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=1&hl=bn)
একটি কাস্টম আকৃতির অনুপাত সেট করুন
একটি চিত্রকে একটি কাস্টম আকৃতির অনুপাতে রূপান্তর করতে, একটি চিত্রের জন্য একটি কাস্টম অনুপাত প্রদান করতে 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=1&hl=bn)
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) )
![BlendMode.SrcIn এর সাথে ColorFilter.tint প্রয়োগ করা হয়েছে](https://developer.android.com/static/develop/ui/compose/images/graphics-bus.png?authuser=1&hl=bn)
অন্যান্য 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) )
![BlendMode.Darken সহ রঙ।সবুজ আভা](https://developer.android.com/static/develop/ui/compose/images/graphics-blendmode.png?authuser=1&hl=bn)
উপলব্ধ বিভিন্ন মিশ্রণ মোড সম্পর্কে আরও তথ্যের জন্য 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) }) )
![স্যাচুরেশন 0 সহ কালার ম্যাট্রিক্স (কালো এবং সাদা ছবি)](https://developer.android.com/static/develop/ui/compose/images/graphics-bw.png?authuser=1&hl=bn)
একটি কম্পোজেবল 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=1&hl=bn)
একটি 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=1&hl=bn)
কম্পোজেবল একটি 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)) ) )
![ছবিতে BlurEffect প্রয়োগ করা হয়েছে](https://developer.android.com/static/develop/ui/compose/images/graphics-blur.png?authuser=1&hl=bn)
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)) )
![BlurEdgeTreatment.Unbounded](https://developer.android.com/static/develop/ui/compose/images/graphics-unbounded.png?authuser=1&hl=bn)
আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
- গ্রাফিক্স মডিফায়ার
- ছবি লোড হচ্ছে {:#loading-images}
- উপাদান আইকন {:#material-icons}