ตัวปรับแต่งกราฟิก

นอกจากคอมโพสได้ Canvas แล้ว Compose ยังมี กราฟิก Modifiers ที่มีประโยชน์หลายอย่างซึ่งช่วยในการวาดเนื้อหาที่กำหนดเอง Modifier เหล่านี้มีประโยชน์เนื่องจากสามารถนำไปใช้กับคอมโพสได้ทุกรายการ

Modifier สำหรับการวาด

คำสั่งการวาดทั้งหมดจะดำเนินการด้วย Modifier สำหรับการวาดใน Compose โดยมี Modifier สำหรับการวาดหลักๆ 3 รายการใน Compose ดังนี้

• drawWithContent
• drawBehind
• drawWithCache

Modifier พื้นฐานสำหรับการวาดคือ drawWithContent ซึ่งคุณสามารถกำหนดลำดับการวาดของคอมโพสได้และคำสั่งการวาดที่ออกภายใน Modifier drawBehind เป็น Wrapper ที่สะดวกสำหรับการใช้ drawWithContent ซึ่งมีการตั้งค่าลำดับการวาดไว้ด้านหลังเนื้อหาของคอมโพส drawWithCache จะเรียกใช้ onDrawBehind หรือ onDrawWithContent ภายในตัวเอง และมีกลไกสำหรับการแคชออบเจ็กต์ที่สร้างขึ้นในฟังก์ชันเหล่านั้น

Modifier.drawWithContent: เลือกคำสั่งการวาด

Modifier.drawWithContent ช่วยให้คุณ ดำเนินการ DrawScope ก่อนหรือหลังเนื้อหาของ คอมโพสได้ อย่าลืมเรียกใช้ drawContent เพื่อแสดงเนื้อหาจริงของคอมโพส Modifier นี้ช่วยให้คุณกำหนดลำดับการดำเนินการได้ หากต้องการให้เนื้อหาแสดงก่อนหรือหลังการดำเนินการวาดที่กำหนดเอง

ตัวอย่างเช่น หากต้องการแสดงการไล่ระดับสีแบบรัศมีไว้เหนือเนื้อหาเพื่อสร้างเอฟเฟกต์รูรูกุญแจไฟฉายใน UI คุณสามารถทำได้ดังนี้

var pointerOffset by remember {
    mutableStateOf(Offset(0f, 0f))
}
Column(
    modifier = Modifier
        .fillMaxSize()
        .pointerInput("dragging") {
            detectDragGestures { change, dragAmount ->
                pointerOffset += dragAmount
            }
        }
        .onSizeChanged {
            pointerOffset = Offset(it.width / 2f, it.height / 2f)
        }
        .drawWithContent {
            drawContent()
            // draws a fully black area with a small keyhole at pointerOffset that’ll show part of the UI.
            drawRect(
                Brush.radialGradient(
                    listOf(Color.Transparent, Color.Black),
                    center = pointerOffset,
                    radius = 100.dp.toPx(),
                )
            )
        }
) {
    // Your composables here
}
GraphicsModifiersSnippets.kt

รูปที่ 1: Modifier.drawWithContent ที่ใช้กับคอมโพสเพื่อสร้างประสบการณ์การใช้งาน UI แบบไฟฉาย

Modifier.drawBehind: การวาดด้านหลังคอมโพส

Modifier.drawBehind ช่วยให้คุณดำเนินการ DrawScope ด้านหลังเนื้อหาของคอมโพสที่วาดบนหน้าจอได้ หาก ดูการใช้งาน Canvas คุณอาจสังเกตเห็นว่า เป็นเพียง Wrapper ที่สะดวกสำหรับการใช้ Modifier.drawBehind

วิธีวาดสี่เหลี่ยมผืนผ้าที่มีมุมโค้งมนด้านหลัง Text

Text(
    "Hello Compose!",
    modifier = Modifier
        .drawBehind {
            drawRoundRect(
                Color(0xFFBBAAEE),
                cornerRadius = CornerRadius(10.dp.toPx())
            )
        }
        .padding(4.dp)
)
GraphicsModifiersSnippets.kt

ซึ่งจะให้ผลลัพธ์ดังนี้

รูปที่ 2: ข้อความและพื้นหลังที่วาดโดยใช้ Modifier.drawBehind

Modifier.drawWithCache: การวาดและการแคชออบเจ็กต์ที่วาด

Modifier.drawWithCache จะแคชออบเจ็กต์ที่สร้างขึ้นภายในตัวเอง ระบบจะแคชออบเจ็กต์ตราบใดที่ขนาดของพื้นที่การวาดเท่าเดิม หรือออบเจ็กต์สถานะที่อ่านไม่มีการเปลี่ยนแปลง Modifier นี้มีประโยชน์ในการปรับปรุงประสิทธิภาพของการเรียกใช้การวาด เนื่องจากไม่จำเป็นต้องจัดสรรออบเจ็กต์ใหม่ (เช่น Brush, Shader, Path เป็นต้น) ที่สร้างขึ้นในการวาด

หรือคุณจะแคชออบเจ็กต์โดยใช้ remember นอก Modifier ก็ได้ อย่างไรก็ตาม วิธีนี้อาจทำไม่ได้เสมอไปเนื่องจากคุณอาจไม่มีสิทธิ์เข้าถึงการคอมโพส การใช้ drawWithCache อาจมีประสิทธิภาพมากกว่าหากใช้เฉพาะออบเจ็กต์สำหรับการวาด

หมายเหตุ: ให้ใช้ Modifier.drawWithCache เฉพาะเมื่อสร้างออบเจ็กต์ที่ต้อง แคช การใช้ Modifier นี้โดยไม่จำเป็นต้องแคชออบเจ็กต์อาจทำให้เกิดการจัดสรรแลมบ์ดาที่ไม่จำเป็น

ตัวอย่างเช่น หากคุณสร้าง Brush เพื่อวาดการไล่ระดับสีด้านหลัง Text การใช้ drawWithCache จะแคชออบเจ็กต์ Brush จนกว่าขนาดของพื้นที่การวาดจะเปลี่ยนไป

Text(
    "Hello Compose!",
    modifier = Modifier
        .drawWithCache {
            val brush = Brush.linearGradient(
                listOf(
                    Color(0xFF9E82F0),
                    Color(0xFF42A5F5)
                )
            )
            onDrawBehind {
                drawRoundRect(
                    brush,
                    cornerRadius = CornerRadius(10.dp.toPx())
                )
            }
        }
)
GraphicsModifiersSnippets.kt

รูปที่ 3: การแคชออบเจ็กต์ Brush ด้วย drawWithCache

Modifier กราฟิก

Modifier.graphicsLayer: ใช้การเปลี่ยนรูปแบบกับคอมโพส

Modifier.graphicsLayer เป็น Modifier ที่ทำให้เนื้อหาของคอมโพสวาดลงในเลเยอร์การวาด เลเยอร์มีฟังก์ชันต่างๆ ดังนี้

• การแยกคำสั่งการวาด (คล้ายกับ RenderNode) ไปไว้ในเลเยอร์ ซึ่งไปป์ไลน์การแสดงผลจะออกคำสั่งการวาดที่บันทึกไว้เป็นส่วนหนึ่งของเลเยอร์ได้อย่างมีประสิทธิภาพโดยไม่ต้องเรียกใช้โค้ดแอปพลิเคชันอีกครั้ง
• การเปลี่ยนรูปแบบที่มีผลกับคำสั่งการวาดทั้งหมดที่อยู่ในเลเยอร์
• การแรสเตอร์ไรซ์สำหรับความสามารถในการคอมโพส เมื่อแรสเตอร์ไรซ์เลเยอร์ ระบบจะดำเนินการตามคำสั่งการวาดและบันทึกเอาต์พุตลงในบัฟเฟอร์นอกหน้าจอ การคอมโพสบัฟเฟอร์ดังกล่าวสำหรับเฟรมต่อๆ ไปจะเร็วกว่า การดำเนินการตามคำสั่งแต่ละรายการ แต่จะทำงานเหมือนบิตแมปเมื่อ มีการใช้การเปลี่ยนรูปแบบ เช่น การปรับขนาดหรือการหมุน

การเปลี่ยนรูปแบบ

Modifier.graphicsLayer จะแยกคำสั่งการวาด เช่น คุณสามารถใช้การเปลี่ยนรูปแบบต่างๆ ได้โดยใช้ Modifier.graphicsLayer ซึ่งสามารถเคลื่อนไหวหรือแก้ไขได้โดยไม่ต้องเรียกใช้แลมบ์ดาการวาดอีกครั้ง

