UI에서 이미지 사용

Image 컴포넌트는 PNG 및 JPEG와 같은 비트맵 형식, SVG와 같은 벡터 그래픽 형식을 포함하여 지원되는 여러 형식의 이미지를 UI에 추가하는 데 사용됩니다. 디자인에 이미지 파일을 사용하려면 먼저 해당 파일을 Assets에 추가해야 합니다:

1. ‘ Assets ’ > ‘ ’을 선택합니다.
2. 이미지 파일을 선택한 다음, ‘ Open ’를 선택합니다.
3. ' Add Resources ' 대화 상자에서 이미지를 저장할 위치를 선택합니다.
4. ' OK'을 선택합니다.

이제 이미지가 ‘ Assets ’에서 사용할 수 있게 되었습니다.

Assets 에서 Navigator 또는 2D 뷰로 이미지 파일을 드래그하면, Qt Quick Designer가 자동으로 Image 컴포넌트의 인스턴스를 생성하며, 이미지 파일의 경로는 Properties 의 Source 필드의 값으로 설정됩니다.

지원되는 URL 스키마를 사용하여 URL에서 이미지를 불러오려면 ‘ Source ’ 필드에 URL을 지정하십시오.

Border Image 컴포넌트를 사용하면 PNG 파일과 같은 이미지를 테두리 및 배경으로 표시할 수 있습니다. 테두리 이미지를 사용하여 버튼을 만드는 방법에 대한 자세한 내용은 ‘확장 가능한 버튼 및 테두리 만들기’를 참조하십시오.

GIF와 같은 애니메이션 이미지를 표시해야 하는 경우, Animated Image 컴포넌트를 사용하십시오.

이미지 크기

Size 가 지정되지 않은 경우 소스 이미지의 크기가 자동으로 사용됩니다.

기본적으로 컴포넌트의 너비와 높이를 명시적으로 설정하면 이미지가 해당 크기로 조정됩니다. 이 동작을 변경하려면 Fill mode 필드의 값을 설정하십시오. 이미지는 자르기 여부와 관계없이 지정된 크기로 균일하게 늘어나거나, 타일링되거나, 크기가 조정될 수 있습니다. Pad 옵션을 선택하면 이미지가 변형되지 않습니다.

Smooth 을 선택하면 이미지가 크기 조정되거나 변형될 때 부드럽게 필터링됩니다. 부드러운 필터링은 시각적 품질이 더 우수하지만, 일부 하드웨어에서는 처리 속도가 느려질 수 있습니다. 이미지가 원래 크기로 표시되는 경우, 이 속성은 시각적 효과나 성능에 아무런 영향을 미치지 않습니다.

이미지를 크기 조정하거나 변형할 때 미프맵 필터링을 사용하려면 ‘ Mipmap ’를 선택하십시오. 미프맵 필터링은 부드러운 필터링에 비해 축소 시 더 나은 시각적 품질을 제공하지만, 이미지 초기화 및 렌더링 과정에서 성능 저하가 발생할 수 있습니다.

이미지에 EXIF 방향과 같은 이미지 변환 메타데이터를 자동으로 적용하려면 ‘ Auto transform ’를 선택하십시오.

소스 크기

Source size 속성은 전체 프레임 이미지의 크기 조정된 너비와 높이를 지정합니다. 이미지 그리기 크기를 조정하는 ` Size ` 속성과 달리, 이 속성은 로드된 이미지에 대해 저장되는 최대 픽셀 수를 설정하여 대용량 이미지가 필요 이상으로 많은 메모리를 사용하지 않도록 합니다. 이를 통해 설정된 크기와 관계없이 메모리에 있는 이미지의 크기가 설정된 소스 크기보다 커지지 않도록 보장합니다.

이미지의 실제 크기가 소스 크기보다 큰 경우, 이미지는 축소됩니다. 크기의 한 축만 0보다 크게 설정된 경우, 다른 축은 소스 이미지의 종횡비를 유지하도록 비례하여 설정됩니다. ‘ Fill mode ’는 이와 별개로 작동합니다.

소스 크기의 너비와 높이가 모두 설정된 경우, 이미지는 종횡비를 유지한 채 지정된 크기에 맞도록 축소됩니다. 그러나 PreserveAspectCrop 또는 PreserveAspectFit 가 사용되는 경우, 이미지는 자르기나 맞추기에 적합한 최적 크기로 조정됩니다.

소스가 본질적으로 크기 조정이 가능한 이미지(예: SVG)인 경우, 소스 크기는 본질적인 크기와 관계없이 로드된 이미지의 크기를 결정합니다. 다른 이미지 형식에 비해 SVG 렌더링 속도가 느리므로 소스 크기 속성을 동적으로 변경하지 마십시오.

