Hi. I'm Jesper Pedersen from KDAB. If you
just joined us, welcome! This is a series on Programming with QML
and Qt and we've now made it to the section where we're going to talk about
transformations. It's actually going to be two videos. In the first one, I'll show
you the transformation set up, kind of build in. And in the second video that will
be right after this one, we're going to see how to customize the very tiny
details of transformation on your items. Transformation is something that you do
to any item. In this video, we'll see transformation done to images, but you
could do transformation on any of the other elements that exist in QML. You have a hierarchy of elements and the
transformation applies to whatever element that's in that hierarchy and all of
its children, which is the key thing. See, I got a beautiful rocket here
that my five-year-old daughter brought to me. It was me. I'm not very good at
drawing. But anyway, I got a drawing here and this item here might have another
child item. So, I'll just imagine we had a child item sitting underneath it.
Whenever I do some transformation to this one, for example rotating, see my
green little post-it note here rotated together with the rocket. So,
transformation applies to the whole tree underneath. This is a bit surprising,
as we'll see in the next example when we talk about opacity. When we
talk about that an element is transparent, then his children are
transparent too, though the children stand on top of the element.
But we'll see that when we get to that slide. We have at least these three
different transformations that we can apply: opacity changing, scaling, and rotating of our elements. If we want
something more than just that, we can actually set up a complete matrix for
the transformation. Aand we'll see how we can do very custom transformation in the
next video. But let's start looking at the opacity transformation. I got a bunch
of rectangles here. You can see I got a rectangle that is blue. That's the other
one here. In the code snippet it doesn't show that one. We start at the
level here with the white one. But I got that blue rectangle that is the base of
everything. My blue rectangle has a white rectangle inside it. That's what you see
here. It doesn't really look white to your eyes, and that's not because
we have an error in the example or anything. It's simply because it's
transparent. So, it's got 50% opacity, meaning 50% transparent. So I've got a 50% white transparent color. So, I see some of the blue through
the white, which makes this more white blue-ish. I got a red one here and that
one also has 50% transparency. And that one is a child of the other
rectangle. So, here's the outer rectangle. That's the big white one that is light blue
in your eyes. And it has a child that is red. That's the red rectangle we
see here. It doesn't really look all that red. It looks kind of, I don't know what
color that is, light pink? Whatever, I'm not good at colors. But you can
see that this is truly red, down here. It is more reddish --
whatever. And why is that? Well, the reason for that is that I got 50% transparency
here, 50% transparency there, which makes this 75% transparent. And as I said, even
though the child is standing on top of its parent, it inherits the
transparency. So, you can see it's very transparent here.
I got another red rectangle for showing this off. And
time, you can see there is no opacity here. So, this one is a complete solid red. But of
course it inherited 50% transparency. So, there is again some transparency towards
the parent. Now outside of this rectangle, I got another rectangle and it's 50%
transparent. So, this rectangle, of which you can see the color here is exactly the same
as the color there. So this one inherits a 50% transparency of a 100% opaque
rectangle. This one is 50% transparent itself. And finally I got another one
here with no opacity. It's a red rectangle. It's standing on top of it and it's
completely red, as you can see. Actually, in the code (and you can you can load
that code up yourself when you get the time for doing that), you'll notice
that these four rectangles actually stand outside of their parent. So, this is
a child of this white, blue-ish rectangle here. But it stands outside of it, which
we saw on a previous video is perfectly okay. And you can see the 50%
opacity also applies when you are painting outside of your parent.
That was opacity. We have two other transformations. We have scaling and we
have rotating. Scaling, super easy, we actually saw that in the previous video
already. I simply say scale 2.0 here so now my image is scaled up twice. I could,
of course, have just changed the width and the height, as we saw in the
previous video. But I can also simply say scale. Let me show you an important thing
to understand about this. Here's the example. Let's just run it to see what we
have. We have a rocket standing on a blue background. At
this stage in your learning, hopefully it isn't not very surprising what we saw there.
But let's try and put a rectangle around this image here. The rectangle would be red and
it's gonna be around this one here. Select everything. Ctrl+I, to make it
indent things. And if I run it now, you will notice there's no red
rectangle because my rectangle size is 0 by 0, if I don't specify anything. So, I
have a 0 by 0 rectangle up here. It has a child and the child is outside of the
rectangle. Had I said "clip: true," you would notice that now I don't see anything at
all because my rocket is not outside of its parent anymore. So, let's not do that.
Instead, let's give it a width. And the width would be the image width here. So, I
need to give it a child. So, give it an ID. Iim.width and
the height will be the height of that image. And I just need to uncomment this
one here just so you can see it working out. As you can see, it's
working out really well. What's the matter here? My x and y need to be like this.
There we are. Here is my red rectangle that is the parent of that rocket. But
notice if I do my scale here, my red rectangle is still the same size as it was before. The key thing to understand is that when you apply the
scale transformation, it's really just for the eyes of whoever sees it. The
size of that element is still going to be the same.
That's going to be super important when we talk about anchor layout in a few
videos from now. Because when you do some transformation and you anchor towards
something, then you anchor towards the size of the original one. So, if I
want I would need to change the width and height off this element. I could
easily do that by simply saying the width here is the image width
multiplied by the scale that we had down there. I'll leave that for you to play
with at home to see how that works. We also have have rotations. And rotation is
simply done by writing rotation: and then the angle that you want to rotate.
Let me show you my rocket again. I got my rocket here. I'm rotating it. The key
question to ask, though, is which part of that rocket am I rotating
around? I could be rotating around where my fingers are now, so rotating around
like this. I could be rotating around the topmost, almost leftmost, corner here
for you like this -- so the topmost rightmost corner, or any other location
I could be rotating around. That is specified using transform origin. Let me
run the example. You can see that the rocket is rotated. It's rotated
by default around the center. So, if this whole piece of paper
was the rocket item then it's the center there: the width divided by
2, the height divided by 2. That's that center point that I'm rotating
around. If I want, I can change that transformOrigin and then Item.TopLeft.
There we are. And now you can see that I'm
rotating around a different point. Let' To visualize this, let's just try and
comment these two out and see where we are. Here is a rocket. A mental note to
yourself that a rocket is 50 pixels in and 35 down. If I do the
transformation, but without the transform origin, you can see that the rocket was
around here. So, this is the center of the rocket and this is where I'm rotating
around. But if I do the transformOrigin and run again, you'll notice that now the
rocket is transforming around this corner that was sitting up there, rotating 45 degrees. And we can go to the documentation here, if I couldn't
remember. I almost couldn't remember that it was called item.TopLeft. I could always
go to F1 on my transformOrigin, which would send me right to this
documentation here where I can see the different positions that we
have: TopLeft, TopRight,and so on. These are different transformation
points that I can transform around. Jesper, what if I want to transform
around this point? You didn't have a point there. How could I do that then? I'm
so glad that you asked me that question because that leads us straight into the
next video, where I'll show you how you can do transformation around any point,
any transformation that you can think of using a matrix or
something less drastic than that. That's going to be in the next video. Please do
subscribe to our channel so that you can be notified whenever that's online.
If it's already online, there might be other videos coming online later on.
Thank you very much.
