Path ใน Android — คืออะไร เมธอดการสร้างและวิธีการวาด

Path ใน Android คืออะไร?

Path คือคลาสจากแพ็คเกจ android.graphics ที่แสดงลำดับของส่วนเส้นทาง: เส้นตรง เส้นโค้งเบซิเยร์กำลังสองและกำลังสาม แต่ละส่วนถูกเพิ่มโดยการเรียกหนึ่งในเมธอด moveTo/lineTo/quadTo/cubicTo

Path ทำงานร่วมกับ Canvas และ Paint อย่างใกล้ชิด Canvas.drawPath(path, paint) รับ Path ที่พร้อมแล้วและวาดด้วยการตั้งค่าแปรงปัจจุบัน นี่คือวิธีหลักในการวาดรูปร่างตามอำเภอใจที่นอกเหนือจากสี่เหลี่ยมผืนผ้าและวงกลม

แต่ละ Path ประกอบด้วยลำดับของจุดและประเภทของส่วน จุดถูกกำหนดในระบบพิกัด Canvas โดยที่แกน X ไปทางขวาและแกน Y ลงล่าง โดยค่าเริ่มต้น จุดกำเนิดคือมุมบนซ้ายของ View แต่สามารถเลื่อนได้ผ่าน Canvas.translate

การสร้างเส้น: moveTo และ lineTo

เมธอด moveTo ย้ายปากกาไปยังจุดที่ระบุโดยไม่ต้องวาดเส้น มันกำหนดตำแหน่งเริ่มต้นสำหรับส่วนถัดไป โดยไม่มี moveTo Path จะเริ่มต้นที่จุด (0,0)

lineTo — เส้นตรง

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

rLineTo และ rMoveTo เป็นเวอร์ชันสัมพัทธ์ของเมธอด พวกมันยอมรับออฟเซ็ต dx และ dy จากตำแหน่งปัจจุบันแทนพิกัดสัมบูรณ์

val path = Path().apply {
    moveTo(100f, 100f)     // จุดเริ่มต้น A
    lineTo(300f, 100f)     // A -> B
    lineTo(200f, 250f)     // B -> C
    close()                    // C -> A (ปิด)
}

เส้นโค้งเบซิเยร์: quadTo และ cubicTo

quadTo เพิ่มเส้นโค้งเบซิเยร์กำลังสองด้วยจุดควบคุมหนึ่งจุด เส้นโค้งกำลังสองถูกกำหนดโดยสามจุด: จุดเริ่มต้น (ตำแหน่งปัจจุบัน) จุดควบคุม และจุดสิ้นสุด

cubicTo — เส้นโค้งเบซิเยร์กำลังสาม

cubicTo เพิ่มเส้นโค้งเบซิเยร์กำลังสามด้วยจุดควบคุมสองจุด ให้ความยืดหยุ่นมากขึ้นเมื่อสร้างเส้นขอบที่ซับซ้อน

เพื่อความสะดวก มีเวอร์ชันสัมพัทธ์ rQuadTo และ rCubicTo ที่ยอมรับออฟเซ็ตจากตำแหน่งปัจจุบัน

รูปร่างสำเร็จรูป: วงกลม สี่เหลี่ยมผืนผ้า และส่วนโค้ง

addCircle เพิ่มวงกลมใน Path เป็นเส้นขอบใหม่ พารามิเตอร์: พิกัดศูนย์กลาง รัศมี และทิศทาง (CW — ตามเข็มนาฬิกา, CCW — ทวนเข็มนาฬิกา)

addRect และ addOval

addRect เพิ่มสี่เหลี่ยมผืนผ้าที่กำหนดโดยพิกัดของมุมบนซ้ายและมุมล่างขวา addOval เพิ่มวงรีที่จารึกในสี่เหลี่ยมผืนผ้าที่กำหนด addRoundRect เพิ่มสี่เหลี่ยมผืนผ้าที่มีมุมโค้งมน

arcTo เพิ่มส่วนโค้งของวงกลมหรือวงรี พารามิเตอร์: สี่เหลี่ยมผืนผ้าขอบเขต มุมเริ่มต้นในองศา มุมของส่วนโค้ง และแฟล็ก forceMoveTo

val path = Path().apply {
    addCircle(200f, 200f, 100f, Path.Direction.CW)
    addRect(50f, 50f, 150f, 150f, Path.Direction.CCW)
    addRoundRect(RectF(300f, 100f, 400f, 200f), 15f, 15f, Path.Direction.CW)
}

การดำเนินการบูลีนกับเส้นขอบ (Path Op)

Path.Op เป็นกลไกสำหรับการดำเนินการบูลีนบนเส้นขอบสองเส้น ซึ่งพร้อมใช้งานตั้งแต่ API 19 การดำเนินการที่รองรับ: UNION, INTERSECT, DIFFERENCE และ XOR

การประยุกต์ใช้ Path Op ในการออกแบบ

UNION รวมเส้นขอบสองเส้นเป็นหนึ่งเดียว INTERSECT เก็บเฉพาะพื้นที่ที่เป็นของทั้งสองเส้นขอบ DIFFERENCE ลบเส้นขอบที่สองออกจากเส้นขอบแรก XOR เก็บพื้นที่ที่เป็นของเส้นขอบเพียงเส้นเดียว

เมธอด op รับ Path สองเส้นและการดำเนินการ คืนค่า true หากผลลัพธ์ไม่ว่างเปล่า ความซับซ้อนในการคำนวณคือ O(n*m) โดยที่ n และ m คือจำนวนส่วนในแต่ละ Path

val circle = Path().apply { addCircle(0f, 0f, 100f, Path.Direction.CW) }
val square = Path().apply { addRect(RectF(-50f, -50f, 50f, 50f), Path.Direction.CW) }
val result = Path()
result.op(circle, square, Path.Op.DIFFERENCE) // วงกลมที่มีรูสี่เหลี่ยม

ตัวอย่างการสร้างรูปร่างที่ซับซ้อน

มาสร้างไอคอนหัวใจที่กำหนดเองโดยใช้ Path กัน รูปร่างถูกสร้าง จากส่วนโค้งสองส่วนและส่วนตรงสองส่วนโดยใช้ cubicTo

class HeartShape {

    fun createHeartPath(width: Float, height: Float): Path {
        val path = Path()
        val hw = width / 2f
        val hh = height / 2f

        path.moveTo(hw, hh + hh * 0.3f)
        path.cubicTo(hw, hh + hh * 0.6f, hw + hw * 0.5f, hh + hh * 0.5f, hw + hw * 0.5f, hh)
        path.cubicTo(hw + hw * 0.5f, hh * 0.5f, hw + hw * 0.2f, 0f, hw, hh * 0.2f)
        path.cubicTo(hw - hw * 0.2f, 0f, hw - hw * 0.5f, hh * 0.5f, hw - hw * 0.5f, hh)
        path.cubicTo(hw - hw * 0.5f, hh + hh * 0.5f, hw, hh + hh * 0.6f, hw, hh + hh * 0.3f)
        path.close()
        return path
    }
}

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

สำหรับการทดสอบรูปร่าง คุณสามารถเปิดการเรนเดอร์ด้วย Paint.Style.STROKE ชั่วคราว — ซึ่งจะแสดงจุดควบคุมและส่วน Path ทั้งหมด