JavaFX에서 경로(Path) 요소로 2차 곡선(Quadratic Curve) 만드는 방법

JavaFX에서 QuadCurveTo 클래스는 경로(Path)를 구성하는 요소 중 하나인 2차 곡선(quadratic curve)을 나타냅니다. 이 클래스를 활용하면 현재 좌표에서 지정된 새 좌표까지 부드럽게 휘어진 곡선을 손쉽게 그릴 수 있습니다.

2차 곡선 경로 요소 만드는 순서

1. QuadCurveTo 클래스의 인스턴스를 생성합니다.
2. setter 메서드를 사용하거나 생성자에 값을 직접 전달하여 속성을 설정합니다.
3. Path 클래스의 인스턴스를 생성합니다.
4. getElements() 메서드를 호출하여 앞서 만든 Path 객체의 관찰 가능한 리스트(observable list)를 가져옵니다.
5. add() 메서드를 사용해 생성한 QuadCurveTo 객체를 해당 리스트에 추가합니다.
6. 마지막으로 완성된 경로를 Group 객체에 추가하면 화면에 표시됩니다.

QuadCurveTo의 주요 속성

• x, y : 곡선이 도달할 끝점의 좌표입니다.
• controlX, controlY : 곡선의 휘어짐 방향과 정도를 결정하는 제어점(control point)의 좌표입니다.

예제 코드

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.QuadCurveTo;
import javafx.scene.shape.VLineTo;

public class QuadraticCurveToExample extends Application {
   public void start(Stage stage) {
      // 경로 요소 객체 생성
      MoveTo moveTo = new MoveTo(15, 15);
      LineTo line1 = new LineTo(100, 150);
      // QuadCurveTo 클래스 인스턴스 생성
      QuadCurveTo quadCurveTo = new QuadCurveTo();
      // QuadCurve 속성 설정
      quadCurveTo.setX(500.0f);
      quadCurveTo.setY(220.0f);
      quadCurveTo.setControlX(250.0f);
      quadCurveTo.setControlY(0.0f);
      // VLineTo 객체 생성
      VLineTo vLine = new VLineTo();
      vLine.setY(80);
      // Path 생성 후 요소 추가
      Path path = new Path();
      path.getElements().addAll(moveTo, line1, quadCurveTo, vLine);
      // 기타 속성 설정
      path.setStrokeWidth(8.0);
      path.setStroke(Color.DARKSLATEGREY);
      // Stage 객체 준비
      Group root = new Group(path);
      Scene scene = new Scene(root, 595, 300, Color.BEIGE);
      stage.setTitle("JavaFX Example");
      stage.setScene(scene);
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

실행 결과

위 코드를 실행하면 (15, 15)에서 시작해 (100, 150)까지 선분이 그려진 뒤, 제어점 (250, 0)의 영향을 받아 위로 볼록하게 휘어진 2차 곡선이 좌표 (500, 220)까지 이어집니다. 이후 수직 선분(VLineTo)이 y좌표 80까지 연결되어 하나의 경로가 완성되며, 이 경로는 굵기 8의 다크 슬레이트 그레이 색상으로 베이지색 배경 위에 표시됩니다.