JavaFX 2D 도형의 Stroke Line Join(선 연결) 속성 완벽 정리

여러 개의 선을 연결하여 만든 도형에서 stroke line join(스트로크 선 연결) 속성은 두 선이 만나는 지점, 즉 연결 부분의 모양을 지정하고 정의하는 역할을 합니다. 이 속성은 setStrokeLineJoin() 메서드를 사용하여 설정할 수 있습니다.

JavaFX는 StrokeLineJoin이라는 Enum의 세 가지 상수를 통해 다음과 같은 세 종류의 선 연결 방식을 지원합니다.

Stroke Line Join의 세 가지 유형

• BEVEL(베벨) — 교차점의 바깥쪽 모서리를 직선(line segment)으로 연결하여 마디가 잘린 형태의 연결부를 만듭니다.

• MITER(마이터) — 교차점의 바깥쪽 모서리를 그대로 이어 뾰족한 각진 모서리를 형성합니다.

• ROUND(라운드) — 교차점의 바깥쪽 모서리를 둥글게 처리하여 연결하며, 이때 둥근 곡선의 반지름은 선 두께(join width)의 정확히 절반이 됩니다.

예제 코드

아래 예제에서는 네 개의 마름모(Polygon)를 화면에 배치하고, 각각 원본 도형과 ROUND, BEVEL, MITER 방식이 적용된 도형을 비교하여 보여줍니다.

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.scene.shape.StrokeLineJoin;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class StrokeLineJoinExample extends Application {
    public void start(Stage stage) {
        Font font = Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 12);

        Text label1 = new Text("Original Image");
        label1.setFont(font);
        label1.setX(250.0);
        label1.setY(125.0);
        Polygon rhombus1 = new Polygon(300.0, 0.0, 250.0, 50.0, 300.0, 100.0, 350.0, 50.0);

        Text label2 = new Text("Line Join: Round");
        label2.setFont(font);
        label2.setX(25.0);
        label2.setY(275.0);
        Polygon rhombus2 = new Polygon(100.0, 150.0, 50.0, 200.0, 100.0, 250.0, 150.0, 200.0);
        rhombus2.setStroke(Color.BLUE);
        rhombus2.setStrokeWidth(20);
        rhombus2.setStrokeLineJoin(StrokeLineJoin.ROUND);

        Text label3 = new Text("Line Join: Bevel");
        label3.setFont(font);
        label3.setX(250.0);
        label3.setY(275.0);
        Polygon rhombus3 = new Polygon(300.0, 150.0, 250.0, 200.0, 300.0, 250.0, 350.0, 200.0);
        rhombus3.setStroke(Color.BLUE);
        rhombus3.setStrokeWidth(20.0);
        rhombus3.setStrokeLineJoin(StrokeLineJoin.BEVEL);

        Text label4 = new Text("Line Join: Miter");
        label4.setFont(font);
        label4.setX(430.0);
        label4.setY(275.0);
        Polygon rhombus4 = new Polygon(490.0, 150.0, 440, 200.0, 490.0, 250.0, 540.0, 200.0);
        rhombus4.setStroke(Color.BLUE);
        rhombus4.setStrokeWidth(20.0);
        rhombus4.setStrokeLineJoin(StrokeLineJoin.MITER);

        // Group 객체 생성
        Group root = new Group(label1, label2, label3, label4, rhombus1, rhombus2, rhombus3, rhombus4);

        // Scene 객체 생성
        Scene scene = new Scene(root, 595, 310);

        // Stage 제목 설정
        stage.setTitle("Stroke Line Join");

        // Stage에 Scene 추가
        stage.setScene(scene);

        // Stage 내용 표시
        stage.show();
    }

    public static void main(String args[]) {
        launch(args);
    }
}

실행 결과

위 코드를 실행하면 파란색 굵은 윤곽선이 적용된 마름모 도형들이 나타나며, 각 도형의 꼭짓점 연결 부분에서 ROUND는 부드럽게 둥근 모서리로, BEVEL은 사선으로 잘린 형태로, MITER는 뾰족한 각진 모서리로 처리된 것을 확인할 수 있습니다.