Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

กราฟิกในการเขียน

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

การวาดภาพพื้นฐานด้วยตัวปรับแต่งและ `DrawScope`

วิธีหลักในการวาดสิ่งต่างๆ ที่กำหนดเองใน Compose คือการใช้ตัวแก้ไข เช่น Modifier.drawWithContent, Modifier.drawBehind และ Modifier.drawWithCache

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

Spacer(
    modifier = Modifier
        .fillMaxSize()
        .drawBehind {
            // this = DrawScope
        }
)CanvasSnippets.kt

หากต้องการเพียง Composable ที่วาด คุณสามารถใช้ Composable Canvas ได้ คอมโพสิเบิล Canvas เป็น Wrapper ที่สะดวกสำหรับ Modifier.drawBehind คุณวาง Canvas ในเลย์เอาต์ในลักษณะเดียวกับที่ทำกับองค์ประกอบ UI อื่นๆ ของ Compose ภายในCanvas คุณสามารถวาดองค์ประกอบโดยควบคุมสไตล์และตำแหน่งได้อย่างแม่นยำ

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

ตัวแก้ไขการวาดทั้งหมดจะแสดง DrawScope ซึ่งเป็นสภาพแวดล้อมการวาดที่กำหนดขอบเขตซึ่งรักษาสถานะของตัวเองไว้ ซึ่งจะช่วยให้คุณตั้งค่าพารามิเตอร์สำหรับกลุ่มองค์ประกอบกราฟิกได้ DrawScope มีฟิลด์ที่มีประโยชน์หลายฟิลด์ เช่น size ซึ่งเป็นออบเจ็กต์ Size ที่ระบุมิติข้อมูลปัจจุบันของ DrawScope

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

Canvas(modifier = Modifier.fillMaxSize()) {
    val canvasQuadrantSize = size / 2F
    drawRect(
        color = Color.Magenta,
        size = canvasQuadrantSize
    )
}CanvasSnippets.kt

สี่เหลี่ยมผืนผ้าสีชมพูที่วาดบนพื้นหลังสีขาวซึ่งกินพื้นที่ 1 ใน 4 ของหน้าจอ — **รูปที่ 1** สี่เหลี่ยมผืนผ้าที่วาดโดยใช้ Canvas ใน Compose

ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวปรับแต่งการวาดต่างๆ ได้ในเอกสารประกอบตัวปรับแต่งกราฟิก

ระบบพิกัด

หากต้องการวาดบางอย่างบนหน้าจอ คุณต้องทราบออฟเซ็ต (x และ y) และขนาดของรายการ สำหรับวิธีการวาดหลายวิธีใน DrawScope ตำแหน่งและขนาดจะกำหนดโดยค่าพารามิเตอร์เริ่มต้น โดยทั่วไปพารามิเตอร์เริ่มต้นจะวางตำแหน่งรายการที่จุด [0, 0] บน Canvas และระบุ size เริ่มต้นที่เติมพื้นที่วาดทั้งหมด ดังตัวอย่างด้านบน คุณจะเห็นว่าสี่เหลี่ยมผืนผ้าอยู่ที่ด้านซ้ายบน หากต้องการปรับขนาดและตำแหน่งของรายการ คุณต้องเข้าใจระบบพิกัดใน Compose

จุดเริ่มต้นของระบบพิกัด ([0,0]) อยู่ที่พิกเซลซ้ายบนสุดในพื้นที่วาดภาพ x จะเพิ่มขึ้นเมื่อเลื่อนไปทางขวา และ y จะเพิ่มขึ้นเมื่อเลื่อนลง

ตารางกริดที่แสดงระบบพิกัดซึ่งแสดงด้านซ้ายบน [0, 0] และด้านขวาล่าง [ความกว้าง ความสูง] — **รูปที่ 2** ระบบพิกัดการวาด / ตารางกริดการวาด

