propagateComposedEvents: mouse data not accurate?

问题

Update: Isn't it often the way: you ask a question and then discover the answer on your own a short time later.

It seems I have some confusion between referencing mouseX and mouseY in a MouseArea and getting the mouse data from the MouseEvent

If I change my code below to:

    var pt = Qt.point( mouse.x, mouse.y)

from what I had:

     var pt = Qt.point(mouseX, mouseY)

Then the newly created sprites are located at the click point. That's great but I am still not understanding the difference, particularly in this case since the MouseArea fills the entire window (parent).

The mouse data is the same in either approach, unless the mouse event has been propagated – then the mouse approach gives the correct data while mouseX, mouseY does not. That is the part that is confusing me.

Can anyone explain the difference in what is going on here?

I have made a reusable QML component which can load .png images with an alpha channel and handle clicks on transparent pixels by propagating the mouse event. I've got it working in the code below (any suggestions for improvement much welcomed) but it seems the mouse data is wrong.

In the image below I have marked the order and location of 3 clicks. In the log statements even though the mouse click position has changed, the reported position stays the same. So what is occurring is that although 3 sprites have been created, they are stacking on top of each other

Am I missing something about how a MouseArea reports the mouse position or how propagateComposedEvents works?

main clicked. Creating sprite at: 598.01953125 492.953125
graphic alpha clicked: 5.69921875 103.41015625 <----- EVENT PASSED THROUGH
main clicked. Creating sprite at: 598.01953125 492.953125
graphic alpha clicked: 121.953125 103.01953125 <----- EVENT PASSED THROUGH
graphic alpha clicked: 5.69921875 103.41015625 <----- EVENT PASSED THROUGH
main clicked. Creating sprite at: 598.01953125 492.953125

// main.qml

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2

ApplicationWindow {
    id: appWindow
    visible: true
    width: 1024
    height: 768
    title: qsTr("QtQuick")

    Item {
        id: container
        anchors.fill: parent

        property var events: new Array()
        property int counter: 0;

        MouseArea {
            anchors.fill: parent

            onClicked: {
                console.log("---------main clicked. Creating sprite at:", mouseX, mouseY);
                var pt = Qt.point(mouseX, mouseY)
                var component = Qt.createComponent("graphicAsset.qml");

                var imageName = "Earth-icon.png";
                var  sprite = component.createObject(container, {"x": pt.x, "y": pt.y, "imageSource": imageName});

            }
        }
    }
}

//graphicAsset.qml

import QtQuick 2.5

Canvas {
    id: graphicAsset
    width: 50
    height: 50

    property string imageSource;

    onImageSourceChanged:loadImage(imageSource)

    onImageLoaded: {
        var ctx = getContext("2d")
        var imageData = ctx.createImageData(imageSource)
        graphicAsset.width = imageData.width;
        graphicAsset.height = imageData.height;

        x = x - (imageData.width /2);
        y = y - (imageData.height /2);
        requestPaint();
    }

    onPaint: {
        if (isImageLoaded(imageSource)){
            var ctx = getContext("2d")
            var imageData = ctx.createImageData(imageSource)
            ctx.drawImage(imageData, 0, 0)
        }
    }

    MouseArea {
        anchors.fill: parent
        drag.target: parent

        propagateComposedEvents: true

        onClicked: {
            var ctx = parent.getContext("2d")
            var imageData = ctx.getImageData(mouseX, mouseY, 1, 1)

            if (imageData.data[3] == 0 ){
                console.log("graphic alpha clicked:", mouseX, mouseY);
                 mouse.accepted = false;

            } else {
                 mouse.accepted = true;
            }
        }
    }
}

回答1:

Mouse events' x and y positions are relative to the MouseArea that generated the event, as well as the coordinates of the mouse cursor within the same area (named mouseX and mouseY).

来源：https://stackoverflow.com/questions/34595544/propagatecomposedevents-mouse-data-not-accurate

标签

qml