Modifier.graphicsLayer จะไม่เปลี่ยนขนาดหรือตำแหน่งที่วัดได้ของคอมโพส เนื่องจากมีผลเฉพาะในระยะการวาด ซึ่งหมายความว่าคอมโพสอาจซ้อนทับคอมโพสอื่นๆ หากวาดอยู่นอกขอบเขตเลย์เอาต์

หมายเหตุ: คุณควรใช้ Modifier เวอร์ชันแลมบ์ดาเมื่อทำการ เคลื่อนไหวหรือใช้ออบเจ็กต์ State เพื่ออัปเดตพร็อพเพอร์ตี้ graphicsLayer.

คุณสามารถใช้การเปลี่ยนรูปแบบต่อไปนี้กับ Modifier นี้ได้

การปรับขนาด - เพิ่มขนาด

scaleX และ scaleY จะขยายหรือย่อเนื้อหาในแนวนอนหรือแนวตั้งตามลำดับ ค่า 1.0f หมายถึงไม่มีการเปลี่ยนแปลงขนาด ส่วนค่า 0.5f หมายถึงครึ่งหนึ่งของมิติข้อมูล

Image(
    painter = painterResource(id = R.drawable.sunset),
    contentDescription = "Sunset",
    modifier = Modifier
        .graphicsLayer {
            this.scaleX = 1.2f
            this.scaleY = 0.8f
        }
)
GraphicsModifiersSnippets.kt

รูปที่ 4: scaleX และ scaleY ที่ใช้กับคอมโพส Image

การเลื่อน

คุณสามารถเปลี่ยน translationX และ translationY ด้วย graphicsLayer โดย translationX จะเลื่อนคอมโพสไปทางซ้ายหรือขวา ส่วน translationY จะเลื่อนคอมโพสขึ้นหรือลง

Image(
    painter = painterResource(id = R.drawable.sunset),
    contentDescription = "Sunset",
    modifier = Modifier
        .graphicsLayer {
            this.translationX = 100.dp.toPx()
            this.translationY = 10.dp.toPx()
        }
)
GraphicsModifiersSnippets.kt

รูปที่ 5: translationX และ translationY ที่ใช้กับ Image ด้วย Modifier.graphicsLayer

การหมุน

ตั้งค่า rotationX เพื่อหมุนในแนวนอน rotationY เพื่อหมุนในแนวตั้ง และ rotationZ เพื่อหมุนบนแกน Z (การหมุนมาตรฐาน) ค่านี้ระบุเป็นองศา (0-360)

Image(
    painter = painterResource(id = R.drawable.sunset),
    contentDescription = "Sunset",
    modifier = Modifier
        .graphicsLayer {
            this.rotationX = 90f
            this.rotationY = 275f
            this.rotationZ = 180f
        }
)
GraphicsModifiersSnippets.kt

รูปที่ 6: rotationX, rotationY และ rotationZ ที่ตั้งค่าใน Image โดย Modifier.graphicsLayer

ต้นทาง

คุณสามารถระบุ transformOrigin ได้ จากนั้นระบบจะใช้เป็นจุดเริ่มต้นของการเปลี่ยนรูปแบบ ตัวอย่างทั้งหมดที่ผ่านมาใช้ TransformOrigin.Center ซึ่งอยู่ที่ (0.5f, 0.5f) หากคุณระบุต้นทางที่ (0f, 0f) การเปลี่ยนรูปแบบจะเริ่มต้นจากมุมซ้ายบนของคอมโพส

หากคุณเปลี่ยนต้นทางด้วยการเปลี่ยนรูปแบบ rotationZ คุณจะเห็นว่ารายการหมุนรอบมุมซ้ายบนของคอมโพส

Image(
    painter = painterResource(id = R.drawable.sunset),
    contentDescription = "Sunset",
    modifier = Modifier
        .graphicsLayer {
            this.transformOrigin = TransformOrigin(0f, 0f)
            this.rotationX = 90f
            this.rotationY = 275f
            this.rotationZ = 180f
        }
)
GraphicsModifiersSnippets.kt

รูปที่ 7: การหมุนที่ใช้กับ TransformOrigin ที่ตั้งค่าเป็น 0f, 0f

การครอบตัดและรูปร่าง

รูปร่างจะระบุเส้นขอบที่เนื้อหาจะครอบตัดเมื่อ clip = true ในตัวอย่างนี้ เราตั้งค่ากล่อง 2 กล่องให้มีการครอบตัดที่แตกต่างกัน 2 แบบ โดยแบบหนึ่งใช้ตัวแปรการครอบตัด graphicsLayer และอีกแบบหนึ่งใช้ Wrapper ที่สะดวก Modifier.clip