ตัวอย่างเช่น หากต้องการวาดเส้นทแยงมุมจากมุมขวาบนของพื้นที่ Canvas ไปยังมุมซ้ายล่าง คุณสามารถใช้ฟังก์ชัน DrawScope.drawLine() และระบุออฟเซ็ตเริ่มต้นและสิ้นสุดด้วยตำแหน่ง x และ y ที่สอดคล้องกัน ดังนี้

Canvas(modifier = Modifier.fillMaxSize()) {
    val canvasWidth = size.width
    val canvasHeight = size.height
    drawLine(
        start = Offset(x = canvasWidth, y = 0f),
        end = Offset(x = 0f, y = canvasHeight),
        color = Color.Blue
    )
}CanvasSnippets.kt

การเปลี่ยนรูปแบบพื้นฐาน

DrawScope มีการเปลี่ยนรูปแบบเพื่อเปลี่ยนตำแหน่งหรือวิธีการดำเนินการคำสั่งการวาด

สเกล

ใช้ DrawScope.scale() เพื่อเพิ่มขนาดของการดำเนินการวาดตามปัจจัย การดำเนินการอย่าง scale() จะมีผลกับการดำเนินการวาดทั้งหมดภายใน Lambda ที่เกี่ยวข้อง ตัวอย่างเช่น โค้ดต่อไปนี้จะเพิ่ม scaleX เป็น 10 เท่า และ scaleY เป็น 15 เท่า

Canvas(modifier = Modifier.fillMaxSize()) {
    scale(scaleX = 10f, scaleY = 15f) {
        drawCircle(Color.Blue, radius = 20.dp.toPx())
    }
}CanvasSnippets.kt

วงกลมที่ปรับขนาดไม่สม่ำเสมอ — **รูปที่ 3** การใช้การดำเนินการปรับขนาดกับวงกลมใน Canvas

แปลภาษา

ใช้ DrawScope.translate() เพื่อเลื่อนการดำเนินการวาดขึ้น ลง ซ้าย หรือขวา ตัวอย่างเช่น โค้ดต่อไปนี้จะย้ายภาพวาดไปทางขวา 100 พิกเซลและขึ้นไป 300 พิกเซล

Canvas(modifier = Modifier.fillMaxSize()) {
    translate(left = 100f, top = -300f) {
        drawCircle(Color.Blue, radius = 200.dp.toPx())
    }
}CanvasSnippets.kt

วงกลมที่เลื่อนออกจากจุดศูนย์กลาง — **รูปที่ 4** การใช้การดำเนินการแปลกับวงกลมใน Canvas

หมุน

ใช้ DrawScope.rotate() เพื่อหมุนการดำเนินการวาดรอบจุดหมุน ตัวอย่างเช่น โค้ดต่อไปนี้จะหมุนสี่เหลี่ยมผืนผ้า 45 องศา

Canvas(modifier = Modifier.fillMaxSize()) {
    rotate(degrees = 45F) {
        drawRect(
            color = Color.Gray,
            topLeft = Offset(x = size.width / 3F, y = size.height / 3F),
            size = size / 3F
        )
    }
}CanvasSnippets.kt

โทรศัพท์ที่มีสี่เหลี่ยมผืนผ้าหมุน 45 องศาอยู่ตรงกลางหน้าจอ — **รูปที่ 5** เราใช้ `rotate()` เพื่อใช้การหมุนกับขอบเขตการวาดปัจจุบัน ซึ่งจะหมุนสี่เหลี่ยมผืนผ้า 45 องศา

ส่วนที่เว้นไว้

ใช้ DrawScope.inset() เพื่อปรับพารามิเตอร์เริ่มต้นของ DrawScope ปัจจุบัน โดยเปลี่ยนขอบเขตการวาดและแปลภาพวาดตามนั้น

Canvas(modifier = Modifier.fillMaxSize()) {
    val canvasQuadrantSize = size / 2F
    inset(horizontal = 50f, vertical = 30f) {
        drawRect(color = Color.Green, size = canvasQuadrantSize)
    }
}CanvasSnippets.kt

