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

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

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

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

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

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

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