يمكنك دمج الصور المصدر أو تداخلها لعرض صور متعدّدة الطبقات على لوحة. على سبيل المثال، يمكنك تكرار الطريقة التي ينشئ بها إطار عمل Android رموز التطبيقات من خلال دمج عناصر قابلة للرسم منفصلة للخلفية والمقدمة. لعرض الصور المتعدّدة الطبقات، عليك اتّباع الخطوات التالية:
- إضافة طبقات من الصور على لوحة عرض
- ضع المصدر على الصورة.
توافق الإصدار
يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة SDK لمشروعك على المستوى 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() )
النقاط الرئيسية حول الرمز
- يتم تحميل كل صورة من الصور التي سيتم دمجها كمثيلات
ImageBitmap
قبل دمجها باستخدامOverlayImagePainter
. - يتم عرض الصور المجمّعة بواسطة عنصر
Image
قابل للتركيب يستخدم الرسام المخصّص لدمج الصور المصدر عند العرض.
النتائج
المجموعات التي تتضمّن هذا الدليل
هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول أهداف تطوير Android الأوسع نطاقًا: