कैनवस पर लेयर वाली इमेज दिखाने के लिए, सोर्स इमेज को ब्लेंड या ओवरले किया जा सकता है. उदाहरण के लिए, अलग-अलग बैकग्राउंड और फ़ोरग्राउंड ड्रॉबल को मिलाकर, यह देखा जा सकता है कि Android फ़्रेमवर्क, ऐप्लिकेशन आइकॉन कैसे जनरेट करता है. लेयर वाली इमेज दिखाने के लिए, आपको ये काम करने होंगे:
- कैनवस पर इमेज लेयर करना.
- सोर्स को ओवरले करें.
वर्शन के साथ काम करना
इसे लागू करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का minSDK एपीआई लेवल 21 या उससे ज़्यादा पर सेट हो.
डिपेंडेंसी
कैनवस पर इमेज लेयर करना
नीचे दिया गया कोड, दो सोर्स इमेज को एक-दूसरे के ऊपर लेयर करता है. इससे कैनवस पर ब्लेंड की गई इमेज रेंडर होती है:
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 } }
कोड के बारे में अहम जानकारी
OverlayImagePainter
का इस्तेमाल करता है. यह कस्टमPainter
लागू करने का तरीका है. इसका इस्तेमाल, सोर्स इमेज पर इमेज ओवरले करने के लिए किया जा सकता है. ब्लेंड मोड से यह कंट्रोल होता है कि इमेज को कैसे जोड़ा जाए. पहली इमेज, किसी और इमेज को ओवरराइट नहीं कर रही है. इसलिए, ब्लेंड मोड की ज़रूरत नहीं है. दूसरी इमेज काOverlay
ब्लेंड मोड, पहली इमेज के उन हिस्सों को ओवरराइट कर देता है जो दूसरी इमेज से कवर हो जाते हैं.DrawScope.onDraw()
को बदल दिया जाता है और इस फ़ंक्शन में दोनों इमेज को ओवरले किया जाता है.intrinsicSize
को बदल दिया जाता है, ताकि जोड़ी गई इमेज के मूल साइज़ की सही जानकारी दी जा सके.
ओवरले सोर्स इमेज
इस कस्टम पेंटर 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() )
कोड के बारे में अहम जानकारी
- जोड़ने के लिए चुनी गई इमेज,
OverlayImagePainter
का इस्तेमाल करके जोड़े जाने से पहले,ImageBitmap
इंस्टेंस के तौर पर लोड की जाती हैं. - इकट्ठा की गई इमेज को
Image
कॉम्पोज़ेबल की मदद से रेंडर किया जाता है. यह कॉम्पोज़ेबल, रेंडर करते समय सोर्स इमेज को इकट्ठा करने के लिए कस्टम पेंटर का इस्तेमाल करता है.
नतीजे
![कस्टम पेंटर, जो एक-दूसरे के ऊपर दो इमेज ओवरले करता है](https://developer.android.com/static/develop/ui/compose/images/graphics-rainbowoverlay.jpg?hl=hi)
Image
, जो कुत्ते की इमेज पर सेमी-ट्रांसपेरेंट रेनबो इमेज ओवरले करने के लिए, कस्टम Painter
का इस्तेमाल करता है.ऐसे संग्रह जिनमें यह गाइड शामिल है
यह गाइड, चुने गए क्विक गाइड के कलेक्शन का हिस्सा है. इसमें Android डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=hi)