โค้ดนี้จะเพิ่มระยะห่างจากขอบให้กับคำสั่งการวาดได้อย่างมีประสิทธิภาพ ดังนี้

สี่เหลี่ยมผืนผ้าที่มีระยะห่างจากขอบโดยรอบ — **รูปที่ 6** กำลังใช้ส่วนแทรกกับคำสั่งการวาด

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

หากต้องการใช้การเปลี่ยนรูปแบบหลายรายการกับภาพวาด ให้ใช้ฟังก์ชัน DrawScope.withTransform() ซึ่งจะสร้างและใช้การเปลี่ยนรูปแบบเดียวที่รวมการเปลี่ยนแปลงทั้งหมดที่คุณต้องการ การใช้ withTransform() มีประสิทธิภาพมากกว่าการเรียกใช้การเปลี่ยนรูปแบบแต่ละรายการที่ซ้อนกัน เนื่องจากระบบจะดำเนินการเปลี่ยนรูปแบบทั้งหมดร่วมกันในการดำเนินการเดียว แทนที่ Compose จะต้องคำนวณและบันทึกการเปลี่ยนรูปแบบที่ซ้อนกันแต่ละรายการ

ตัวอย่างเช่น โค้ดต่อไปนี้ใช้ทั้งการเปลี่ยนตำแหน่งและการหมุนกับสี่เหลี่ยมผืนผ้า

Canvas(modifier = Modifier.fillMaxSize()) {
    withTransform({
        translate(left = size.width / 5F)
        rotate(degrees = 45F)
    }) {
        drawRect(
            color = Color.Gray,
            topLeft = Offset(x = size.width / 3F, y = size.height / 3F),
            size = size / 3F
        )
    }
}CanvasSnippets.kt

โทรศัพท์ที่มีสี่เหลี่ยมผืนผ้าหมุนอยู่ซึ่งเลื่อนไปด้านข้างของหน้าจอ — **รูปที่ 7** ใช้ `withTransform` เพื่อใช้ทั้งการหมุนและการเปลี่ยนตำแหน่ง โดยหมุนสี่เหลี่ยมผืนผ้าและเลื่อนไปทางซ้าย

การดำเนินการวาดทั่วไป

วาดข้อความ

หากต้องการวาดข้อความใน Compose โดยปกติแล้วคุณจะใช้ Composable Text อย่างไรก็ตาม หากคุณอยู่ใน DrawScope หรือต้องการวาดข้อความด้วยตนเองพร้อมการปรับแต่ง คุณสามารถใช้เมธอด DrawScope.drawText() ได้

หากต้องการวาดข้อความ ให้สร้าง TextMeasurer โดยใช้ rememberTextMeasurer และเรียกใช้ drawText ด้วยเครื่องมือวัด

val textMeasurer = rememberTextMeasurer()

Canvas(modifier = Modifier.fillMaxSize()) {
    drawText(textMeasurer, "Hello")
}CanvasSnippets.kt

แสดงคำว่า Hello ที่วาดบน Canvas — **รูปที่ 8** การวาดข้อความบน Canvas

วัดข้อความ

การวาดข้อความจะทำงานแตกต่างจากคำสั่งวาดอื่นๆ เล็กน้อย โดยปกติแล้ว คุณจะกำหนดขนาด (ความกว้างและความสูง) ให้กับคำสั่งวาดเพื่อวาดรูปร่าง/รูปภาพตามขนาดนั้น สำหรับข้อความ มีพารามิเตอร์บางอย่างที่ควบคุมขนาดของข้อความที่แสดงผล เช่น ขนาดแบบอักษร แบบอักษร การรวมอักษร และระยะห่างระหว่างตัวอักษร

