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

รูปแบบรูปภาพ 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 รองรับชุดย่อยของคำสั่งกราฟิกเวกเตอร์ที่ปรับขนาดได้ (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