Column(modifier = Modifier.padding(16.dp)) {
    Box(
        modifier = Modifier
            .size(200.dp)
            .graphicsLayer {
                clip = true
                shape = CircleShape
            }
            .background(Color(0xFFF06292))
    ) {
        Text(
            "Hello Compose",
            style = TextStyle(color = Color.Black, fontSize = 46.sp),
            modifier = Modifier.align(Alignment.Center)
        )
    }
    Box(
        modifier = Modifier
            .size(200.dp)
            .clip(CircleShape)
            .background(Color(0xFF4DB6AC))
    )
}
GraphicsModifiersSnippets.kt

เนื้อหาของกล่องแรก (ข้อความ "Hello Compose") จะถูกครอบตัดให้เป็นรูปร่างวงกลม

รูปที่ 8: การครอบตัดที่ใช้กับคอมโพส Box

หากคุณใช้ translationY กับวงกลมสีชมพูที่ด้านบน คุณจะเห็นว่าขอบเขตของคอมโพสยังคงเหมือนเดิม แต่วงกลมจะวาดอยู่ใต้วงกลมด้านล่าง (และอยู่นอกขอบเขตของวงกลมด้านล่าง)

รูปที่ 9: การครอบตัดที่ใช้กับ translationY และเส้นขอบสีแดงสำหรับเส้นขอบ

หากต้องการครอบตัดคอมโพสให้อยู่ในภูมิภาคที่วาด คุณสามารถเพิ่ม Modifier.clip(RectangleShape) อีกรายการหนึ่งที่จุดเริ่มต้นของเชน Modifier จากนั้นเนื้อหาจะยังคงอยู่ภายในขอบเขตเดิม

Column(modifier = Modifier.padding(16.dp)) {
    Box(
        modifier = Modifier
            .clip(RectangleShape)
            .size(200.dp)
            .border(2.dp, Color.Black)
            .graphicsLayer {
                clip = true
                shape = CircleShape
                translationY = 50.dp.toPx()
            }
            .background(Color(0xFFF06292))
    ) {
        Text(
            "Hello Compose",
            style = TextStyle(color = Color.Black, fontSize = 46.sp),
            modifier = Modifier.align(Alignment.Center)
        )
    }

    Box(
        modifier = Modifier
            .size(200.dp)
            .clip(RoundedCornerShape(500.dp))
            .background(Color(0xFF4DB6AC))
    )
}
GraphicsModifiersSnippets.kt

รูปที่ 10: การครอบตัดที่ใช้กับการเปลี่ยนรูปแบบ graphicsLayer

อัลฟ่า

คุณสามารถใช้ Modifier.graphicsLayer เพื่อตั้งค่า alpha (ความทึบ) สำหรับทั้งเลเยอร์ได้ 1.0f หมายถึงทึบแสงเต็มที่ และ 0.0f หมายถึงมองไม่เห็น

Image(
    painter = painterResource(id = R.drawable.sunset),
    contentDescription = "clock",
    modifier = Modifier
        .graphicsLayer {
            this.alpha = 0.5f
        }
)
GraphicsModifiersSnippets.kt

รูปที่ 11: รูปภาพที่มีการใช้ค่าอัลฟ่า

หมายเหตุ: เมื่อตั้งค่าอัลฟ่าให้น้อยกว่า 1.0f ระบบจะวาดเนื้อหาทั้งหมดของเลเยอร์ ลงในบัฟเฟอร์นอกหน้าจอ (หากไม่ได้ตั้งค่า CompositingStrategy เป็น ModulateAlpha) ดูข้อมูลเพิ่มเติมได้ที่ส่วน CompositingStrategy

กลยุทธ์การคอมโพส

การทำงานกับค่าอัลฟ่าและความโปร่งใสอาจไม่ง่ายเหมือนกับการเปลี่ยนค่าอัลฟ่าเพียงค่าเดียว นอกจากจะเปลี่ยนค่าอัลฟ่าแล้ว คุณยังมีตัวเลือกในการตั้งค่า CompositingStrategy ใน graphicsLayer ด้วย CompositingStrategy จะกำหนดวิธีคอมโพส (รวม) เนื้อหาของคอมโพสกับเนื้อหาอื่นๆ ที่วาดบนหน้าจอแล้ว

