BorderImage QML Type

이미지를 바탕으로 테두리를 그립니다. 더 보기...

• 상속된 멤버를 포함한 모든 멤버 목록

속성

• asynchronous : bool
• border
  • border.bottom : int
  • border.left : int
  • border.right : int
  • border.top : int
• cache : bool
• currentFrame : int
• frameCount : int
• horizontalTileMode : enumeration
• mirror : bool
• progress : real
• retainWhileLoading : bool (since 6.8)
• smooth : bool
• source : url
• sourceSize : size
• status : enumeration
• verticalTileMode : enumeration

상세 설명

BorderImage 유형은 각 이미지의 일부를 확대/축소하거나 타일링하여 이미지를 바탕으로 테두리를 생성하는 데 사용됩니다.

BorderImage는 source 속성을 통해 지정된 소스 이미지를 아래와 같이 9개의 영역으로 분할합니다:

이미지가 확대/축소될 때, 소스 이미지의 각 영역은 다음과 같은 방식으로 확대/축소되거나 타일링되어 표시될 테두리 이미지를 생성합니다:

• 모서리(영역 1, 3, 7, 9)는 전혀 크기가 조정되지 않습니다.
• 영역 2와 8은 ` horizontalTileMode`에 따라 크기가 조정됩니다.
• 영역 4와 6은 verticalTileMode 에 따라 크기가 조정됩니다.
• 중앙(영역 5)은 horizontalTileMode 과 verticalTileMode 에 따라 크기가 조정됩니다.

이미지의 영역은 border 속성 그룹을 사용하여 정의되며, 이 그룹은 테두리로 사용할 원본 이미지의 각 가장자리로부터의 거리를 설명합니다.

사용 예

다음 예제는 다양한 모드가 이미지에 미치는 효과를 보여줍니다. 위에서 설명한 대로 이미지의 여러 영역을 보여주기 위해 이미지에 가이드 라인이 겹쳐져 있습니다.

비교를 위해, 간단한 Image 항목을 사용하여 크기가 조정되지 않은 이미지를 표시했습니다. 여기에는 BorderImage를 사용하여 이미지를 어떻게 분할할지 보여주기 위해 선을 중첩해 두었습니다:

Image {
    source: "pics/borderframe.png"
    anchors.centerIn: parent
}

그러나 BorderImage를 사용하여 이미지를 표시할 경우, ` border ` 속성을 통해 확대/축소되지 않은 모서리 영역 내에 위치할 이미지 부분과 가로·세로로 늘어나게 될 부분을 결정합니다. 그러면 원본 이미지보다 더 큰 크기를 지정할 수 있습니다. ` horizontalTileMode ` 속성이 ` BorderImage.Stretch`로 설정되어 있으므로, 영역 2와 8에 있는 이미지 부분은 가로로 늘어나게 됩니다. 또한 ` verticalTileMode ` 속성이 ` BorderImage.Stretch`로 설정되어 있으므로, 영역 4와 6에 있는 이미지 부분은 세로로 늘어나게 됩니다:

BorderImage {
    anchors { fill: parent; margins: 1 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Stretch
    verticalTileMode: BorderImage.Stretch
    source: "pics/borderframe.png"
}

다시 한 번, 큰 BorderImage를 사용하여 이미지를 표시합니다. horizontalTileMode 속성이 BorderImage.Repeat 로 설정되어 있으므로, 영역 2와 8에 있는 이미지 부분이 항목의 상단과 하단 공간을 채우도록 타일링됩니다. 마찬가지로, ` verticalTileMode ` 속성을 ` BorderImage.Repeat`로 설정하면 영역 4와 6에 있는 이미지 부분이 항목의 좌우 공간을 채우도록 타일링됩니다:

BorderImage {
    anchors { fill: parent; margins: 1 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Repeat
    verticalTileMode: BorderImage.Repeat
    source: "pics/borderframe.png"
}

어떤 상황에서는 영역 2와 8의 너비가 원본 이미지의 해당 영역 너비의 정확한 배수가 아닐 수 있습니다. 마찬가지로, 영역 4와 6의 높이가 해당 영역 높이의 정확한 배수가 아닐 수도 있습니다. ' BorderImage.Round ' 모드를 사용하면 정수 개수의 타일을 선택하여 크기에 맞게 축소합니다:

BorderImage {
    anchors { fill: parent; margins: 6 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Round
    verticalTileMode: BorderImage.Round
    source: "pics/borderframe.png"
}

'Qt Quick 예제 - 이미지 요소'에 있는 'Border Image' 예제는 BorderImage를 사용하여 직사각형 항목에 그림자 효과를 시뮬레이션하는 방법을 보여줍니다.

이미지 불러오기

원본 이미지의 위치에 따라 소스 이미지가 즉시 로드되지 않을 수 있습니다. progress 속성을 사용하여 로딩 진행 상황을 확인할 수 있습니다.

Image 및 AnimatedImage도 참조하십시오 .

속성 설명서

asynchronous : bool

로컬 파일 시스템에 있는 이미지를 별도의 스레드에서 비동기적으로 로드하도록 지정합니다. 기본값은 false이며, 이 경우 이미지 로드 중 사용자 인터페이스 스레드가 차단됩니다. 이미지를 즉시 표시하는 것보다 반응성이 뛰어난 사용자 인터페이스를 유지하는 것이 더 중요한 경우, ` asynchronous `를 true로 설정하는 것이 유용합니다.

이 속성은 로컬 파일 시스템에서 읽은 이미지에만 적용된다는 점에 유의하십시오. 네트워크 리소스(예: HTTP)를 통해 로드되는 이미지는 항상 비동기적으로 로드됩니다.

border group

아래 그림과 같이 4개의 테두리 선(가로 2개, 세로 2개)이 이미지를 9개의 구역으로 나눕니다:

각 테두리 선(왼쪽, 오른쪽, 위, 아래)은 원본 이미지의 해당 가장자리로부터 픽셀 단위의 오프셋을 지정합니다. 기본적으로 각 테두리 선의 값은 0입니다.

예를 들어, 다음 정의는 하단 테두리선을 이미지 하단에서 10픽셀 위쪽에 설정합니다:

BorderImage {
    border.bottom: 10
    // ...
}

테두리선은 ` .sci file`을 사용하여 지정할 수도 있습니다.

cache : bool

이미지를 캐시에 저장할지 여부를 지정합니다. 기본값은 true입니다. 큰 이미지를 다룰 때 ` cache `를 false로 설정하면, 작은 ‘UI 요소’ 이미지의 캐싱을 희생시키지 않고 큰 이미지가 캐시에 저장되지 않도록 하는 데 유용합니다.

currentFrame 현재 표시 중인 프레임입니다. 기본값은 0 입니다. 이미지에 여러 프레임이 포함된 경우, 0 과 frameCount - 1 사이의 숫자로 설정하여 다른 프레임을 표시할 수 있습니다.

frameCount 는 이미지에 포함된 프레임의 수입니다. 대부분의 이미지는 하나의 프레임만 포함합니다.

이 속성은 테두리 이미지의 중간 부분을 반복하거나 늘리는 방법을 지정합니다.

각 속성의 기본 타일 모드는 BorderImage.Stretch입니다.

mirror : bool

이 속성은 이미지를 가로로 반전할지(실질적으로 거울에 비친 것처럼 표시할지) 여부를 결정합니다.

기본값은 false입니다.

progress : real [read-only]

이 속성은 이미지 로딩 진행 상황을 0.0(아직 로딩되지 않음)부터 1.0(완료)까지 나타냅니다.

status도 참조하십시오 .

retainWhileLoading : bool [since 6.8]

이 속성은 ` source ` 속성이 변경되고 로딩이 비동기적으로 이루어질 때의 동작을 정의합니다. 이는 ` asynchronous ` 속성이 ` true`로 설정되어 있거나, 이미지가 로컬 파일 시스템에 없는 경우에 해당합니다.

retainWhileLoading 가 false (기본값)인 경우, 기존 이미지는 즉시 제거되고 새 이미지가 로드되는 동안 컴포넌트가 지워집니다. true 로 설정된 경우, 기존 이미지는 유지되며 새 이미지가 준비될 때까지 계속 표시됩니다.

이 속성을 활성화하면 새 이미지를 로드하는 데 시간이 오래 걸리는 경우 화면 깜빡임을 방지할 수 있습니다. 단, 새 이미지를 로드하는 동안 더블 버퍼링을 위해 추가 메모리가 소모된다는 단점이 있습니다.

이 속성은 Qt 6.8에서 도입되었습니다.

smooth : bool

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

기본적으로 이 속성은 true로 설정되어 있습니다.

source : url

이 속성은 원본 이미지를 가리키는 URL을 저장합니다.

BorderImage Qt Image Formats에서 지원하는 모든 URL 체계를 통해 불러온, Qt가 지원하는 모든 이미지 형식을 처리할 수 있습니다.

이 속성은 .sci 파일(테두리 값, 소스 이미지 및 타일 규칙을 파일 내에 직접 포함하는 QML 전용 텍스트 기반 형식)을 참조할 수도 있습니다. .sci 파일을 사용할 경우, BorderImage 는 파일 자체에서 테두리 정보를 읽으므로 QML에서 테두리 속성을 지정할 필요가 없습니다.

다음 .sci 파일은 이미지 picture.png 의 각 변 테두리 두께를 10으로 설정합니다:

border.left: 10
border.top: 10
border.bottom: 10
border.right: 10
source: "picture.png"

URL은 절대 경로이거나 컴포넌트의 URL을 기준으로 한 상대 경로일 수 있습니다.

QQuickImageProvider도 참조하십시오 .

sourceSize : size [read-only]

이 속성은 로드된 이미지의 실제 너비와 높이를 저장합니다.

BorderImage 에서는 이 속성이 읽기 전용입니다.

Image::sourceSize도 참조하십시오 .

status : enumeration [read-only]

이 속성은 이미지 로딩 상태를 나타냅니다. 다음 중 하나일 수 있습니다:

progress도 참조하세요 .