Qml Image 截取一部分图片形式

Qml Image 截取一部分 ：每次只显示一张图片的一部分，以有不同的状态显示

将这个图形每次只显示一部分出来：

想了好久，才找到实现的方法：

运行效果：

    

============================================================================

再来一个升级版的小程序：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2


Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    property int n: 0




    Rectangle{
        id:show_Button_rect
        width: 114   //4*114*50
        height: 50
        color: "red"  //透明颜色
        clip: true
        state: "d"

        Image {
            id: picture
            width:show_Button_rect.width*4
            height:show_Button_rect.height
            //fillMode: Image.Stretch  //图片扩展方式填充
            source: "qrc:/images/qml2.png"
            x:0
            y:0
        }


        MouseArea{
            hoverEnabled: true  //悬停使用
            anchors.fill:parent
            onEntered: show_Button_rect.state == "d"? show_Button_rect.state = "d": show_Button_rect.state = "a"   //进入是"a"状态
            onExited: show_Button_rect.state == "d"? show_Button_rect.state = "d": show_Button_rect.state = "c"    //离开是"c"状态
            onPressed: show_Button_rect.state = "d"  //按下（不是松开）是"d"状态

            onReleased: {  //松开是"c"状态
                show_Button_rect.state = "c"

            }

        }



        states:[  //必须在rectangle里面定义使用
            State {
                name: "a"
                PropertyChanges {
                    target: picture
                    x:-0*show_Button_rect.width

                }
            },

            State {
                name: "b"
                PropertyChanges {
                    target: picture
                    x:-1*show_Button_rect.width

                }
            },

            State {
                name: "c"
                PropertyChanges {
                    target: picture
                    x:-2*show_Button_rect.width

                }
            },

            State {
                name: "d"
                PropertyChanges {
                    target: picture
                    x:-3*show_Button_rect.width

                }
            }
        ]
    }

实现效果:

参考：https://bbs.csdn.net/topics/391833274