How to show origin image size in qml Image component? - qml

Question

I tried to show origin image size in QML Image component,code like:
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: imageRect
width: parent.width
height: parent.height
anchors.fill: parent
DragHandler {
acceptedButtons: Qt.RightButton
target: sourceImage
xAxis.enabled: true
yAxis.enabled: true
}
Image {
id: sourceImage
source: "qrc:/2.jpg"
width: sourceSize.width
height: sourceSize.height
MouseArea {
width:parent.width
height:parent.height
onClicked: {
print(mouse.x, mouse.y)
print(sourceImage.x, sourceImage.y)
}
}
}
}
}
but the image is not fit with the parent's size, how can i fit the image to its parent and keep image origin size?

Answer 1

By default, the Image component will automatically set width and height to source image contents. You use this if you don't want any scaling to occur.
In the following example, I render the original Image, the Hubble view of the Pillars of Creation. I put it inside a Flickable with ScrollBars so that you can pan the image.
import QtQuick
import QtQuick.Controls
Page {
property string mouseInfo
Flickable {
id: flickable
anchors.fill: parent
contentWidth: image.width + 20
contentHeight: image.height + 20
clip: true
ScrollBar.vertical: ScrollBar {
width: 20
policy: ScrollBar.AlwaysOn
}
ScrollBar.horizontal: ScrollBar {
height: 20
policy: ScrollBar.AlwaysOn
}
Image {
id: image
source: "https://www.arcgis.com/sharing/rest/content/items/d0ecaa3fd9ef45c8ad255989ef6ded07/data"
MouseArea {
anchors.fill: parent
onClicked: mouseInfo = `${mouseX},${mouseY}`;
}
}
}
footer: Frame {
Text {
text: "image: %1x%2 mouseInfo:%3".arg(image.width).arg(image.height).arg(mouseInfo)
}
}
}
You can Try it Online!