检测鼠标光标何时位于 Qt5 和 QML 中的不规则形状图片上

Question

我正在使用 Qt5 和 QML（QtCreator 和 C++）开发一个小应用程序。

我想显示一张包含国家/地区的地图，当用户将鼠标移至某个国家/地区时，我想更改该国家/地区的颜色，认为这很容易，而且如果所有国家/地区都是矩形的话。

    Image {
    id: mycountry
    width: 250
    height: 250
    source: "images/myCountry_gray.png"

    MouseArea {
        anchors.fill: parent
        hoverEnabled : true
        onEntered: {
            region.source = "images/myCountry_red.png"
        }
        onExited: {
            region.source = "images/myCountry_gray.png"
        }
    }
}

不幸的是，国家的形状不规则，我只想突出显示鼠标光标在其边界内的国家

你知道如何开发它吗？我认为单独使用 QML 是不可能的。

Answer 1

使用 QPainterPath to construct the shape of each country. You can do this using moveTo() and lineTo(). Once you have this, make it a member variable of a custom QQuickItem - 我们称它为 CountryItem。在通过 CountryMapModule:

将图像暴露给 QML 后，您可以使图像成为该项目的子项

import CountryMapModule 1.0

CountryItem {
    implicitWidth: mapImage.implicitWidth
    implicitHeight: mapImage.implicitHeight

    Image {
        id: mapImage
        source: ":/images/australia.png"
    }
}

覆盖 QPainterPath 的 QQuickItem::mouseMoveEvent() to allow the item to check for mouse movement. The contains() 函数然后可以用来检查鼠标是否在其中。您可能需要缩放路径以适应图像的大小。

检测鼠标光标何时位于 Qt5 和 QML 中的不规则形状图片上

detect when mouse cursor is over an irregular shape picture in Qt5 and QML

qt

qml

qt5