JavaFX | 셰이프(Shape)을 사용한 벡터 그래픽 | 직선, 곡선의 셰이프

원형과 사각형은 아주 간단한 도형이지만, 더 복잡한 도형을 필요로 할 수도 있다. 이러한 경우에 사용되는 것이 “직선의 다각형(polygon)“이나 “곡선"같은 도형이다.

이러한 도형은 위치 정보에 대한 특성이 매우 많이 필요하며 그 만큼 작성도 복잡하게 된다. 다음 사용법을 대해 정리해보자.

직선 (다각형)의 모양 “Polygon”, “Polyline”

여러 점을 직선으로 연결하는 다각형을 그리기 위한 것이다. Polygon은 시작 지점과 끝 지점을 연결하는 “닫힌 도형"을 그리고, Polyline은 양 끝을 맺지 않는 “개방 된 도형"을 그린다. 기본적인 사용법은 모두 동일하다.

이러한 FXML로 작성하는 경우에는 시작 태그와 종료 태그 사이에 <points>라는 태그를 제공하고, 나아가 그 안에 <Double< 태그를 사용하여 각 위치의 가로 세로 위치 정보를 작성해 간다.

곡선 모양 “QuadCurve”, “CubicCurve”

곡선은 두 가지 모양이 있다. “QuadCurve"는 2차 곡선을 그리기 위한 것이다. 이것은 시작과 끝 지점의 2점 외에 1개의 컨트롤 포인트를 사용해 그려진다. Arc으로 그리는 원호 같은 곡선이다.

“CubicCurve"은 3차 곡선을 그리기 위한 것이다. 이것은 시작과 끝 지점의 다른 두 개의 컨트롤 포인트를 사용해 그려진다. 이른바 베지어 곡선(Bezier curves)이라고 불리는 것이 이에 해당된다.

이들은 시작점과 끝점, 그리고 컨트롤 포인트의 위치를 모든 속성으로 작성한다.

QuadCurve의 경우

CubicCurve의 경우

아래 Polygon과 CubicCurve을 표시하는 FXML 샘플이다.

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.shape.Ellipse?>
<?import javafx.scene.shape.Line?>
<?import javafx.scene.shape.Polygon?>
<?import javafx.scene.shape.CubicCurve?>
<Pane xmlns="http://javafx.com/javafx"
    xmlns:fx="http://javafx.com/fxml"
    fx:controller="com.devkuma.javafx.AppController">
 
    <Polygon fill="RED">
    <points>
        <Double fx:value="110.0" />
        <Double fx:value="10.0" />
        <Double fx:value="210.0" />
        <Double fx:value="20.0" />
        <Double fx:value="150.0" />
        <Double fx:value="100.0" />
    </points>
    </Polygon>
 
    <CubicCurve fill="YELLOW" stroke="BLUE" strokeWidth="5"
        startX="50" startY="50" endX="200" endY="200"
        controlX1="200" controlY1="50"
        controlX2="50" controlY2="200" />
 
</Pane>

<Polygon> 태그 안에 <points> 태그가 있고, 또 안에는 <Double> 태그를 사용하여 각 정점의 가로와 세로를 순서대로 작성되어 있다. 작성 방법이 조금 이해하기 어렵기 때문에 잘 태그의 구조를 이해하고 사용해야 한다.