JavaFX | 셰이프(Shape)을 사용한 벡터 그래픽 | 경로(Path)로 복잡한 도형 생성


또 다른 복잡한 도형 그리는 방법으로 “경로(Path)“를 이용할 있다. 경로는 단번에 그리는 것과 같이 직선과 곡선을 그려 나가기로 도형을 작성하는 것이다.

이것은 “Path"클래스를 이용하여 작성한다. Path 인스턴스를 만들고 거기에 선 그래픽이 되는 인스턴스를 생성하고 설정하여 도형을 만들다. Path에 설정 할 수 있는 그래픽 부분은 “PathElement"라는 클래스의 서브 클래스로 다음과 같은 것이 있다.

드로잉 위치를 이동하는 MoveTo

new MoveTo(가로 위치, 세로 위치)

단번에 그려 그리기 위치를 이동하는 것이다. 인수로 지정된 위치에 렌더링 위치를 이동한다.

직선을 그리는 LineTo

new LineTo(종단 가로 위치, 종단 세로 위치)

현재 드로잉 위치에서 지정된 지점까지 직선을 그린다. 인수로 선의 종단이 되는 위치를 지정한다.

2 차 곡선을 그리는 QuadCurveTo

new new QuadCurveTo(CP 가로 위치, CP 세로 위치, 종단 가로 위치, 종단 세로 위치)

현재 드로잉 위치에서 2차 곡선을 그린다. 인수에는 컨트롤 포인트의 위치와 종료 위치를 지정한다.

3 차 곡선을 그리는 CubicCurveTo

new new QuadCurveTo(CP 가로 위치1, CP 세로 위치1, CP 가로 위치2, CP 세로 위치2, 종단 가로 위치, 종단 세로 위치)

현재 드로잉 위치에서 3차 곡선을 그린다. 인수에는 2개의 컨트롤 포인트의 위치와 종료 위치를 지정한다.

그럼, 실제 사용 예제를 보도록 하자. 아래의 목록은 아까의 샘플 createShape 메소드를 수정 한 것이다. 이것으로 두 개의 직선과 1개의 3차 곡선으로 이루어진 경로 도형을 만들고 표시한다.

public void createShape(Pane root){
    Path path = new Path();
    MoveTo mt1 = new MoveTo(50, 50);
    path.getElements().add(mt1);
    LineTo lt1 = new LineTo(250, 50);
    path.getElements().add(lt1);
    CubicCurveTo cc1 = new CubicCurveTo(250, 250,50, 50, 50, 250);
    path.getElements().add(cc1);
    LineTo lt2 = new LineTo(50, 50);
    path.getElements().add(lt2);
    path.setFill(Color.RED);
    root.getChildren().add(path);
}

여기에서는 Path 인스턴스를 만들고 MoveTo, LineTo, CubicCurveTo와 같은 인스턴스를 생성하지 포함되어 있다. 도형의 연결은 아래와 같이 한다.

path.getElements().add(mt1);

Path의 “getElements"메소드는 Path에 설정되어 있는 List(ObserbableList) 인스턴스를 얻기 위해 사용된다.

Path에는 이 List에 그리는 도형의 PathElement를 관리하고 여기에 add 메소드에서 인스턴스를 추가해 나갈 것으로 그리는 도형이 추가되어 간다. 단순한 도형의 조합으로 그릴 수 없는 복잡한 형상의 모양도 Path를 이용하면 그릴 수 있다.