JavaFX | Canvas 그래픽 그리기 | 그라데이션으로 채우기


도형을 그릴 때 잘 이해하고 싶은 것은 ‘채우기 방법 “이다. 이전에 setFill 등으로 색상 설정을 했지만, 이것은 “색을 지정하기"가 아니라는 것을 잊지 말아라. “채우기 방식"을 지정하는 것이며, 인수도 Color가 아니라, Color의 슈퍼 클래스인 “Paint"을 지정하도록 되어 있다.

결국은 Paint의 하위 클래스이라면, Color 이외의 것을 지정할 수 있는 것이다. 그 예로 “그라데이션"의 클래스를 지정하여 보기로 하자.

LinearGradient 클래스

이것은 직선적인 그라데이션을 이용하기위한 클래스이다. 한 지점에서 다른 지점으로 점진적으로 색이 변화 해 나가는 것을 만들 수 있다. 이는 다음과 같이 인스턴스를 생성한다.

변수 = new LinearGradient (시작 가로, 시작 세로,  종료 가로,  종료 세로, 부울, 반복 방식, 목록);
  • 시작 가로, 시작 세로 : 그라데이션의 시작 지점이다.
  • 종료 가로,  종료 세로 : 그라데이션의 종료 지점이다.
  • 부울 : 균일하게 색을 변화시켜 나갈 것인지를 나타낸다.
  • 반복 방식 : CycleMethod이라는 열거 형 값을 사용하여 지정한다.
  • 목록 : 색의 변화 정보를 배열로 모은 것이다. “Stop"이라는 클래스의 인스턴스 준비한다.

RadialGradient 클래스

이것은 원형으로 색상이 변화해 나가는 것이다. 지정한 중심 위치에서 원형으로 색상이 변화해 가는 표현이 가능하다. 이는 다음과 같이 인스턴스를 생성한다.

변수 = new RadialGradient (포커스 방향, 초점 거리,  중심 가로, 중심 세로, 반지름, 부울, 반복 방식, 목록);
  • 포커스 방향 : 원형의 중심에서 본 시작 위치의 방향이다.
  • 초점 거리 : 원형의 중심에서 본 시작 위치의 거리이다.
  • 중심 가로, 중심 세로 : 그라데이션의 원형의 중심 위치이다.
  • 반경 : 그라데이션의 반경이다.
  • 반복 방식 : CycleMethod 열거 형에 의한 반복 방식을 지정하는 것이다.

“포커스"라는 것은 시작 위치를 원형의 중심에서 겹치지 않도록 비켜 내기 위한 것이다. 이것으로 원형의 중심에서 어느쪽으로 얼마나 비켜 내지 여부를 지정하는 것으로, 그라데이션의 시작 위치를 조정할 수 있다.

CycleMethod 열거 형

반복 방식을 지정하는 것이다. 이것은 다음의 값이 포함되어 있으며, 그 중 하나를 지정한다.

  • NO_CYCLE : 반복 색을 변화시키지 않는다.
  • REFRECT : 시작 지점의 색상과 종료 지점의 색상을 왕복하고 반복 변화시킨다.
  • REPEAT : 시작 지점의 색상과 끝 지점의 색상에 있다는 변화를 거듭하고 있다.

이러한 그라데이션의 사용 예제는 아래와 같다.

package com.devkuma.javafx;
 
import java.net.URL;
import java.util.ResourceBundle;
 
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;

public class AppController implements Initializable {
    @FXML Canvas canvas;
    GraphicsContext gc;
     
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        gc = canvas.getGraphicsContext2D();
        draw();
    }
     
    void draw(){
        Stop[] stops1 = new Stop[] {
            new Stop(0, Color.RED),
            new Stop(1, Color.YELLOW)
        };
        LinearGradient gradient1 = new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops1);
        gc.setFill(gradient1);
        gc.fillRect(50, 50, 150, 150);
        Stop[] stops2 = new Stop[] {
            new Stop(0, Color.BLUE), 
            new Stop(0.5, Color.CYAN)
        };
        RadialGradient gradient2 = new RadialGradient(0, 0, 125, 125, 100, false, CycleMethod.NO_CYCLE, stops2);
        gc.setFill(gradient2);
        gc.fillOval(75, 75, 100, 100);
    }
}

여기에서는 LinearGradient으로 사각형을 그려서 그 안에 RadialGradient에 동그라미를 그리고 있다. 인수가 많기 때문에 어려울 것 보이지만, 하고 있는 것 자체는 비교적 간단하다.