소스가 확장 불가능한 이미지(예: JPEG)인 경우, 로드된 이미지의 크기는 소스 크기가 지정한 크기를 초과하지 않습니다. 일부 형식의 경우, 이미지 전체가 실제로 메모리에 로드되지 않을 수도 있습니다.

이미지 정렬

' Alignment H ' 및 ' Alignment V ' 필드에서 이미지를 수평 및 수직으로 정렬할 수 있습니다. 기본적으로 이미지는 중앙에 정렬됩니다.

' Mirror '을 선택하면 이미지가 수평으로 반전되어, 사실상 거울에 비친 이미지가 표시됩니다.

성능

기본적으로 로컬에 있는 이미지는 즉시 로드되며, 로드가 완료될 때까지 UI가 차단됩니다. 대용량 이미지를 로드해야 하는 경우, ‘ Asynchronous ’를 선택하여 낮은 우선순위의 스레드에서 이미지를 로드하는 것이 더 나을 수 있습니다. 이미지가 로컬 리소스가 아닌 네트워크에서 가져오는 경우, 자동으로 비동기적으로 로드됩니다.

이미지는 내부적으로 캐시되어 공유되므로, 여러 이미지가 동일한 ` Source`를 갖는 경우 해당 이미지의 복사본은 하나만 로드됩니다.

테두리 이미지

Border Image 컴포넌트는 Image 컴포넌트의 기능을 확장합니다. 이 컴포넌트는 각 이미지의 일부를 확대/축소하거나 타일링하여 이미지로 테두리를 만드는 데 사용됩니다. 소스 이미지는 9개의 영역으로 나뉘며, 각 영역은 개별적으로 확대/축소되거나 타일링됩니다. 모서리 영역은 전혀 확대/축소되지 않는 반면, 가로 및 세로 영역은 Tile mode H 및 Tile mode V 필드의 값, 또는 두 값 모두에 따라 확대/축소됩니다.

' Stretch ' 옵션은 사용 가능한 영역에 맞게 이미지를 확대/축소합니다. ' Repeat ' 옵션은 공간이 더 이상 남지 않을 때까지 이미지를 타일링합니다. 마지막 이미지가 잘리지 않도록 하려면, 필요할 때 이미지를 축소하는 ' Round ' 옵션을 선택하십시오.

Border left, Border right, Border top 및 Border bottom 입력란에 이미지의 영역을 지정하십시오. 이 영역은 테두리로 사용할 원본 이미지의 각 가장자리로부터의 거리를 나타냅니다.

테두리 이미지 사용 예시는 BorderImage 컴포넌트의 설명서를 참조하십시오.

애니메이션 이미지

Animated Image 컴포넌트는 Image 컴포넌트의 기능을 확장하여, GIF 파일에 저장된 것과 같이 일련의 프레임으로 구성된 이미지로 저장된 애니메이션을 재생할 수 있는 방법을 제공합니다.

Speed 필드에서 애니메이션 속도를 설정합니다. 속도는 원본 애니메이션 이미지의 속도에 대한 백분율로 측정됩니다. 기본 속도는 1.0이며, 이는 원본 속도를 의미합니다.

애니메이션을 재생하려면 ‘ Playing ’을 선택하십시오.

애니메이션을 일시 정지하려면 ‘ ’을 선택하십시오(Paused).

Cache 가 선택되면 애니메이션의 모든 프레임이 캐시에 저장됩니다. 길거나 용량이 큰 애니메이션을 재생할 때 메모리를 절약하려면 이 체크박스의 선택을 해제하십시오.

이미지 데이터가 순차적 장치(예: 소켓)에서 제공되는 경우, 캐싱이 활성화된 상태에서만 ‘Animated Image’가 반복 재생됩니다.

자세한 내용은 다음 동영상을 참조하십시오:

이미지 컴포넌트 요약

다음 표에는 이미지 추가에 사용할 수 있는 컴포넌트가 나열되어 있습니다. ‘위치’ 열에는 Components 에서 해당 컴포넌트를 찾을 수 있는 탭 이름이 표시됩니다. ‘MCU 지원’ 열은 MCU에서 지원되는 컴포넌트를 나타냅니다.

아이콘	이름	위치	MCU 지원	용도
	Animated Image	기본 구성 요소 - 기본	아니요	GIF 파일에 저장된 것과 같이 일련의 프레임으로 구성된 애니메이션을 저장하는 이미지입니다.
	Border Image	기본 컴포넌트 - 기본	예	테두리나 배경으로 사용되는 이미지입니다.
	Image	기본 구성 요소 - 기본	예	PNG 및 JPEG와 같은 비트맵 형식이나 SVG와 같은 벡터 그래픽 형식을 포함하여 지원되는 형식 중 하나인 이미지입니다.