เมื่อใช้ Compose คุณสามารถใช้ TextMeasurer เพื่อเข้าถึงขนาดข้อความที่วัดได้ โดยขึ้นอยู่กับปัจจัยข้างต้น หากต้องการวาดพื้นหลังด้านหลังข้อความ คุณสามารถใช้ข้อมูลที่วัดได้เพื่อดูขนาดของพื้นที่ที่ข้อความใช้

val textMeasurer = rememberTextMeasurer()

Spacer(
    modifier = Modifier
        .drawWithCache {
            val measuredText =
                textMeasurer.measure(
                    AnnotatedString(longTextSample),
                    constraints = Constraints.fixedWidth((size.width * 2f / 3f).toInt()),
                    style = TextStyle(fontSize = 18.sp)
                )

            onDrawBehind {
                drawRect(pinkColor, size = measuredText.size.toSize())
                drawText(measuredText)
            }
        }
        .fillMaxSize()
)CanvasSnippets.kt

ข้อมูลโค้ดนี้จะสร้างพื้นหลังสีชมพูบนข้อความ

ข้อความหลายบรรทัดที่ใช้พื้นที่ ⅔ ของพื้นที่ทั้งหมด โดยมีสี่เหลี่ยมผืนผ้าเป็นพื้นหลัง — **รูปที่ 9** ข้อความหลายบรรทัดที่กินพื้นที่ ⅔ ของพื้นที่ทั้งหมด โดยมีสี่เหลี่ยมผืนผ้าเป็นพื้นหลัง

การปรับข้อจำกัด ขนาดแบบอักษร หรือพร็อพเพอร์ตี้ใดๆ ที่ส่งผลต่อขนาดที่วัดได้จะส่งผลให้มีการรายงานขนาดใหม่ คุณสามารถกำหนดขนาดคงที่สำหรับทั้ง width และ height จากนั้นข้อความจะเป็นไปตาม TextOverflow ที่กำหนดไว้ ตัวอย่างเช่น โค้ดต่อไปนี้จะแสดงผลข้อความใน ⅓ ของความสูงและ ⅓ ของความกว้างของพื้นที่ Composable และตั้งค่า TextOverflow เป็น TextOverflow.Ellipsis ดังนี้

val textMeasurer = rememberTextMeasurer()

Spacer(
    modifier = Modifier
        .drawWithCache {
            val measuredText =
                textMeasurer.measure(
                    AnnotatedString(longTextSample),
                    constraints = Constraints.fixed(
                        width = (size.width / 3f).toInt(),
                        height = (size.height / 3f).toInt()
                    ),
                    overflow = TextOverflow.Ellipsis,
                    style = TextStyle(fontSize = 18.sp)
                )

            onDrawBehind {
                drawRect(pinkColor, size = measuredText.size.toSize())
                drawText(measuredText)
            }
        }
        .fillMaxSize()
)CanvasSnippets.kt

ตอนนี้ข้อความจะแสดงในข้อจำกัดโดยมีเครื่องหมายจุดไข่ปลาที่ส่วนท้าย

ข้อความที่วาดบนพื้นหลังสีชมพู โดยมีจุดไข่ปลาตัดข้อความ — **รูปที่ 10** `TextOverflow.Ellipsis` ที่มีข้อจำกัดคงที่ในการวัดข้อความ

วาดรูปภาพ

หากต้องการวาด ImageBitmap ด้วย DrawScope ให้โหลดรูปภาพโดยใช้ ImageBitmap.imageResource() แล้วเรียกใช้ drawImage:

val dogImage = ImageBitmap.imageResource(id = R.drawable.dog)

Canvas(modifier = Modifier.fillMaxSize(), onDraw = {
    drawImage(dogImage)
})CanvasSnippets.kt

รูปภาพสุนัขที่วาดบน Canvas — **รูปที่ 11** กำลังวาด`ImageBitmap`บน Canvas

วาดรูปร่างพื้นฐาน

