แสดงรูปภาพที่ตัดเป็นรูปทรง

คุณสามารถปรับรูปภาพให้พอดีกับรูปร่างที่ตัด และวาดเงารอบขอบของรูปร่างเพื่อให้ดูเป็นภาพ 3 มิติ เทคนิคนี้มีประโยชน์ในการสร้างการออกแบบ เช่น รูปโปรไฟล์และภาพปกผลิตภัณฑ์ หรือการแสดงโลโก้ที่มีรูปร่างที่กำหนดเอง

หากต้องการแสดงรูปภาพที่ตัดเป็นรูปทรง คุณต้องทำดังนี้

• สร้างรูปร่าง
• ตัดรูปภาพให้พอดีกับรูปร่าง

ความเข้ากันได้ของเวอร์ชัน

การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป

ทรัพยากร Dependency

สร้างรูปร่าง

โค้ดต่อไปนี้สร้างรูปร่างที่กําหนดเองซึ่งสามารถวาดและแสดงผลรูปหลายเหลี่ยมที่โค้งมนแบบไดนามิก

fun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) }
class RoundedPolygonShape(
    private val polygon: RoundedPolygon,
    private var matrix: Matrix = Matrix()
) : Shape {
    private var path = Path()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        path.rewind()
        path = polygon.toPath().asComposePath()
        matrix.reset()
        val bounds = polygon.getBounds()
        val maxDimension = max(bounds.width, bounds.height)
        matrix.scale(size.width / maxDimension, size.height / maxDimension)
        matrix.translate(-bounds.left, -bounds.top)

        path.transform(matrix)
        return Outline.Generic(path)
    }
}
ShapesSnippets.kt

ประเด็นสำคัญเกี่ยวกับรหัส

• RoundedPolygon.getBounds() กำหนดฟังก์ชันส่วนขยายในคลาส RoundedPolygon เพื่อคำนวณขอบเขต
• คลาส RoundedPolygonShape ใช้อินเทอร์เฟซ Shape ซึ่งช่วยให้คุณกำหนดรูปร่างที่กำหนดเอง (รูปหลายเหลี่ยมที่โค้งมน) ใน Jetpack Compose ได้
• รูปร่างใช้ Matrix เพื่อจัดการการดำเนินการปรับขนาดและการแปลเพื่อการแสดงผลที่ยืดหยุ่น
• ฟังก์ชัน createOutline() จะรับออบเจ็กต์ RoundedPolygon มาปรับขนาดและแปลให้พอดีกับขนาดที่กำหนด แล้วแสดงผลออบเจ็กต์ Outline ที่อธิบายรูปร่างสุดท้ายที่จะวาด

ตัดรูปภาพเป็นรูปทรง

โค้ดต่อไปนี้จะครอบตัดรูปภาพเป็นรูปหกเหลี่ยม และเพิ่มเงาตกกระทบเล็กน้อยเพื่อให้ภาพดูมีมิติ

val hexagon = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val clip = remember(hexagon) {
    RoundedPolygonShape(polygon = hexagon)
}
Box(
    modifier = Modifier
        .clip(clip)
        .background(MaterialTheme.colorScheme.secondary)
        .size(200.dp)
) {
    Text(
        "Hello Compose",
        color = MaterialTheme.colorScheme.onSecondary,
        modifier = Modifier.align(Alignment.Center)
    )
}
ShapesSnippets.kt

ประเด็นสำคัญเกี่ยวกับรหัส

• ออบเจ็กต์ RoundedPolygon และ RoundedPolygonShape ใช้เพื่อกำหนดและใช้รูปหกเหลี่ยมกับรูปภาพ
• โค้ดนี้ใช้ graphicsLayer เพื่อเพิ่มเงาตามระดับความสูงลงในรูปภาพ วิธีนี้จะช่วยสร้างความรู้สึกถึงความลึกและแยกภาพออกจากพื้นหลัง
• การใช้บล็อก remember จะเพิ่มประสิทธิภาพโดยทำให้ระบบคำนวณรูปร่างและคำจำกัดความการครอบตัดเพียงครั้งเดียวและจดจำไว้สำหรับการคอมโพสิชัน UI อีกครั้งในภายหลัง

ผลลัพธ์

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้

แสดงรูปภาพ

ดูเทคนิคการใช้ภาพสดใสที่ดึงดูดความสนใจเพื่อให้แอป Android ของคุณมีรูปลักษณ์ที่สวยงาม

คอลเล็กชันคู่มือฉบับย่อ

หากมีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ

ไปที่คำถามที่พบบ่อย แสดงความคิดเห็น