Android의 Path — 개념, 구성 메서드 및 그리기 방법

Android에서 Path란?

Path는 android.graphics 패키지의 클래스로, 직선, 2차 및 3차 베지어 곡선의 경로 세그먼트 시퀀스를 나타냅니다. 각 세그먼트는 moveTo/lineTo/quadTo/cubicTo 메서드 중 하나를 호출하여 추가됩니다.

Path는 Canvas 및 Paint와 긴밀하게 작동합니다. Canvas.drawPath(path, paint)는 준비된 Path를 가져와 현재 브러시 설정으로 그립니다. 이것은 직사각형과 원을 넘어 임의의 도형을 그리는 기본 방법입니다.

각 Path는 점과 세그먼트 유형의 시퀀스로 구성됩니다. 점은 X축이 오른쪽, Y축이 아래쪽인 Canvas 좌표계에서 정의됩니다. 기본적으로 원점은 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는 하나의 제어점이 있는 2차 베지어 곡선을 추가합니다. 2차 곡선은 세 점(시작, 제어, 끝)으로 정의됩니다.

cubicTo — 3차 베지어 곡선

cubicTo는 두 개의 제어점이 있는 3차 베지어 곡선을 추가하여 복잡한 윤곽선을 형성할 때 더 많은 유연성을 제공합니다.

편의를 위해 현재 위치에서 오프셋을 받는 상대 버전 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
    }
}

3차 곡선 cubicTo는 하트 각 절반의 모양을 정밀하게 제어할 수 있습니다. 첫 번째 곡선은 왼쪽 절반을 형성하고, 두 번째는 오른쪽 절반을 형성합니다. 아래쪽의 직선 세그먼트는 곡선을 하트의 꼭짓점에 연결합니다.

모양을 테스트하려면 일시적으로 Paint.Style.STROKE로 렌더링을 활성화하면 모든 제어점과 Path 세그먼트가 표시됩니다.