JavaFX | 셰이프(Shape)을 사용한 벡터 그래픽 | FXML 셰이프를 사용하기


Canvas를 사용한 그래픽 그리기는 Swing, AWT 등과 감각적으로는 비슷하다. 바꿔 말하자면, 그래픽 컨텍스트를 얻어서 렌더링 메소드를 호출하는 화면에 그리는 방식이다. 그려지는 그래픽은 단순한 비트맵 그래픽이다. 그 자체가 그리게 되면 그것으로 끝이다.

이러한 비트맵 그래픽과는 별도로, 벡터 그래픽 작업용 기능도 JavaFX에 포함되어 있다. 벡터 그래픽이라는 것은 위치나 크기 등의 그래픽 정보를 보유하고있는 도형이다. 그리고 난 후에 그것을 변경하고 위치 나 크기 등을 조작할 수 있다. 또한 데이터로 만들어 필요에 따라 그리고 고칠수 있기 때문에, 확대 축소해도 비트맵 그래픽처럼 도형이 거칠거나 하지 않는다.

이 벡터 그래픽은 javafx.scene.shape라는 패키지에 포함되어 있다. 이것은 FXML 태그로 사용할 수 있다. 그러면 실제로 간단한 사용 예를 살펴 보자.

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.shape.*?>
<Pane xmlns="http://javafx.com/javafx"
    xmlns:fx="http://javafx.com/fxml"
    fx:controller="com.tuyano.libro.AppController">
    <Rectangle x="50" y="50" width="100" height="100"
        fill="RED" stroke="BLUE" strokeWidth="5"/>
    <Circle centerX="150" centerY="150" radius="50"
        fill="GREEN" stroke="CYAN" strokeWidth="5"/>
</Pane>

위에 예제는 사각형과 원형 모양을 표시하는 것이다. 이를 FXML 파일에 작성하고 Java에서 로드 Scne에 표시한다. 예를 들어, app.fxml라는 파일로 생성했다면 아래와 같은 식으로 실행하면 된다.

Scene scene = new Scene(FXMLLoader.load(getClass().getResource("app.fxml")),300,300);
stage.setScene(scene);
stage.show();

여기에서는 빨간색 사각형과 녹색의 원형이 윈도우에 표시된다. 이번에는 셰이프(Shape)을 사용하여 윈도우에서 자유롭게 그래픽을 배치하기 때문에 <BorderLayout> 같은 레이아웃 컨테이너는 사용 의미가 없을 것이다. 그래서 <Pane>라는 컨테이너를 루트 태그로 지정하고 있다. <Pane>은 어떤 레이아웃 기능도 없는 가장 단순한 컨테이너이다. 셰이프처럼 레이아웃이 필요가 없는 컨포넌트를 배치할 때 이용하면 좋을 것이다.