[SOLVED]Unexpected behavior with anchors of scaled image

swegmann

My basic question is: Do anchors of scaled images work differently than unscaled images?

I have the following setup:

@
ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480

Rectangle {
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    width: 170
    height: 170

    color: "yellow"

    Image {
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        source: "Elefant.svg"
        //scale: 0.5

        Rectangle {
            anchors.fill: parent
            z: -1
            color: "green"
        }
    }
}

}
@

This of course works as expected and the image is anchored at the top of the yellow rectangle. However as soon as I uncomment the "scale: 0.5" line in the Image, the image is no longer anchored at the top.

!http://s2.postimg.org/ud0rm63qx/Scaled_image_not_anchored.png!

Is this normal for scaled images? Is there simple way to fix this and still get image anchored at the top?

goblin3d

Strange behavior!
I don't know if this is normal, but here is a solution:
Add the following line to Image component:

@anchors.topMargin: -((height-(height*scale))/2)@

Rolias

I think this is how it's designed to work. If you want the scaling to happen from the top instead of the center (the default) just add
@transformOrigin: Item.Top;@

to your Image properties.

Depending on your level of Qt Quick expertise you might like my Pluralsight "Qt Quick Fundamentals":http://bit.ly/qtquickfun course. Free VIP passes (unlimited viewing for a week) are available on request while supplies last.

swegmann

Rolias, that is exactly what I was looking for, it works like a charm. Thank you very much.

Your course looks quite interesting. I might have a look at it as soon as I can spare some extra time.