Qml Image 截取一部分图片形式

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

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

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

运行效果：

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

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2Window {visible: truewidth: 640height: 480title: qsTr("Hello World")property int n: 0Rectangle{id:show_Button_rectwidth: 114   //4*114*50height: 50color: "red"  //透明颜色clip: truestate: "d"Image {id: picturewidth:show_Button_rect.width*4height:show_Button_rect.height//fillMode: Image.Stretch  //图片扩展方式填充source: "qrc:/images/qml2.png"x:0y:0}MouseArea{hoverEnabled: true  //悬停使用anchors.fill:parentonEntered: 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: picturex:-0*show_Button_rect.width}},State {name: "b"PropertyChanges {target: picturex:-1*show_Button_rect.width}},State {name: "c"PropertyChanges {target: picturex:-2*show_Button_rect.width}},State {name: "d"PropertyChanges {target: picturex:-3*show_Button_rect.width}}]}

实现效果: