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