תמונת מפת סיביות לעומת תמונה וקטורית

שני הסוגים הנפוצים ביותר של פורמטים של תמונות הם תמונות רסטר ותמונות וקטוריות.

פורמט של גרפיקה רסטרית מכיל פיקסלים: ריבועים קטנים שכל אחד מהם מכיל צבע (שמורכב מערכים של אדום, ירוק, כחול ואלפא). כשממקמים הרבה פיקסלים ביחד, אפשר ליצור תמונה מפורטת מאוד, כמו תמונה רגילה. לגרפיקה רסטרית יש רזולוציה קבועה (מספר קבוע של פיקסלים). המשמעות היא שככל שמגדילים את התמונה, היא מאבדת פרטים ועלולה להופיע בה פיקסליזציה. דוגמאות לפורמטים של גרפיקה רסטרית: JPEG,‏ PNG ו-WEBP.

תמונה בתקריב של כלב גולדן רטריבר.
איור 1. דוגמה לקובץ JPEG.

לעומת זאת, תמונות וקטוריות הן ייצוגים מתמטיים של אלמנטים חזותיים במסך, שאפשר לשנות את הגודל שלהם. וקטור הוא קבוצת פקודות שמתארות איך לצייר את התמונה על המסך – למשל, קו, נקודה או מילוי. כשמשנים את הגודל של וקטור במסך, האיכות שלו לא נפגעת כי הנוסחה המתמטית שומרת על הקשר בין הפקודות השונות. דוגמאות טובות ל-ImageVector הם הסמלים של 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 תומך בקבוצת משנה של פקודות Scalable Vector Graphics ‏ (SVG). לא ניתן לייצג את כל התמונות כווקטורים (לדוגמה, אי אפשר להפוך את התמונות שמצלמים עם המצלמה לווקטורים).

אפשר ליצור ImageVector מותאם אישית על ידי ייבוא של קובץ XML קיים של וקטור (שייוב ל-Android Studio באמצעות כלי הייבוא) או על ידי הטמעה של המחלקה והנפקת פקודות נתיב באופן ידני.

בתרחישי שימוש בסיסיים, המחלקה 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

הקודם
התמונות בטעינה
הבא
סמלים מהותיים