QML Image scale unexpected behavior - qml

Question

Qt 5.9.2
The following QML code:
ApplicationWindow
{
visible: true
width: 585
height: 113
title: qsTr("test")
Rectangle
{
width: 585
height: 113
color: "black"
x: 0
y: 0
}
Image
{
source: "balloon.png"
x: 0
y: 0
}
}
produces the expected result:
When I add scale: 0.5 to Image element, I get this:
But I expected it to look like this:
Can somebody please explain me why 0.5 scaled image is not located at (0,0) coordinates as it explicitly set in its properties and can something be done here for the scaled image to be located at (0,0) coordinates?

Answer 1

As mentioned in the documentation for scale, scaling is applied from the transformOrigin, and the default origin is Item.Center, so you need to specify Item.TopLeft:
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
visible: true
width: 585
height: 113
title: qsTr("test")
Rectangle {
width: 585
height: 113
color: "black"
x: 0
y: 0
}
Image {
source: "balloon.png"
x: 0
y: 0
scale: 0.5
transformOrigin: Item.TopLeft
}
}
The x and y properties only affect an item's position, not its scaling origins. Note that there's also the transform property if you need to do more advanced transformations.