ใน Compose จะใช้วัตถุ Painter
เพื่อแสดงถึงสิ่งที่วาดได้
(การแทนที่ API Drawable
ที่กำหนดไว้ใน Android) และส่งผลต่อ
การวัดและการจัดวาง Composable ที่เกี่ยวข้องที่กำลังใช้ ต
BitmapPainter
จะใช้ ImageBitmap
ที่วาดรูป Bitmap
บนหน้าจอได้
สำหรับกรณีการใช้งานส่วนใหญ่ การใช้ painterResource()
ด้านบนจะแสดงค่าที่ถูกต้อง
สำหรับชิ้นงาน (เช่น BitmapPainter
หรือ VectorPainter
) สำหรับข้อมูลเพิ่มเติม
ข้อมูลเกี่ยวกับความแตกต่างระหว่างทั้งสอง - อ่านส่วน ImageBitmap กับ ImageVector
Painter
ต่างจาก DrawModifier
ซึ่งจะดึงได้ภายใน
จะกำหนดขอบเขตไว้ และไม่มีผลต่อการวัดหรือเลย์เอาต์ของ
Composable
หากต้องการสร้างภาพวาดที่กำหนดเอง ให้ขยายคลาส Painter
และนำ
onDraw
ซึ่งอนุญาตให้เข้าถึง DrawScope
เพื่อวาดแบบกำหนดเอง
กราฟิก คุณยังลบล้าง intrinsicSize
ได้ด้วย ซึ่งจะใช้เพื่อ
ส่งผลต่อ Composable ที่อยู่ใน:
class OverlayImagePainter constructor( private val image: ImageBitmap, private val imageOverlay: ImageBitmap, private val srcOffset: IntOffset = IntOffset.Zero, private val srcSize: IntSize = IntSize(image.width, image.height), private val overlaySize: IntSize = IntSize(imageOverlay.width, imageOverlay.height) ) : Painter() { private val size: IntSize = validateSize(srcOffset, srcSize) override fun DrawScope.onDraw() { // draw the first image without any blend mode drawImage( image, srcOffset, srcSize, dstSize = IntSize( this@onDraw.size.width.roundToInt(), this@onDraw.size.height.roundToInt() ) ) // draw the second image with an Overlay blend mode to blend the two together drawImage( imageOverlay, srcOffset, overlaySize, dstSize = IntSize( this@onDraw.size.width.roundToInt(), this@onDraw.size.height.roundToInt() ), blendMode = BlendMode.Overlay ) } /** * Return the dimension of the underlying [ImageBitmap] as it's intrinsic width and height */ override val intrinsicSize: Size get() = size.toSize() private fun validateSize(srcOffset: IntOffset, srcSize: IntSize): IntSize { require( srcOffset.x >= 0 && srcOffset.y >= 0 && srcSize.width >= 0 && srcSize.height >= 0 && srcSize.width <= image.width && srcSize.height <= image.height ) return srcSize } }
เมื่อมี Painter
ที่กำหนดเองแล้ว เราสามารถวางซ้อนรูปภาพใดก็ได้
รูปภาพต้นฉบับดังนี้
val rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow) val dogImage = ImageBitmap.imageResource(id = R.drawable.dog) val customPainter = remember { OverlayImagePainter(dogImage, rainbowImage) } Image( painter = customPainter, contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier.wrapContentSize() )
ดูเอาต์พุตของการรวมรูปภาพ 2 รูปกับโปรแกรมวาดภาพที่กําหนดเองได้ที่ด้านล่าง
จิตรกรที่กำหนดเองยังสามารถใช้กับ Modifier.paint(customPainter)
เพื่อวาดเนื้อหาลงใน Composable ดังนี้
val rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow) val dogImage = ImageBitmap.imageResource(id = R.drawable.dog) val customPainter = remember { OverlayImagePainter(dogImage, rainbowImage) } Box( modifier = Modifier.background(color = Color.Gray) .padding(30.dp) .background(color = Color.Yellow) .paint(customPainter) ) { /** intentionally empty **/ }
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- ImageBitmap กับ ImageVector {:#bitmap-vs-vector}
- กราฟิกในการเขียน
- กำลังโหลดรูปภาพ {:#loading-images}