propagateComposedEvents：鼠标数据不准确？

Question

更新：这不是通常的方式：您提出一个问题，然后在短时间内自己发现答案。

在MouseArea 中引用mouseX 和mouseY 与从MouseEvent 获取鼠标数据之间似乎有些混淆

如果我将下面的代码更改为：

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

从我所拥有的：

     var pt = Qt.point(mouseX, mouseY)

然后新创建的精灵位于点击点。这很好，但我仍然不理解其中的区别，尤其是在这种情况下，因为 MouseArea 填充了整个窗口（父窗口）。

两种方法中的鼠标数据都是相同的，除非鼠标事件已被传播——那么mouse 方法会提供正确的数据，而mouseX, mouseY 则不会。这是让我困惑的部分。

谁能解释这里发生的不同之处？

---

我制作了一个可重用的 QML 组件，它可以加载带有 alpha 通道的 .png 图像，并通过传播鼠标事件来处理对透明像素的点击。我已经让它在下面的代码中工作了（欢迎任何改进建议），但鼠标数据似乎是错误的。

在下图中，我标记了 3 次点击的顺序和位置。在日志语句中，即使鼠标点击位置发生了变化，报告的位置也保持不变。所以发生的情况是，虽然已经创建了 3 个精灵，但它们彼此堆叠

我是否遗漏了 MouseArea 如何报告鼠标位置或 propagateComposedEvents 如何工作？

---

1. 主点击。在以下位置创建精灵：598.01953125 492.953125

2. 已点击图形 alpha：5.69921875 103.41015625 主要点击。在以下位置创建精灵：598.01953125 492.953125

3. 点击了图形 alpha：121.953125 103.01953125 图形 alpha 点击：5.69921875 103.41015625 主要点击。在以下位置创建精灵：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;
            }
        }
    }
}

Answer 1

鼠标事件的 x 和 y 位置相对于生成事件的 MouseArea 以及同一区域内的 coordinates of the mouse cursor（命名为 mouseX 和 mouseY）。