หมายเหตุ: CompositingStrategy เปิดตัวใน Compose 1.4.0-alpha02 แล้ว

กลยุทธ์ต่างๆ มีดังนี้

อัตโนมัติ (ค่าเริ่มต้น)

กลยุทธ์การคอมโพสจะกำหนดโดยพารามิเตอร์ที่เหลือgraphicsLayer โดยจะแสดงเลเยอร์ลงในบัฟเฟอร์นอกหน้าจอหากค่าอัลฟ่าน้อยกว่า 1.0f หรือมีการตั้งค่า RenderEffect เมื่อใดก็ตามที่ค่าอัลฟ่าน้อยกว่า 1f ระบบจะสร้างเลเยอร์การคอมโพสโดยอัตโนมัติเพื่อแสดงเนื้อหา แล้ววาดบัฟเฟอร์นอกหน้าจอนี้ลงในปลายทางด้วยค่าอัลฟ่าที่เกี่ยวข้อง การตั้งค่า a RenderEffect หรือการเลื่อนเกินขอบเขตจะแสดงเนื้อหาลงในบัฟเฟอร์นอกหน้าจอเสมอ ไม่ว่าคุณจะตั้งค่า CompositingStrategy เป็นอะไรก็ตาม

นอกหน้าจอ

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

ตัวอย่างการใช้ CompositingStrategy.Offscreen คือการใช้ BlendModes ในตัวอย่างต่อไปนี้ สมมติว่าคุณต้องการนำบางส่วนของคอมโพส Image ออกโดยออกคำสั่งการวาดที่ใช้ BlendMode.Clear หากคุณไม่ได้ตั้งค่า compositingStrategy เป็น CompositingStrategy.Offscreen BlendMode จะโต้ตอบกับเนื้อหาพื้นหลังทั้งหมด

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = "Dog",
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(120.dp)
        .aspectRatio(1f)
        .background(
            Brush.linearGradient(
                listOf(
                    Color(0xFFC5E1A5),
                    Color(0xFF80DEEA)
                )
            )
        )
        .padding(8.dp)
        .graphicsLayer {
            compositingStrategy = CompositingStrategy.Offscreen
        }
        .drawWithCache {
            val path = Path()
            path.addOval(
                Rect(
                    topLeft = Offset.Zero,
                    bottomRight = Offset(size.width, size.height)
                )
            )
            onDrawWithContent {
                clipPath(path) {
                    // this draws the actual image - if you don't call drawContent, it wont
                    // render anything
                    [e-mail]()
                }
                val dotSize = size.width / 8f
                // Clip a white border for the content
                drawCircle(
                    Color.Black,
                    radius = dotSize,
                    center = Offset(
                        x = size.width - dotSize,
                        y = size.height - dotSize
                    ),
                    blendMode = BlendMode.Clear
                )
                // draw the red circle indication
                drawCircle(
                    Color(0xFFEF5350), radius = dotSize * 0.8f,
                    center = Offset(
                        x = size.width - dotSize,
                        y = size.height - dotSize
                    )
                )
            }
        }
)
GraphicsModifiersSnippets.kt

การตั้งค่า CompositingStrategy เป็น Offscreen จะสร้างเท็กซ์เจอร์นอกหน้าจอเพื่อดำเนินการตามคำสั่ง (ใช้ BlendMode กับเนื้อหาของคอมโพสนี้เท่านั้น) จากนั้นจะแสดงผลไว้เหนือสิ่งที่แสดงผลบนหน้าจอแล้ว โดยไม่ส่งผลต่อเนื้อหาที่วาดไว้ก่อนหน้า

รูปที่ 12: Modifier.drawWithContent ในรูปภาพที่แสดงการระบุวงกลม โดยมี BlendMode.Clear และ CompositingStrategy.Offscreen อยู่ภายในแอป

หากคุณไม่ได้ใช้ CompositingStrategy.Offscreen ผลลัพธ์ของการใช้ BlendMode.Clear จะล้างพิกเซลทั้งหมดในปลายทาง ไม่ว่าคุณจะตั้งค่าอะไรไว้แล้วก็ตาม ทำให้บัฟเฟอร์การแสดงผลของหน้าต่าง (สีดำ) มองเห็นได้ BlendModes หลายรายการที่เกี่ยวข้องกับค่าอัลฟ่าจะไม่ทำงานตามที่คาดไว้หากไม่มีบัฟเฟอร์นอกหน้าจอ โปรดสังเกตวงแหวนสีดำรอบตัวบ่งชี้วงกลมสีแดง

