একটি ক্যানভাসে স্তরযুক্ত ছবি প্রদর্শন করুন

আপনি একটি ক্যানভাসে স্তরযুক্ত চিত্রগুলি প্রদর্শন করতে উত্স চিত্রগুলিকে মিশ্রিত বা ওভারলে করতে পারেন৷ উদাহরণস্বরূপ, আপনি আলাদা ব্যাকগ্রাউন্ড এবং ফোরগ্রাউন্ড ড্রয়েবলগুলিকে একত্রিত করে 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 সংমিশ্রণযোগ্য দ্বারা রেন্ডার করা হয় যা রেন্ডার করার সময় উত্স চিত্রগুলিকে একত্রিত করতে কাস্টম পেইন্টার ব্যবহার করে।

ফলাফল

কাস্টম পেইন্টার যা একে অপরের উপরে দুটি চিত্রকে ওভারলে করে
চিত্র 1 : একটি Image যা একটি কুকুরের চিত্রের উপর একটি আধা-স্বচ্ছ রংধনু চিত্রকে ওভারলে করতে একটি কাস্টম Painter ব্যবহার করে।

এই নির্দেশিকা ধারণকারী সংগ্রহ

এই নির্দেশিকাটি এই কিউরেট করা কুইক গাইড সংগ্রহের অংশ যা বৃহত্তর অ্যান্ড্রয়েড উন্নয়ন লক্ষ্যগুলি কভার করে:

আপনার অ্যান্ড্রয়েড অ্যাপটিকে একটি সুন্দর চেহারা এবং অনুভূতি দিতে উজ্জ্বল, আকর্ষক ভিজ্যুয়াল ব্যবহার করার কৌশলগুলি আবিষ্কার করুন৷

প্রশ্ন বা প্রতিক্রিয়া আছে

আমাদের প্রায়শই জিজ্ঞাসিত প্রশ্ন পৃষ্ঠায় যান এবং দ্রুত গাইড সম্পর্কে জানুন বা যোগাযোগ করুন এবং আপনার চিন্তাভাবনা আমাদের জানান।