ImageBitmap กับ ImageVector

รูปแบบรูปภาพที่ใช้กันมากที่สุด 2 ประเภทคือ รูปภาพแรสเตอร์และรูปภาพเวกเตอร์

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

วันที่ ตัวอย่างไฟล์ JPEG
รูปที่ 1: ตัวอย่างไฟล์ JPEG

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

วันที่ ตัวอย่างเวกเตอร์ (นามสกุลไฟล์คือ .xml หรือกำหนดไว้ในโค้ด Kotlin)
รูปที่ 2: ตัวอย่างเวกเตอร์ (นามสกุลไฟล์เป็น .xml หรือกำหนดไว้ในโค้ด Kotlin)

ImageBitmap

ใน Compose รูปภาพแรสเตอร์ (มักเรียกว่า Bitmap) จะโหลดขึ้นได้ ลงในอินสแตนซ์ ImageBitmap และ BitmapPainter คือสิ่งที่รับผิดชอบในการ ที่วาดบิตแมปไปยังหน้าจอ

สำหรับกรณีการใช้งานแบบง่าย คุณสามารถใช้ painterResource() ซึ่งจะดูแล การสร้าง ImageBitmap และแสดงผลออบเจ็กต์ Painter (ในกรณีนี้ - a BitmapPainter)

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)

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

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

ImageVector

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

คุณสร้าง ImageVector ที่กำหนดเองได้ด้วยการนำเข้าเวกเตอร์ที่มีอยู่ ไฟล์ XML ที่ถอนออกได้ (นำเข้าไปยัง Android Studio โดยใช้เครื่องมือนำเข้า) หรือ การนำคำสั่งคลาสและการออกเส้นทางด้วยตนเอง

สำหรับกรณีการใช้งานทั่วไป จะทำงานแบบเดียวกับที่ painterResource() ทำงาน ImageBitmap ก็ใช้ได้กับ ImageVectors โดยส่งคืน ผลลัพธ์เป็น 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)
)

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

val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)