How to get mouse click position in qml Image component? - image

Question

I tried to get the mouse click position in qml Image component, but what I got is not the real pixel-based image position, how can I get the pixel-based position of the image?
this is my qml code
Image {
id: sourceImage
width: parent.width
height: parent.height
fillMode: Image.PreserveAspectFit
source: "D://test.png"
mipmap: true
smooth: true
antialiasing: true
MouseArea {
width: parent.width
height: parent.height
focus: true
anchors.fill: parent
onClicked: {
print("clicked:", mouse.x,mouse.y)
}
}
}
the real image size is 3840*1260, but when I click the bottom-right position with the mouse, it prints clicked: 683 547

Answer 1

A lot of the code is boilerplate for debugging. The important part is the three functions mapToImage() and getXPosition()/getYPosition(). The latter is for getting the offset at which the image is drawn, when Image.PreservedAspectFit can't fill the Image and horizontalAlginment/verticalAlignment are used.
The map function uses sourceSize and paintedWidth/paintedHeight to get the scaling between the original size of the image and the actual drawn image. Keep in mind that when changing sourceSize and not letting the image set it, this method of getting the scaling might not work.
Just a note from the documentation:
sourceSize can be cleared to the natural size of the image by setting
sourceSize to undefined.
import QtQuick
import QtQuick.Controls
Window {
id: root
visible: true
width: 800
height: 600
title: qsTr("Image Picking")
function getXPosition(image : Image) : real {
switch (image.horizontalAlignment) {
case Image.AlignLeft:
return 0
case Image.AlignRight:
return image.width - image.paintedWidth
case Image.AlignHCenter:
default:
return (image.width - image.paintedWidth) * 0.5
}
}
function getYPosition(image : Image) : real {
switch (image.verticalAlignment) {
case Image.AlignTop:
return 0
case Image.AlignBottom:
return image.height - image.paintedHeight
case Image.AlignVCenter:
default:
return (image.height - image.paintedHeight) * 0.5
}
}
function mapToImage(mouse : MouseEvent, image : Image) {
root.xScale = image.paintedWidth / image.sourceSize.width
root.yScale = image.paintedHeight / image.sourceSize.height
root.xImgPosition = Math.floor((mouse.x - root.getXPosition(image)) / root.xScale)
root.yImgPosition = Math.floor((mouse.y - root.getYPosition(image)) / root.yScale)
}
property real xScale: 0
property real yScale: 0
property real xImgPosition: 0
property real yImgPosition: 0
Image {
id: image
anchors.centerIn: parent
width: 320
height: 240
fillMode: Image.PreserveAspectFit
//horizontalAlignment: Image.AlignLeft
source: "https://picsum.photos/id/17/200/300"
mipmap: true
smooth: true
antialiasing: true
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onPositionChanged: function(mouse) { root.mapToImage(mouse, image) }
}
Rectangle {
anchors.fill: parent
color: "transparent"
border {
width: 1
color: "gray"
}
}
// Debug rectangle showing the real dimension of the image before clipping by the fillMode
Rectangle {
x: root.getXPosition(image)
y: root.getYPosition(image)
width: image.paintedWidth
height: image.paintedHeight
color: "transparent"
border {
width: 1
color: "red"
}
}
}
Rectangle {
width: column.width + 40
height: column.height + 40
color: Qt.rgba(0.3, 0.3, 0.3, 0.4)
Column {
id: column
x: 20
y: 20
spacing: 4
ComboBox {
width: 180
textRole: "text"
valueRole: "value"
onActivated: image.fillMode = currentValue
Component.onCompleted: currentIndex = indexOfValue(image.fillMode)
model: [
{ value: Image.Stretch, text: qsTr("Stretch") },
{ value: Image.PreserveAspectFit, text: qsTr("Preserve Aspect Fit") },
{ value: Image.PreserveAspectCrop, text: qsTr("Preserve Aspect Crop") }
]
}
Text { text: "Mouse: " + mouseArea.mouseX + ", " + mouseArea.mouseY }
Text { text: "Image: " + image.width + ", " + image.height }
Text { text: "Painted: " + image.paintedWidth + ", " + image.paintedHeight }
Text { text: "Source: " + image.sourceSize.width + ", " + image.sourceSize.height }
Text { text: "Scaling: " + root.xScale + ", " + root.yScale }
Text { text: "Position: " + root.xImgPosition + ", " + root.yImgPosition }
}
}
}