定义一个简单的组件:
ClickableImage.qml
import QtQuick 2.0
Image
{
id: root
signal clicked
MouseArea
{
anchors.fill: parent
onClicked: root.clicked()//点击会让图片发信号
}
}
一个图片组件加上鼠标区域,定义一个信号当鼠标按下时发送此信号。
main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
Window
{
visible: true;
width: bg.width
height: bg.height
Image
{
id: bg
source: "/img/background.png"
}
MouseArea
{
id: backgroundClicker
anchors.fill: parent
onClicked:
{
rocket.x = 20
}
}
ClickableImage //也就是ClickableImage.qml文件的根项(即一个Image)
{
id: rocket
x: 20; y: 100
source: "/img/rocket.png"
onClicked://自身的按下操作
{
x += 5
}
}
}
MouseArea
{
id: backgroundClicker
anchors.fill: parent
onClicked:
{
rocket.rotation = 0
}
}
ClickableImage
{
id: rocket
x: 200; y: 100
source: "/img/rocket.png"
smooth: true
onClicked:
{
rotation += 5
}
}
MouseArea
{
id: backgroundClicker
anchors.fill: parent
onClicked:
{
rocket.rotation = 0
rocket.scale = 1.0
}
}
ClickableImage
{
id: rocket
x: 380; y: 100
source: "/img/rocket.png"
smooth: true
onClicked:
{
rotation += 5
scale -= 0.05
}
}