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

รูปแบบรูปภาพ 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