JavaFX | 셰이프(Shape)을 사용한 벡터 그래픽 | 직선, 곡선의 셰이프
원형과 사각형은 아주 간단한 도형이지만, 더 복잡한 도형을 필요로 할 수도 있다. 이러한 경우에 사용되는 것이 “직선의 다각형(polygon)“이나 “곡선"같은 도형이다.
이러한 도형은 위치 정보에 대한 특성이 매우 많이 필요하며 그 만큼 작성도 복잡하게 된다. 다음 사용법을 대해 정리해보자.
직선 (다각형)의 모양 “Polygon”, “Polyline”
여러 점을 직선으로 연결하는 다각형을 그리기 위한 것이다. Polygon은 시작 지점과 끝 지점을 연결하는 “닫힌 도형"을 그리고, Polyline은 양 끝을 맺지 않는 “개방 된 도형"을 그린다. 기본적인 사용법은 모두 동일하다.
이러한 FXML로 작성하는 경우에는 시작 태그와 종료 태그 사이에 <points>라는 태그를 제공하고, 나아가 그 안에 <Double< 태그를 사용하여 각 위치의 가로 세로 위치 정보를 작성해 간다.
곡선 모양 “QuadCurve”, “CubicCurve”
곡선은 두 가지 모양이 있다. “QuadCurve"는 2차 곡선을 그리기 위한 것이다. 이것은 시작과 끝 지점의 2점 외에 1개의 컨트롤 포인트를 사용해 그려진다. Arc으로 그리는 원호 같은 곡선이다.
“CubicCurve"은 3차 곡선을 그리기 위한 것이다. 이것은 시작과 끝 지점의 다른 두 개의 컨트롤 포인트를 사용해 그려진다. 이른바 베지어 곡선(Bezier curves)이라고 불리는 것이 이에 해당된다.
이들은 시작점과 끝점, 그리고 컨트롤 포인트의 위치를 모든 속성으로 작성한다.
속성 | 설명 |
---|---|
startX | 시작 지점의 수평 위치를 지정한다. |
startY | 시작 지점의 수직 위치를 지정한다. |
endX | 종료 지점의 수평 위치를 지정한다. |
endY | 끝점의 세로 위치를 지정한다. |
QuadCurve의 경우
속성 | 설명 |
---|---|
controlX | 컨트롤 포인트의 수평 위치를 지정한다. |
controlY | 컨트롤 포인트의 세로 위치를 지정한다. |
CubicCurve의 경우
속성 | 설명 |
---|---|
controlX1 | 제 1 컨트롤 포인트의 수평 위치를 지정한다. |
controlY1 | 제 1 제어 포인트의 세로 위치를 지정한다. |
controlX2 | 제 2 컨트롤 포인트의 수평 위치를 지정한다. |
controlY2 | 제 2 제어 포인트의 세로 위치를 지정한다. |
아래 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>
태그를 사용하여 각 정점의 가로와 세로를 순서대로 작성되어 있다. 작성 방법이 조금 이해하기 어렵기 때문에 잘 태그의 구조를 이해하고 사용해야 한다.