مقارنة بين ImageBitmap وImageVector

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

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

الشكل 1: مثال على ملف JPEG

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

الشكل 2: مثال على المتجه (امتدادات الملفات هي xml .أو محدّدة في رمز Kotlin)

ImageBitmap

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

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

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

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

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

ImageVector

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

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

في حالات الاستخدام البسيطة، تعمل painterResource() بالطريقة نفسها التي تعمل بها مع فئة ImageBitmap، كما تعمل مع ImageVectors، ما يؤدي إلى عرض 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