الصورة النقطية مقابل الصورة المتجهة

تنسيقا الصور الأكثر شيوعًا هما الصور النقطية والصور المتجهة.

يحتوي تنسيق الرسومات النقطية على وحدات بكسل: مربعات فردية صغيرة تحتوي على لون (مكوّن من قيم الأحمر والأخضر والأزرق والألفا). عند وضع الكثير من وحدات البكسل معًا، يمكن تكوين صورة مفصّلة جدًا، مثل صورة فوتوغرافية. تتميز الرسومات النقطية بدقة ثابتة (عدد ثابت من وحدات البكسل). هذا يعني أنّه عند زيادة حجم الصورة، تفقد تفاصيلها وقد تظهر وحدات البكسل. من الأمثلة على تنسيقات الرسومات النقطية JPEG وPNG وWEBP.

من ناحية أخرى، فإنّ الصور المتجهة هي تمثيلات رياضية قابلة لتغيير الحجم لعنصر مرئي على الشاشة. المتجه هو مجموعة من الأوامر التي تصف كيفية رسم الصورة على الشاشة، مثل خط أو نقطة أو تعبئة. عند تغيير حجم متجه على الشاشة، لن يفقد جودته لأنّ الصيغة الرياضية تحافظ على العلاقة بين الأوامر المختلفة. من الأمثلة الجيدة على ImageVectors هي رموز Material ، لأنّه يمكن تحديدها جميعًا باستخدام صيغ رياضية.

ImageBitmap

في Compose، يمكن تحميل صورة نقطية (يُشار إليها غالبًا باسم Bitmap) في آلة افتراضية ImageBitmap، ويكون BitmapPainter مسؤولاً عن رسم الصورة النقطية على الشاشة.

بالنسبة إلى حالات الاستخدام الأساسية، يمكن استخدام painterResource() لإنشاء ImageBitmap وعرض كائن Painter (في هذه الحالة، BitmapPainter):

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)
VectorVsBitmapSnippets.kt

إذا كنت بحاجة إلى مزيد من التخصيص (على سبيل المثال، تنفيذ أداة رسم مخصّصة ) وتحتاج إلى الوصول إلى ImageBitmap نفسه، يمكنك تحميله بالطريقة التالية:

val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)
VectorVsBitmapSnippets.kt

ImageVector

VectorPainter مسؤول عن رسم ImageVector على الشاشة. يتوافق ImageVector مع مجموعة فرعية من أوامر رسومات موجّهة يمكن تغيير حجمها (SVG). لا يمكن تمثيل جميع الصور كمتجهات (على سبيل المثال، لا يمكن تحويل الصور التي تلتقطها بالكاميرا إلى متجه).

يمكنك إنشاء ImageVector مخصّص إما من خلال استيراد ملف XML حالي للرسومات المتجهة (تم استيراده إلى "استوديو Android" باستخدام أداة الاستيراد) أو تنفيذ الفئة وإصدار أوامر المسار يدويًا.

بالنسبة إلى حالات الاستخدام الأساسية، يعمل painterResource() مع ImageVectors بالطريقة نفسها التي يعمل بها مع فئة ImageBitmap، ويعرض VectorPainter كنتيجة. يتولّى painterResource() تحميل VectorDrawables وBitmapDrawables في VectorPainter وBitmapPainter على التوالي. لتحميل VectorDrawable في صورة، استخدِم ما يلي:

Image(
    painter = painterResource(id = R.drawable.baseline_shopping_cart_24),
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)
VectorVsBitmapSnippets.kt

إذا كنت بحاجة إلى مزيد من التخصيص وتحتاج إلى الوصول إلى ImageVector نفسه، يمكنك تحميله بالطريقة التالية:

val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)
VectorVsBitmapSnippets.kt