Qt Quick 예제 - 이미지 요소

이미지 유형과 관련된 QML 예제 모음입니다.

이미지 요소는 이미지 유형과 관련된 작은 QML 예제 모음입니다. 자세한 내용은 사용 사례 - QML의 시각적 요소를 참조하세요.

예제 실행하기

에서 예제를 실행하려면 Qt Creator에서 Welcome 모드를 열고 Examples 에서 예제를 선택합니다. 자세한 내용은 예제 빌드 및 실행하기를 참조하세요.

BorderImage로 크기 조정하기

BorderImage는 수평 타일 모드 및 수직 타일 모드 속성을 설정하여 BorderImage 유형의 다양한 크기 조정 모드를 보여줍니다.

이미지 채우기

Image는 Image 유형의 다양한 채우기 모드를 보여줍니다.

그림자 효과

그림자 효과는 BorderImage 를 사용하여 직사각형 항목에 그림자 효과를 만드는 방법을 보여줍니다:

    BorderImage {
        anchors.fill: rectangle
        anchors {
            leftMargin: -6
            topMargin: -6
            rightMargin: -8
            bottomMargin: -8
        }
        border {
            left: 10
            top: 10
            right: 10
            bottom: 10
        }
        source: "pics/shadow.png"
    }

AnimatedSprite로 스프라이트 애니메이션 만들기

AnimatedSprite는 AnimatedSprite 객체를 사용하여 간단한 애니메이션을 표시하는 방법을 보여줍니다:

    AnimatedSprite {
        id: sprite

        anchors.centerIn: parent
        source: "pics/speaker.png"
        frameCount: 60
        frameSync: true
        frameWidth: 170
        frameHeight: 170
        loops: 3
    }

스프라이트 애니메이션은 세 번 반복됩니다.

스프라이트 시퀀스를 사용한 스프라이트 애니메이션

스프라이트 시퀀스를 사용하여 애니메이션 및 인터랙티브 곰을 그리는 방법을 보여줍니다. SpriteSequence 객체는 다섯 가지 스프라이트를 정의합니다. 곰은 처음에 정지 상태입니다:

        Sprite {
            name: "still"
            source: "pics/BearSheet.png"
            frameCount: 1
            frameWidth: 256
            frameHeight: 256
            frameDuration: 100
            to: {"still":1, "blink":0.1, "floating":0}
        }

장면을 클릭하면 애니메이션이 스프라이트 시퀀스를 낙하 상태로 설정하고 곰의 y 속성을 애니메이션합니다.

    SequentialAnimation {
        id: anim

        ScriptAction { script: image.goalSprite = "falling" }
        NumberAnimation {
            target: image
            property: "y"
            to: 480
            duration: 12000
        }
        ScriptAction {
            script: {
                image.goalSprite = ""
                image.jumpTo("still")
            }
        }
        PropertyAction {
            target: image
            property: "y"
            value: 0
        }
    }

애니메이션이 끝나면 곰은 초기 상태로 다시 설정됩니다.

예제 프로젝트 @ code.qt.io

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.