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

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

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

• สร้างรูปร่าง
• ครอบตัดรูปภาพให้เป็นรูปร่าง

ผลลัพธ์

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

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

ความสัมพันธ์

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

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

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 มีรูปลักษณ์ที่สวยงาม

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

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

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

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