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}}]}
实现效果: