Path trong Android — khái niệm, phương thức xây dựng và cách vẽ

Path trong Android là gì?

Path là một lớp từ gói android.graphics đại diện cho một chuỗi các đoạn đường dẫn: đường thẳng, đường cong Bezier bậc hai và bậc ba. Mỗi đoạn được thêm bằng cách gọi một trong các phương thức moveTo/lineTo/quadTo/cubicTo.

Path hoạt động chặt chẽ với Canvas và Paint. Canvas.drawPath(path, paint) nhận một Path đã sẵn sàng và vẽ nó với cài đặt cọ hiện tại. Đây là cách chính để vẽ các hình dạng tùy ý vượt ra ngoài hình chữ nhật và hình tròn.

Mỗi Path bao gồm một chuỗi các điểm và loại đoạn. Các điểm được xác định trong hệ tọa độ Canvas, nơi trục X hướng sang phải và trục Y hướng xuống dưới. Theo mặc định, gốc tọa độ là góc trên bên trái của View, nhưng có thể được dịch chuyển qua Canvas.translate.

Xây dựng đường thẳng: moveTo và lineTo

Phương thức moveTo di chuyển bút đến điểm được chỉ định mà không vẽ đường thẳng. Nó đặt vị trí bắt đầu cho đoạn tiếp theo. Nếu không có moveTo, Path bắt đầu tại điểm (0,0).

lineTo — Đường thẳng

lineTo thêm một đoạn thẳng từ vị trí bút hiện tại đến điểm được chỉ định. Sau khi gọi lineTo, vị trí hiện tại di chuyển đến điểm cuối của đoạn.

rLineTo và rMoveTo là các phiên bản tương đối của các phương thức. Chúng chấp nhận độ dời dx và dy từ vị trí hiện tại thay vì tọa độ tuyệt đối.

val path = Path().apply {
    moveTo(100f, 100f)     // điểm bắt đầu A
    lineTo(300f, 100f)     // A -> B
    lineTo(200f, 250f)     // B -> C
    close()                    // C -> A (đóng)
}

Đường cong Bezier: quadTo và cubicTo

quadTo thêm một đường cong Bezier bậc hai với một điểm điều khiển. Đường cong bậc hai được xác định bởi ba điểm: bắt đầu (vị trí hiện tại), điều khiển và kết thúc.

cubicTo — Đường cong Bezier bậc ba

cubicTo thêm một đường cong Bezier bậc ba với hai điểm điều khiển, cung cấp nhiều linh hoạt hơn khi tạo các đường viền phức tạp.

Để thuận tiện, có các phiên bản tương đối rQuadTo và rCubicTo chấp nhận độ dời từ vị trí hiện tại.

Hình dạng có sẵn: Hình tròn, Hình chữ nhật và Cung tròn

addCircle thêm một hình tròn vào Path như một đường viền mới. Tham số: tọa độ tâm, bán kính và hướng (CW — theo chiều kim đồng hồ, CCW — ngược chiều kim đồng hồ).

addRect và addOval

addRect thêm một hình chữ nhật được xác định bởi tọa độ góc trên bên trái và góc dưới bên phải. addOval thêm một hình oval nội tiếp trong hình chữ nhật đã cho. addRoundRect thêm một hình chữ nhật với các góc bo tròn.

arcTo thêm một cung tròn hoặc elip. Tham số: hình chữ nhật bao quanh, góc bắt đầu tính bằng độ, góc cung và cờ 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)
}

Thao tác boolean với đường viền (Path Op)

Path.Op là cơ chế cho các thao tác boolean trên hai đường viền, có sẵn từ API 19. Các thao tác được hỗ trợ: UNION, INTERSECT, DIFFERENCE và XOR.

Áp dụng Path Op trong thiết kế

UNION kết hợp hai đường viền thành một. INTERSECT chỉ giữ lại khu vực thuộc cả hai đường viền. DIFFERENCE trừ đường viền thứ hai khỏi đường viền thứ nhất. XOR giữ lại các khu vực chỉ thuộc về một trong hai đường viền.

Phương thức op nhận hai Path và một thao tác, trả về true nếu kết quả không rỗng. Độ phức tạp tính toán là O(n*m), trong đó n và m là số lượng đoạn trong mỗi 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) // hình tròn có lỗ vuông

Ví dụ xây dựng hình dạng phức tạp

Hãy tạo một biểu tượng trái tim tùy chỉnh bằng Path. Hình dạng được xây dựng từ hai cung tròn và hai đoạn thẳng sử dụng 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
    }
}

Đường cong bậc ba cubicTo cho phép kiểm soát chính xác hình dạng của mỗi nửa trái tim. Đường cong đầu tiên tạo thành nửa trái, đường cong thứ hai — nửa phải. Các đoạn thẳng ở phía dưới kết nối các đường cong với đỉnh của trái tim.

Để kiểm tra hình dạng, bạn có thể tạm thời bật kết xuất với Paint.Style.STROKE — điều này sẽ hiển thị tất cả các điểm điều khiển và đoạn Path.