JavaFX 경로 요소로 3차 곡선(CubicCurve) 그리는 방법

CubicCurveTo 클래스는 JavaFX 경로 요소(path element) 중 하나인 3차 곡선(cubic curve)을 나타냅니다. 이 클래스를 사용하면 현재 좌표에서 지정한 새로운 좌표까지 두 개의 제어점(control point)을 통해 부드럽게 휘어진 3차 곡선을 그릴 수 있습니다.

경로 요소로 3차 곡선을 만들려면 다음 단계를 따르세요.

• CubicCurveTo 클래스를 인스턴스화합니다.

• setter 메서드를 사용하거나 생성자에 값을 전달하여 클래스의 속성 값을 설정합니다.

• Path 클래스를 인스턴스화합니다.

• getElements() 메서드를 사용해 앞서 만든 Path 객체의 관찰 가능 리스트(observable list)를 가져옵니다.

• add() 메서드를 사용해 앞서 생성한 CubicCurveTo 객체를 관찰 가능 리스트에 추가합니다.

• 마지막으로 Path 객체를 Group 객체에 추가합니다.

여기서 controlX1, controlY1과 controlX2, controlY2는 각각 첫 번째, 두 번째 제어점의 좌표로 곡선의 휘어지는 정도와 방향을 결정하며, x, y는 곡선이 도착하는 끝점 좌표입니다.

예제 코드

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.CubicCurveTo;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.VLineTo;

public class CubicCurveExample extends Application {
    public void start(Stage stage) {
        // 경로 요소(PathElement) 객체 생성
        MoveTo moveTo = new MoveTo(15, 15);
        LineTo line1 = new LineTo(100, 150);

        // CubicCurveTo 클래스 인스턴스화
        CubicCurveTo cubicCurveTo = new CubicCurveTo();

        // CubicCurveTo 클래스의 속성 설정
        cubicCurveTo.setControlX1(400.0f);
        cubicCurveTo.setControlY1(40.0f);
        cubicCurveTo.setControlX2(175.0f);
        cubicCurveTo.setControlY2(250.0f);
        cubicCurveTo.setX(500.0f);
        cubicCurveTo.setY(150.0f);

        // VLineTo 객체 생성
        VLineTo vLine = new VLineTo();
        vLine.setY(80);

        // Path 생성
        Path path = new Path();
        path.getElements().addAll(moveTo, line1, cubicCurveTo, 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);
    }
}

실행 결과

위 코드를 실행하면 시작점에서 직선이 그려진 뒤, 두 개의 제어점에 따라 휘어진 3차 곡선이 이어지고 마지막에 수직 선분으로 연결되는 경로가 화면에 나타납니다.