JavaFX | 그래픽 특수 효과 | 트랜스포메이션(Transformation)

모양의 도형은 기본 형상은 매우 간단하다. 예를 들어 사각형이라면, 가로, 세로, 수평, 수직 선뿐이다. “조금 기울어 진 사각형"같은 컨포넌트는 없다. 그렇다면 이러한 것은 어떻게 만들면 될까?

그런 경우에는 “트랜스포메이션(transformation)“을 이용하면 된다. 이것은 모양의 표시를 이동, 회전, 확대, 축소하는 기능이다. 모양의 슈퍼 클래스에 해당하는 Node 클래스에는이를 위한 메소드가 다음과 같이 제공되고 있다.

평행 이동

"Node".setTranslateX(이동률);
"Node".setTranslateY(이동률);
"Node".setTranslateZ(이동률);

회전

"Node".setRotate(회전각도);

확대 축소

"Node".setScaleX(확대율);
"Node".setScaleY(확대율);
"Node".setScaleY(확대율);

평행 이동은 X, Y, Z 축이 각각의 방향으로 평행 이동하는 것이다 (왜 Z 축까지 있지? 라고 생각 하겠지만, 사실 JavaFX는 3D 그래픽 기능도 포함되어 있기 때문이다).

회전은 회전 각도를 지정한다. “역 회전은?“인 경우에는 마이너스의 각도를 지정하면 된다.

확대 축소도 역시 X, Y, Z 축이 각각의 방향으로 준비되어 있다. 이것은 확대율이므로, 1.0보다 크면 확대, 작으면 축소한다.

간단한 사용 예제는 다음과 같다. 지난번 만든 모양 생성 createShape 방법을 재작성하는 형태로 작성되어 있다.

public void createShape(Pane root){
    for(int i = 0;i < 100;i++){
        Rectangle r = new Rectangle(10, 10, 25, 25);
        r.setFill(Color.YELLOW);
        r.setStroke(Color.GREEN);
        r.setStrokeWidth(3);
        r.setRotate(10 * i);
        r.setTranslateX(5 * i);
        r.setTranslateY(2.5 * i);
        r.setScaleX(1 + 0.05 * i);
        root.getChildren().add(r);
    }
}

실행하면 사각형 모양이 조금씩 변화하면서 그려진다 것을 알 수 있다.

Rectangle를 작성하고 평행 이동, 회전, 확대하여 도형의 표시를 조금씩 밀어간다. new Rectangle로 만든 도형의 위치와 크기는 모두 동일하지만 표시는 조금씩 변화 해 나가는 것이다.