JavaFX 2D 도형의 스트로크 대시 오프셋(strokeDashOffset) 속성 완벽 이해하기

JavaFX에서 2D 도형의 테두리 선에 대시(dash) 패턴을 적용하면, strokeDashOffset 속성을 사용해 대시 패턴의 시작 위치를 조절할 수 있습니다.

쉽게 말해, 대시 오프셋(dash phase)은 전체 대시 패턴 중 어느 지점부터 스트로크(선)가 시작될지를 결정하는 값입니다. 이 값을 변경하면 동일한 대시 패턴이라도 선이 그려지는 모양이 달라지므로, 점선 애니메이션 등 다양한 시각 효과를 구현할 때 유용하게 활용됩니다.

예제 코드

아래 예제에서는 두 개의 도형에 서로 다른 대시 오프셋 값을 적용해 차이를 확인합니다.

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;

public class StrokeDashOffset extends Application {
   public void start(Stage stage) {
      // 오프셋 5를 가진 선(Line)
      Line shape1 = new Line(25.0, 50.0, 565.0, 50.0);
      shape1.setStroke(Color.BROWN);
      shape1.setStrokeWidth(10);
      shape1.getStrokeDashArray().addAll(80.0, 70.0, 60.0, 50.0, 40.0);
      shape1.setStrokeDashOffset(5);

      // 오프셋 40을 가진 다각형(Polygon)
      Polygon shape2 = new Polygon(25.0, 150.0, 565.0, 150.0);
      shape2.setStroke(Color.CRIMSON);
      shape2.setStrokeWidth(10.0);
      shape2.getStrokeDashArray().addAll(80.0, 70.0, 60.0, 50.0, 40.0);
      shape2.setStrokeDashOffset(40);

      // Group 객체 생성
      Group root = new Group(shape1, shape2);

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

      // Stage 제목 설정
      stage.setTitle("Stroke Dash Offset Example");

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

      // Stage 표시
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

코드 설명

위 코드의 핵심 부분을 살펴보면 다음과 같습니다.

• getStrokeDashArray().addAll(): 대시 패턴을 정의합니다. 여기서는 80, 70, 60, 50, 40 크기의 세그먼트가 반복되는 패턴을 사용했습니다.
• setStrokeDashOffset(5): 첫 번째 선은 패턴의 5번째 위치부터 스트로크가 시작됩니다.
• setStrokeDashOffset(40): 두 번째 도형은 패턴의 40번째 위치부터 시작되므로, 첫 번째 선과 시각적으로 다른 대시 모양이 나타납니다.

실행 결과

프로그램을 실행하면 아래와 같이 두 도형에 서로 다른 대시 오프셋이 적용된 결과를 확인할 수 있습니다.

같은 대시 배열을 사용했음에도 불구하고 오프셋 값에 따라 선의 시작 패턴이 달라지는 것을 볼 수 있습니다. 이처럼 strokeDashOffset 속성을 활용하면 점선의 흐름 방향이나 시작 지점을 자유롭게 제어할 수 있습니다.