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

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

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

صورة مقرّبة لكلب جولدن ريتريفر
الشكل 1. مثال على ملف JPEG

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

رمز بسيط بخطوط فنية لسلّة تسوّق مزوّدة بمقبض وسلّة وعجلتين
الشكل 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

السابق
جارٍ تحميل الصور
التالي
رموز المواد