DrawScope มีฟังก์ชันการวาดรูปทรงมากมาย หากต้องการวาดรูปร่าง ให้ใช้ฟังก์ชันการวาดที่กำหนดไว้ล่วงหน้าฟังก์ชันใดฟังก์ชันหนึ่ง เช่น drawCircle:

val purpleColor = Color(0xFFBA68C8)
Canvas(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    onDraw = {
        drawCircle(purpleColor)
    }
)CanvasSnippets.kt

API	เอาต์พุต
`drawCircle()`
`drawRect()`
`drawRoundedRect()`
`drawLine()`
`drawOval()`
`drawArc()`
`drawPoints()`

วาดเส้นทาง

เส้นทางคือชุดคำสั่งทางคณิตศาสตร์ที่ทำให้เกิดภาพวาดเมื่อดำเนินการ DrawScope สามารถวาดเส้นทางโดยใช้วิธี DrawScope.drawPath()

เช่น สมมติว่าคุณต้องการวาดรูปสามเหลี่ยม คุณสร้างเส้นทางด้วยฟังก์ชันต่างๆ เช่น lineTo() และ moveTo() โดยใช้ขนาดของพื้นที่วาดได้ จากนั้นเรียกใช้ drawPath() ด้วยเส้นทางที่สร้างขึ้นใหม่นี้เพื่อสร้างรูปสามเหลี่ยม

Spacer(
    modifier = Modifier
        .drawWithCache {
            val path = Path()
            path.moveTo(0f, 0f)
            path.lineTo(size.width / 2f, size.height / 2f)
            path.lineTo(size.width, 0f)
            path.close()
            onDrawBehind {
                drawPath(path, Color.Magenta, style = Stroke(width = 10f))
            }
        }
        .fillMaxSize()
)CanvasSnippets.kt

สามเหลี่ยมเส้นทางสีม่วงกลับหัวที่วาดใน Compose — **รูปที่ 12** การสร้างและวาด `Path` ใน Compose

กำลังเข้าถึงออบเจ็กต์ `Canvas`

เมื่อใช้ DrawScope คุณจะไม่มีสิทธิ์เข้าถึงออบเจ็กต์ Canvas โดยตรง คุณสามารถใช้ DrawScope.drawIntoCanvas() เพื่อเข้าถึงออบเจ็กต์ Canvas ที่คุณเรียกใช้ฟังก์ชันได้

ตัวอย่างเช่น หากคุณมี Drawable ที่กำหนดเองซึ่งต้องการวาดลงใน Canvas คุณสามารถเข้าถึง Canvas และเรียกใช้ Drawable#draw() โดยส่งออบเจ็กต์ Canvas เข้าไป

val drawable = ShapeDrawable(OvalShape())
Spacer(
    modifier = Modifier
        .drawWithContent {
            drawIntoCanvas { canvas ->
                drawable.setBounds(0, 0, size.width.toInt(), size.height.toInt())
                drawable.draw(canvas.nativeCanvas)
            }
        }
        .fillMaxSize()
)CanvasSnippets.kt

ShapeDrawable สีดำรูปวงรีขนาดเต็ม — **รูปที่ 13** กำลังเข้าถึง Canvas เพื่อวาด`Drawable`

ดูข้อมูลเพิ่มเติม

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

ตัวแก้ไขกราฟิก - ดูข้อมูลเกี่ยวกับตัวแก้ไขการวาดประเภทต่างๆ
แปรง - ดูวิธีปรับแต่งการวาดภาพเนื้อหา
เลย์เอาต์และกราฟิกที่กำหนดเองใน Compose - Android Dev Summit 2022 - ดูวิธีสร้าง UI ที่กำหนดเองใน Compose ด้วยเลย์เอาต์และกราฟิก
ตัวอย่าง JetLagged - ตัวอย่าง Compose ที่แสดงวิธีวาดกราฟที่กำหนดเอง

แนะนำสำหรับคุณ

หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
ตัวแก้ไขกราฟิก
กราฟิกใน Compose
เส้นการจัดแนวใน Jetpack Compose

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