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

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

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

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

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

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

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

ImageVector

VectorPainter มีหน้าที่วาด ImageVector ลงบนหน้าจอ ImageVector รองรับชุดคำสั่งย่อยของ Scalable Vector Graphics (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