Image
TouchGFX에서 Image는 연관된 이미지 파일에서 픽셀 데이터를 그립니다. 이미지 파일을 사용하려면 먼저 프로젝트로 가져와야 합니다.
Image의 크기는 연관된 이미지 파일에 따라 결정되며, 런타임에서 수정할 수 없습니다. 이미지를 다른 크기로 표시하려면 가져온 이미지 파일에서 연관된 이미지의 크기를 조정해야 합니다. 이렇게 해야 하는 이유는 성능 때문입니다.
런타임에서 이미지 크기를 조정해야 한다면 ScalableImage를 사용하십시오. 단, 크기가 조정된 이미지는 그렇지 않은 이미지보다 드로잉 성능이 크게 떨어집니다.
시뮬레이터에서 실행 중인 Image
위젯 그룹
Image는 TouchGFX Designer의 Images 위젯 그룹에 있습니다.
TouchGFX Designer의 Image
속성
TouchGFX Designer에서 Image의 속성은 다음과 같습니다.
| 속성 그룹 | 속성 설명 |
|---|---|
| Name | 위젯 이름입니다. 이는 TouchGFX Designer와 코드에서 사용되는 고유 식별자입니다. |
| Location | X 와 Y는 상위 노드를 기준으로 위젯의 왼쪽 상단 모퉁이를 지정합니다. W 와 H는 위젯의 가로 및 세로 길이를 지정합니다. 위젯의 크기는 연관된 이미지의 크기에 따라 결정됩니다. Lock은 현재의 X, Y, W, H 위치에서 위젯의 고정 여부를 지정합니다. 위젯을 현재 위치에 고정시키면 스크린을 통한 위젯 인터랙션도 비활성화됩니다. Visible은 위젯의 표시 여부를 지정합니다. 위젯을 보이지 않게 하면 스크린을 통한 위젯 인터랙션도 비활성화됩니다. |
| Style | Style은 위젯의 사전 설정을 지정합니다. 여기에서 선택하는 속성은 사전 설정 값으로 지정됩니다. 이 스타일에는 자유롭게 사용할 수 있는 이미지가 포함되어 있습니다. |
| Image | Image는 연관된 이미지를 지정합니다. Project 탭을 통해 가져온 이미지 중에서, 혹은 Skins 탭을 통해 무료 TouchGFX 이미지 세트 중에서 선택할 수 있습니다. |
| Appearance | Alpha는 위젯의 투명도를 지정합니다. 위젯의 알파 값 범위는 0부터 255까지입니다. 0은 완전 완전 투명을, 255는 불투명을 의미합니다.. |
| Mixins | Draggable은 런타임 시 위젯의 드래그 가능 여부를 지정합니다. ClickListener는 클릭했을 때 위젯의 콜백 실행 여부를 지정합니다. FadeAnimator는 위젯의 알파 값 변경에 대한 애니메이션 처리 여부를 지정합니다. MoveAnimator는 위젯의 X 및 Y 값 변경에 대한 애니메이션 처리 여부를 지정합니다. |
인터랙션
TouchGFX Designer의 Image에서 지원되는 액션과 트리거는 다음과 같습니다.
액션
| 표준 위젯 액션 | 설명 |
|---|---|
| Move widget | 시간이 지나면서 위젯을 새로운 위치로 이동시킵니다. |
| Fade widget | 시간이 지나면서 위젯의 알파 값을 변경합니다. |
| Hide widget | 위젯을 숨깁니다(visibility를 false로 설정). |
| Show widget | 숨긴 위젯이 보이도록 만듭니다(visibility를 true로 설정). |
트리거
Image는 트리거를 실행하지 않습니다.
성능
Image는 이미지 그리기에 따라 다르기 때문에 대부분의 플랫폼에서 속도가 빠른 위젯으로 알려져 있습니다.
이미지 Image 성능에 대한 자세한 내용은 일반 UI 구성요소 성능 섹션을 참조하십시오.
예제
생성 코드
View 기본 클래스의 생성 코드를 보면 TouchGFX Designer에서 Image가 어떻게 설정되는지 알 수 있습니다.
Screen1ViewBase.cpp
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include "BitmapDatabase.hpp"
Screen1ViewBase::Screen1ViewBase()
{
imageName.setXY(0, 0);
imageName.setBitmap(Bitmap(BITMAP_STM32_LOGO_ID));
add(imageName);
}
Tip
imageName.invalidate() 함수를 호출하여 강제로 다시 그리기를 해야 합니다.TouchGFX Designer Example
Image에 대해 자세히 알아보려면 TouchGFX Designer에서 다음 UI 템플릿을 사용해 새로운 애플리케이션을 생성하십시오.
TouchGFX Designer의 KnightHitsZombie Game UI 템플릿