Compose में, Painter ऑब्जेक्ट का इस्तेमाल, ड्रॉ की जा सकने वाली किसी चीज़ को दिखाने के लिए किया जाता है. यह Android में तय किए गए Drawable एपीआई की जगह इस्तेमाल किया जाता है. साथ ही, यह उस कंपोज़ेबल के मेज़रमेंट और लेआउट पर असर डालता है जो इसका इस्तेमाल कर रहा है. BitmapPainter, ImageBitmap का इस्तेमाल करता है, जिससे स्क्रीन पर Bitmap बनाया जा सकता है.
ज़्यादातर मामलों में, painterResource() फ़ंक्शन का इस्तेमाल करने पर, ऐसेट के लिए सही पेंटर (जैसे, BitmapPainter या VectorPainter) मिलता है. दोनों के बीच के अंतर के बारे में ज़्यादा जानने के लिए, ImageBitmap बनाम ImageVector सेक्शन पढ़ें.
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() )
यहां दी गई इमेज में, कस्टम पेंटर की मदद से दो इमेज को जोड़ने का आउटपुट दिखाया गया है:
कस्टम पेंटर का इस्तेमाल 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 **/ }
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर, लिंक टेक्स्ट दिखता है
- ImageBitmap बनाम ImageVector {:#bitmap-vs-vector}
- Compose में ग्राफ़िक
- इमेज लोड करना {:#loading-images}