কম্পোজে, একটি Painter
অবজেক্ট এমন কিছুকে উপস্থাপন করতে ব্যবহৃত হয় যা আঁকতে পারে (অ্যান্ড্রয়েডে সংজ্ঞায়িত Drawable
API-এর প্রতিস্থাপন) এবং এটি ব্যবহার করা সংশ্লিষ্ট কম্পোজেবলের পরিমাপ এবং লেআউটকে প্রভাবিত করে। একটি BitmapPainter
একটি ImageBitmap
নেয় যা স্ক্রিনে একটি Bitmap
আঁকতে পারে।
বেশিরভাগ ক্ষেত্রে ব্যবহারের ক্ষেত্রে, উপরে painterResource()
ব্যবহার করে সম্পদের (যেমন BitmapPainter
বা VectorPainter
) সঠিক পেইন্টার ফেরত দেয়। উভয়ের মধ্যে পার্থক্য সম্পর্কে আরও তথ্যের জন্য - ইমেজবিটম্যাপ বনাম ইমেজভেক্টর বিভাগটি পড়ুন।
একটি Painter
একটি DrawModifier
থেকে আলাদা, যা এটিকে দেওয়া সীমার মধ্যে কঠোরভাবে আঁকে এবং কম্পোজেবলের পরিমাপ বা বিন্যাসের উপর কোন প্রভাব নেই।
একটি কাস্টম পেইন্টার তৈরি করতে, Painter
ক্লাস প্রসারিত করুন এবং onDraw
পদ্ধতি প্রয়োগ করুন, যা কাস্টম গ্রাফিক্স আঁকার জন্য DrawScope
এ অ্যাক্সেসের অনুমতি দেয়। এছাড়াও আপনি intrinsicSize
ওভাররাইড করতে পারেন, যা কম্পোজেবলকে প্রভাবিত করতে ব্যবহার করা হবে যা এতে রয়েছে:
class OverlayImagePainter constructor( private val image: ImageBitmap, private val imageOverlay: ImageBitmap, private val srcOffset: IntOffset = IntOffset.Zero, private val srcSize: IntSize = IntSize(image.width, image.height), private val overlaySize: IntSize = IntSize(imageOverlay.width, imageOverlay.height) ) : Painter() { private val size: IntSize = validateSize(srcOffset, srcSize) override fun DrawScope.onDraw() { // draw the first image without any blend mode drawImage( image, srcOffset, srcSize, dstSize = IntSize( this@onDraw.size.width.roundToInt(), this@onDraw.size.height.roundToInt() ) ) // draw the second image with an Overlay blend mode to blend the two together drawImage( imageOverlay, srcOffset, overlaySize, dstSize = IntSize( this@onDraw.size.width.roundToInt(), this@onDraw.size.height.roundToInt() ), blendMode = BlendMode.Overlay ) } /** * Return the dimension of the underlying [ImageBitmap] as it's intrinsic width and height */ override val intrinsicSize: Size get() = size.toSize() private fun validateSize(srcOffset: IntOffset, srcSize: IntSize): IntSize { require( srcOffset.x >= 0 && srcOffset.y >= 0 && srcSize.width >= 0 && srcSize.height >= 0 && srcSize.width <= image.width && srcSize.height <= image.height ) return srcSize } }
এখন যেহেতু আমাদের কাস্টম Painter
আছে, আমরা আমাদের সোর্স ইমেজের উপরে যেকোন ইমেজ ওভারলে করতে পারি নিম্নরূপ:
val rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow) val dogImage = ImageBitmap.imageResource(id = R.drawable.dog) val customPainter = remember { OverlayImagePainter(dogImage, rainbowImage) } Image( painter = customPainter, contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier.wrapContentSize() )
একটি কাস্টম পেইন্টারের সাথে দুটি চিত্রকে একত্রিত করার আউটপুট নীচে দেখা যেতে পারে:
![কাস্টম পেইন্টার যা একে অপরের উপরে দুটি ছবি ওভারলে করে](https://developer.android.com/static/develop/ui/compose/images/graphics-rainbowoverlay.jpg?authuser=1&hl=bn)
একটি কাস্টম পেইন্টার ব্যবহার করা যেতে পারে Modifier.paint(customPainter)
এর সাথে একটি কম্পোজযোগ্য বিষয়বস্তুকে নিম্নরূপ আঁকতে:
val rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow) val dogImage = ImageBitmap.imageResource(id = R.drawable.dog) val customPainter = remember { OverlayImagePainter(dogImage, rainbowImage) } Box( modifier = Modifier.background(color = Color.Gray) .padding(30.dp) .background(color = Color.Yellow) .paint(customPainter) ) { /** intentionally empty **/ }{% শব্দার্থে %}
আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
- ইমেজবিটম্যাপ বনাম ইমেজভেক্টর {:#bitmap-vs-vector}
- রচনায় গ্রাফিক্স
- ছবি লোড হচ্ছে {:#loading-images}