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

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

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

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

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