บิตแมปของรูปภาพเทียบกับเวกเตอร์ของรูปภาพ

รูปแบบรูปภาพที่พบบ่อยที่สุด 2 รูปแบบคือรูปภาพแรสเตอร์และรูปภาพเวกเตอร์

รูปแบบกราฟิกแรสเตอร์ประกอบด้วยพิกเซล ซึ่งเป็นสี่เหลี่ยมจัตุรัสเล็กๆ ที่มีสี (ประกอบด้วยค่าสีแดง เขียว น้ำเงิน และอัลฟ่า) เมื่อนำพิกเซลจำนวนมากมาวางรวมกัน ก็จะเกิดเป็นภาพที่มีรายละเอียดสูง เช่น ภาพถ่าย กราฟิกแรสเตอร์มีความละเอียดคงที่ (จำนวนพิกเซลคงที่) ซึ่งหมายความว่าเมื่อคุณเพิ่มขนาดรูปภาพ รูปภาพจะสูญเสียรายละเอียดและอาจเกิดภาพแตกแบบพิกเซลได้ ตัวอย่างรูปแบบกราฟิกแรสเตอร์ ได้แก่ JPEG, PNG และ WEBP

ในทางกลับกัน รูปภาพเวกเตอร์คือการแสดงภาพทางคณิตศาสตร์ที่ปรับขนาดได้ขององค์ประกอบภาพบนหน้าจอ เวกเตอร์คือชุดคำสั่งที่อธิบายวิธีวาดรูปภาพบนหน้าจอ เช่น เส้น จุด หรือการเติมสี เมื่อปรับขนาดเวกเตอร์บนหน้าจอ คุณภาพจะไม่ลดลงเนื่องจากสูตรทางคณิตศาสตร์จะรักษาความสัมพันธ์ระหว่างคำสั่งต่างๆ ไว้ ตัวอย่างที่ดีของ ImageVector คือสัญลักษณ์ 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

หากต้องการการปรับแต่งเพิ่มเติม (เช่น การติดตั้งใช้งาน CustomPainter) และต้องการเข้าถึง ImageBitmap คุณสามารถโหลดได้ด้วยวิธีต่อไปนี้

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

ImageVector

VectorPainter มีหน้าที่วาด ImageVector ลงในหน้าจอ ImageVector รองรับชุดย่อยของคำสั่งกราฟิกเวกเตอร์ที่ปรับขนาดได้ (SVG) รูปภาพบางรูปไม่สามารถแสดงเป็นเวกเตอร์ได้ (เช่น รูปภาพที่คุณถ่ายด้วยกล้องไม่สามารถแปลงเป็นเวกเตอร์ได้)

คุณสามารถสร้าง ImageVector ที่กำหนดเองได้โดยการนำเข้าไฟล์ XML ของ Vector Drawable ที่มีอยู่ (นำเข้าสู่ 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