รูปที่ 13: Modifier.drawWithContent ในรูปภาพที่แสดงการระบุวงกลม โดยมี BlendMode.Clear และไม่มีการตั้งค่า CompositingStrategy

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

รูปที่ 14: ไม่มีการตั้งค่า CompositingStrategy และใช้ BlendMode.Clear กับแอปที่มีพื้นหลังหน้าต่างโปร่งแสง โปรดสังเกตว่าวอลเปเปอร์สีชมพูแสดงผ่านพื้นที่รอบวงกลมสถานะสีแดง

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

@Composable
fun CompositingStrategyExamples() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .wrapContentSize(Alignment.Center)
    ) {
        // Does not clip content even with a graphics layer usage here. By default, graphicsLayer
        // does not allocate + rasterize content into a separate layer but instead is used
        // for isolation. That is draw invalidations made outside of this graphicsLayer will not
        // re-record the drawing instructions in this composable as they have not changed
        Canvas(
            modifier = Modifier
                .graphicsLayer()
                .size(100.dp) // Note size of 100 dp here
                .border(2.dp, color = Color.Blue)
        ) {
            // ... and drawing a size of 200 dp here outside the bounds
            drawRect(color = Color.Magenta, size = Size(200.dp.toPx(), 200.dp.toPx()))
        }

        Spacer(modifier = Modifier.size(300.dp))

        /* Clips content as alpha usage here creates an offscreen buffer to rasterize content
        into first then draws to the original destination */
        Canvas(
            modifier = Modifier
                // force to an offscreen buffer
                .graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)
                .size(100.dp) // Note size of 100 dp here
                .border(2.dp, color = Color.Blue)
        ) {
            /* ... and drawing a size of 200 dp. However, because of the CompositingStrategy.Offscreen usage above, the
            content gets clipped */
            drawRect(color = Color.Red, size = Size(200.dp.toPx(), 200.dp.toPx()))
        }
    }
}
GraphicsModifiersSnippets.kt

รูปที่ 15: CompositingStrategy.Auto เทียบกับ CompositingStrategy.Offscreen - การครอบตัดนอกหน้าจอให้อยู่ในภูมิภาค แต่การครอบตัดอัตโนมัติไม่เป็นเช่นนั้น

ModulateAlpha

กลยุทธ์การคอมโพสนี้จะปรับค่าอัลฟ่าสำหรับคำสั่งการวาด แต่ละรายการที่บันทึกไว้ภายใน graphicsLayer โดยจะไม่สร้างบัฟเฟอร์นอกหน้าจอสำหรับค่าอัลฟ่าน้อยกว่า 1.0f เว้นแต่จะมีการตั้งค่า RenderEffect จึงอาจมีประสิทธิภาพมากกว่าสำหรับการแสดงผลค่าอัลฟ่า อย่างไรก็ตาม กลยุทธ์นี้อาจให้ผลลัพธ์ที่แตกต่างกันสำหรับเนื้อหาที่ซ้อนทับกัน สำหรับกรณีการใช้งานที่ทราบล่วงหน้าว่าเนื้อหาไม่ซ้อนทับกัน กลยุทธ์นี้อาจให้ประสิทธิภาพที่ดีกว่า CompositingStrategy.Auto ที่มีค่าอัลฟ่าน้อยกว่า 1

ตัวอย่างต่อไปนี้แสดงกลยุทธ์การคอมโพสที่แตกต่างกัน โดยใช้ค่าอัลฟ่าที่แตกต่างกันกับคอมโพสส่วนต่างๆ และใช้กลยุทธ์ Modulate

@Preview
@Composable
fun CompositingStrategy_ModulateAlpha() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(32.dp)
    ) {
        // Base drawing, no alpha applied
        Canvas(
            modifier = Modifier.size(200.dp)
        ) {
            drawSquares()
        }

        Spacer(modifier = Modifier.size(36.dp))

        // Alpha 0.5f applied to whole composable
        Canvas(
            modifier = Modifier
                .size(200.dp)
                .graphicsLayer {
                    alpha = 0.5f
                }
        ) {
            drawSquares()
        }
        Spacer(modifier = Modifier.size(36.dp))

        // 0.75f alpha applied to each draw call when using ModulateAlpha
        Canvas(
            modifier = Modifier
                .size(200.dp)
                .graphicsLayer {
                    compositingStrategy = CompositingStrategy.ModulateAlpha
                    alpha = 0.75f
                }
        ) {
            drawSquares()
        }
    }
}

