Introduction to Qt / QML (Part 08) - Item transformations

It's time to introduce the most basic visual transformations that you can apply to items in a Qt Quick scene. Any visual item can be scaled, rotated, or made translucent by acting on certain properties. This video explains how these properties work, and how visual transformations are propagated to children elements.

About the host:
The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrolment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

[souptemba]

the black and white filter is nice. very easy on the eyes.

[ibid]

I wanted to comment on two things: 1) Your videos are REALLY well put together, I really appreciate the production quality, and the three cameras plus screen share. That took a lot of work and thought, and it really helps the video be easier to watch and keep the focus on learning, even if it's subtle. Thank you for that effort. 2) FYI, green post-its aren't green on a grayscale video. :D

[senthilandavanp]

Thanks for an interesting learning video
From this video, I understood 3 things


Opacity value is 0 to 1. Transform to opaque
Scale - to increase the size of the element. If it 2 , element size will be twice the size of original. If 3, thrice the value of original value

Rotation rotating the element by degrees, we can rotate by specifying a particular location

[arifbalk]

I wonder if Jesper ever called Dwight Schrute of KDAB

[王江奎]

At 8:51 Jesper said I could multiply the image width with image scale to fit biiger rocket:

Rectangle {
width: 400; height: 400
color: "#00a3fc"

Rectangle {
color: "red"
width: iim.width * iim.scale
height: iim.height * iim.scale
x: 150; y: 150
Image {
id: iim
source: "../images/rocket.png"
scale: 2
}
}
}

But i got wrong, the rocket is out of rectangle, how could i fix this ? Thanks a lot

[MyNameJerf]

> green post it note

Now I know how the dog feels

[juels]

At 7:58, why are the transparent parts of the inside of rocket blue when the transparent parts around the corners of the rocket are red?

[haniyehghassami]

Hi and thanks for your nice videos. I had a question. In one of your tutorial you said do not use "anchor.top" . but why? could you explain it to me? thanks. :)

[Roberto-kdjg]

Outra vídeo-aula sensacional! Thank you!

[whitestork]

Jesus I laugh at your jokes harder than I am ready to admit ;)