(JavaFX) JavaFX ImageView 사용법 (이미지 전시 방법)

들어가며

• JavaFX ImageView를 사용하여 Image를 전시하는 방법에 대해서 알아보도록 하겠습니다.
• 테스트를 위해서는 Sample로 사용할 이미지가 필요하니 필요에 따라 준비하시면 좋습니다.

---

JavaFX ImageView

• JavaFX ImageView는 Image 클래스를 전시하기 위해 쓰이는 Node 클래스입니다.
• Image 전시시에 리사이징을 허용하며 소스 이미지에 뷰포트를 지정하는 방식으로 전시를 합니다.

ImageView (JavaFX 8)

주요 프로퍼티

• ImageView에서 주요한 프로퍼티들에 대한 개념을 설명하고자 합니다. 몇가지만 알면 간단하게 사용이 가능합니다.

fitWidth/Height

• 이미지 크기를 조정하는 사이즈 설정 값 (설정하는 경우 이미지가 사이즈에 맞추어 전시가 됨)
• 값 <= 0으로 설정하면 이미지의 고유 너비/높이가 사이즈로 사용됩니다

preserveRatio

• 이미지를 전시할 때 리사이징이 되는 경우 원본 이미지 사이즈 비율 유지 여부
• true로 설정하는 경우
  • fitHeight만 설정된 경우 width가 fitHeight에 맞춘 비율로 조정됨
  • fitWidth만 설정된 경우 width가 fitWidth에 맞춘 비율로 조정됨
  • 둘 다 설정하는 경우 비율을 유지한 상태로 너비를 높이에 맞춤
• false로 설정하는 경우
  • fitHeight, fitWidth 만 각각 설정 된 경우 설정된 대로 그대로(fitWidth, fitHeight 각각) 적용됨
  • 둘 다 설정하는 경우 설정한 사이즈로 각각 설정됨

smooth

• 이미지를 변환하거나 크기를 조정할 때 (예. 줌인 줌아웃 등등) 사용하는 품질 필터 알고리즘 사용 여부
  • true로 설정할 경우 더 나은 품질로 설정됨 (기본값은 플랫폼에 따라 다르게 설정된다고 함)
  • 이 부분은 나중에 이미지 줌인, 줌아웃 기능 구현방법을 다룰 때 자세히 보도록 하겠습니다.

---

JavaFX Image

• JavaFX Image 클래스는 그래픽 이미지를 나타내며 지정된 이미지URL 을 이미지 형태로 로드하는데 사용됩니다.
• 아래의 포맷들을 지원합니다.
  • BMP
  • GIF
  • JPEG
  • PNG
• 이미지를 로드할 때 이미지 크기를 조정할 수 있습니다. (예. 이미지에 사용되는 메모리 양 감소)
• URL이 지원하는 선에서 모든 URL을 생성자에 전달 할 수 있고 URL이 아니라 경로 형태인 경우 Class Path에서 이미지를 검색함
• GUI 형태로 Image를 로드하기 위해서는 ImageView를 사용해야 하고 여러 ImageView 에서 동일한 Image를 참조할 수 있습니다.

---

ImageView 사용예제

Image.fxml

• ImageView만 존재하는 레이아웃 형태로 만들어보겠습니다.
  • 준비한 Image크기에 적절하게 맞춰 fit Size를 800으로 설정함
• fx:root 사용에 관한 자세한 내용은 아래 포스트를 참고 해주세요

(JavaFX) FXML 작성 시 "" 를 사용하는 이유

<fx:root style="-fx-background-color: #A2A5AC;" type="AnchorPane" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" stylesheets="@../fx.css" prefWidth="800">
        <ImageView fx:id="imageView" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="20.0">
        </ImageView>
</fx:root>

 

---

ImageController.java

• 생성자를 통해서 imageFile 객체를 전달받는 방식입니다.
  • 주로 보통 애플리케이션 개발시에는 resource 폴더에 이미지를 넣고 사용함 (주석 부분 참고)

public class ImageController extends AnchorPane {
    @FXML
    private ImageView imageView;


    public ImageController(File imageFile) {
        FxUtil.initializeFont();
        FxUtil.loadFxml(this);
        initImage(imageFile);
    }

    private void initImage(File imageFile) {
        Image image = new Image(imageFile.toURI().toString());
        //resource 폴더에서 불러오는 방법
        //Image image = new Image(getClass().getResource("Test.png").toExternalForm());
        imageView.setImage(image);
    }
}

---

테스트

• Controller를 전시하는 테스트 코드를 추가해보겠습니다.

public class ImageControllerTest extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        File imageFile = new File("data/Test.png");
        ImageController imageController = new ImageController(imageFile);
        primaryStage.setScene(new Scene(imageController));
        primaryStage.setTitle("Image Test");
        primaryStage.show();
    }

    @Test
    public void test() {
        launch();
    }
}

• 아래와 같이 전시되는 것을 확인합니다.

---

preserveRatio 테스트

• ImageView의 hegith만 줄여본 뒤에 실행을 해보겠습니다. (preserveRatio는 설정을 안했기에 false인 상태)
  • 아래와 같이 비율이 지켜지지 않으면서 리사이징이 된 모습임

• 그렇다면 preserveRatio를 true로 설정한 다음 실행해보겠습니다.
  • 비율이 지켜진 모습

---

관련글

(JavaFX) TableView 데이터 CSV 형태로 Export 하는 방법

[JavaFX] JavaFX Window Close(X 버튼 클릭) 시에 종료 여부 Alert 전시 방법

[JavaFX] 실시간 업데이트 되는 Timer(시계) 컨트롤 구현 방법

(JavaFX) JavaFX TableView 사용법 ver.2