I'm trying to practice this transformation section.
I attached four images to the program and here are:
ClickableImage.qml:
import QtQuick 2.6
Image {
id: root
signal clicked
MouseArea
{
anchors.fill: parent
onClicked: root.clicked
}
}
import QtQuick 2.6
Image {
id: root
signal clicked
MouseArea
{
anchors.fill: parent
onClicked: root.clicked
}
}
To copy to clipboard, switch view to plain text mode
Transformation.qml:
import QtQuick 2.6
Item {
width: bg.width
height: bg.height
Image {
id: bg
source: "/background.png"
}
MouseArea {
id: backgroundClicker
anchors.fill: parent
onClicked: {
circle.x = 84
box.rotation = 0
triangle.rotation = 0
triangle.scale = 1.0
}
}
ClickableImage {
id: circle
x: 84; y: 68
source: "/circle_blue.png"
antialiasing: true
onClicked: x += 20
}
ClickableImage {
id: box
x: 164; y: 68
source: "/box_green.png"
antialiasing: true
onClicked: rotation += 15
}
ClickableImage {
id: triangle
x: 248; y: 68
source: "/triangle_red.png"
antialiasing: true
onClicked: {
rotation += 15
scale += 0.05
}
}
function _test_transformed() {
circle.x += 20
box.rotation = 15
triangle.scale = 1.2
triangle.rotation = -15
}
function _test_overlap() {
circle.x += 40
box.rotation = 15
triangle.scale = 2.0
triangle.rotation = 45
}
}
import QtQuick 2.6
Item {
width: bg.width
height: bg.height
Image {
id: bg
source: "/background.png"
}
MouseArea {
id: backgroundClicker
anchors.fill: parent
onClicked: {
circle.x = 84
box.rotation = 0
triangle.rotation = 0
triangle.scale = 1.0
}
}
ClickableImage {
id: circle
x: 84; y: 68
source: "/circle_blue.png"
antialiasing: true
onClicked: x += 20
}
ClickableImage {
id: box
x: 164; y: 68
source: "/box_green.png"
antialiasing: true
onClicked: rotation += 15
}
ClickableImage {
id: triangle
x: 248; y: 68
source: "/triangle_red.png"
antialiasing: true
onClicked: {
rotation += 15
scale += 0.05
}
}
function _test_transformed() {
circle.x += 20
box.rotation = 15
triangle.scale = 1.2
triangle.rotation = -15
}
function _test_overlap() {
circle.x += 40
box.rotation = 15
triangle.scale = 2.0
triangle.rotation = 45
}
}
To copy to clipboard, switch view to plain text mode
main.qml:
import QtQuick 2.6
import QtQuick.Window 2.2
Window {
visible: true
width: 800
height: 600
title: qsTr("Transformation")
Transformation {
id: transformation
}
}
import QtQuick 2.6
import QtQuick.Window 2.2
Window {
visible: true
width: 800
height: 600
title: qsTr("Transformation")
Transformation {
id: transformation
}
}
To copy to clipboard, switch view to plain text mode
When I run the program it shows the images, but nothing happens when I click on any of them! Why please?
And how to use all advantages of Transformation.qml file in main.qml, please?
Bookmarks