UI에 이미지 사용

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

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

이제 Assets 에서 이미지를 사용할 수 있습니다.

이미지 파일을 Assets 에서 Navigator 또는 2D 보기로 드래그하면 Qt Quick 디자이너가 이미지 파일의 경로를 Properties 의 Source 필드 값으로 설정하여 이미지 구성 요소의 인스턴스를 자동으로 생성합니다.

지원되는 URL 체계를 사용하여 URL에서 이미지를 로드하려면 Source 필드에 URL을 지정합니다.

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

GIF와 같은 애니메이션 이미지를 표시해야 하는 경우 애니메이션 이미지 컴포넌트를 사용합니다.

이미지 크기

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 컴포넌트는 이미지 컴포넌트의 기능을 확장하여 GIF 파일에 저장된 일련의 프레임을 포함하는 이미지로 저장된 애니메이션을 재생할 수 있는 방법을 제공합니다.

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

애니메이션을 재생하려면 Playing 을 선택합니다.

애니메이션을 일시 중지하려면 (Paused)를 선택합니다.

Cache 을 선택하면 애니메이션의 모든 프레임이 캐시됩니다. 길거나 큰 애니메이션을 재생할 때 메모리를 절약하려면 이 확인란의 선택을 취소합니다.

이미지 데이터가 순차 장치(예: 소켓)에서 오는 경우 캐싱이 활성화된 경우에만 애니메이션 이미지를 반복할 수 있습니다.

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

이미지 구성 요소 요약

다음 표에는 이미지를 추가하는 데 사용할 수 있는 구성 요소가 나열되어 있습니다. 위치 열에는 Components 에서 구성 요소를 찾을 수 있는 탭 이름이 포함되어 있습니다. MCU 지원 열에는 MCU에서 지원되는 구성 요소가 표시됩니다.

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