private fun DrawScope.drawSquares() {

    val size = Size(100.dp.toPx(), 100.dp.toPx())
    drawRect(color = Red, size = size)
    drawRect(
        color = Purple, size = size,
        topLeft = Offset(size.width / 4f, size.height / 4f)
    )
    drawRect(
        color = Yellow, size = size,
        topLeft = Offset(size.width / 4f * 2f, size.height / 4f * 2f)
    )
}

val Purple = Color(0xFF7E57C2)
val Yellow = Color(0xFFFFCA28)
val Red = Color(0xFFEF5350)
GraphicsModifiersSnippets.kt

รูปที่ 16: ModulateAlpha ใช้ค่าอัลฟ่าที่ตั้งค่ากับคำสั่งการวาดแต่ละรายการ

เขียนเนื้อหาของคอมโพสลงในบิตแมป

หมายเหตุ: ฟังก์ชัน rememberGraphicsLayer() ที่ใช้ในข้อมูลโค้ดนี้ใช้ได้เฉพาะใน Compose 1.7.0-alpha07 ขึ้นไป

กรณีการใช้งานทั่วไปคือการสร้าง Bitmap จากคอมโพส หากต้องการคัดลอกเนื้อหาของคอมโพสลงใน Bitmap ให้สร้าง GraphicsLayer โดยใช้ rememberGraphicsLayer()

เปลี่ยนเส้นทางคำสั่งการวาดไปยังเลเยอร์ใหม่โดยใช้ drawWithContent() และ graphicsLayer.record{} จากนั้นวาดเลเยอร์ใน Canvas ที่มองเห็นได้โดยใช้ drawLayer

val coroutineScope = rememberCoroutineScope()
val graphicsLayer = rememberGraphicsLayer()
Box(
    modifier = Modifier
        .drawWithContent {
            // call record to capture the content in the graphics layer
            graphicsLayer.record {
                // draw the contents of the composable into the graphics layer
                [e-mail]()
            }
            // draw the graphics layer on the visible canvas
            drawLayer(graphicsLayer)
        }
        .clickable {
            coroutineScope.launch {
                val bitmap = graphicsLayer.toImageBitmap()
                // do something with the newly acquired bitmap
            }
        }
        .background(Color.White)
) {
    Text("Hello Android", fontSize = 26.sp)
}
AdvancedGraphicsSnippets.kt

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

Modifier สำหรับการวาดที่กำหนดเอง

หากต้องการสร้าง Modifier ที่กำหนดเอง ให้ใช้อินเทอร์เฟซ DrawModifier ซึ่งจะให้สิทธิ์เข้าถึง ContentDrawScope ซึ่งเหมือนกับสิ่งที่แสดงเมื่อใช้ Modifier.drawWithContent() จากนั้นคุณสามารถแยกการดำเนินการวาดทั่วไปไปยัง Modifier สำหรับการวาดที่กำหนดเองเพื่อล้างโค้ดและจัดเตรียม Wrapper ที่สะดวก เช่น Modifier.background() เป็น DrawModifier ที่สะดวก

ตัวอย่างเช่น หากต้องการใช้ Modifier ที่พลิกเนื้อหาในแนวตั้ง คุณสามารถสร้างได้ดังนี้

class FlippedModifier : DrawModifier {
    override fun ContentDrawScope.draw() {
        scale(1f, -1f) {
            [e-mail]()
        }
    }
}

fun Modifier.flipped() = this.then(FlippedModifier())
GraphicsModifiersSnippets.kt

จากนั้นใช้ Modifier ที่พลิกนี้กับ Text

Text(
    "Hello Compose!",
    modifier = Modifier
        .flipped()
)
GraphicsModifiersSnippets.kt

รูปที่ 17: Modifier ที่พลิกที่กำหนดเองในข้อความ

แหล่งข้อมูลเพิ่มเติม

ดูตัวอย่างเพิ่มเติมเกี่ยวกับการใช้ graphicsLayer และการวาดที่กำหนดเองได้จากแหล่งข้อมูลต่อไปนี้

• Making Jellyfish move in Compose
• ADS 2022 Layouts and Graphics in Compose