quick mouse area and onclick

Dinesh Lama

I am trying to display an image in qml page, which can be dragged and zoom both. When the user clicks on any of given image area i want the image pixel coordinates where the user has clicked but instead i'm getting the poistion of the parent item in which the image is present. Here is the code:

Item{
        id: mapItemArea
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 174
        anchors.leftMargin: 0
        clip: true
        Image {
            id: mapImg
            anchors.fill: mapItemArea
            source: map_path
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0
            anchors.rightMargin: 0
            fillMode: Image.Stretch
            // Images are loaded asynchronously, only useful for local images
            asynchronous: true
            Image {
                id: loc_icon
                x: mapDragArea.mouseX/resolution + map_origin.x
                y: mapDragArea.mouseY/resolution + map_origin.y
                width: 22
                height: 13
                source: "../images/loc.png"
                visible: false
            }
        }

        MouseArea {
            id: mapDragArea
            width: 306
            anchors.fill: mapImg
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0
            drag.target: mapImg
            // Here, the picture will not be dragged out of the display area whether it is larger or smaller than the display frame
            drag.minimumX: (mapImg.width > mapItemArea.width) ? (mapItemArea.width - mapImg.width) : 0
            drag.minimumY: (mapImg.height > mapItemArea.height) ? (mapItemArea.height - mapImg.height) : 0
            drag.maximumX: (mapImg.width > mapItemArea.width) ? 0 : (mapItemArea.width - mapImg.width)
            drag.maximumY: (mapImg.height > mapItemArea.height) ? 0 : (mapItemArea.height - mapImg.height)

            onWheel: {                                 // Every scroll is a multiple of 120
                var datla = wheel.angleDelta.y/120
                if(datla > 0)
                {
                    mapImg.scale = mapImg.scale/0.9
                }
                else
                {
                    mapImg.scale = mapImg.scale*0.9
                }
            }
            onClicked: {
                fnameFieldX.text = mapDragArea.mouseX
                fnameFieldY.text = mapDragArea.mouseY
                loc_icon.x = mapDragArea.mouseX
                loc_icon.y = mapDragArea.mouseY
                loc_icon.visible = true
            }
        }
    }

Example scenario. I zoom the map and click around (0,0) of the main window, but the position is comming as (63, 74)

before zoom and drag:

Please help me.

sierdzio

Anchor the mouse area to parent Item, not to Image.

By the way, you can use Flickable to get the same results easier.