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

Posted 2023-03-30

【中文标题】检测鼠标光标何时在 Qt5 和 QML 中的不规则形状图片上

【英文标题】：detect when mouse cursor is over an irregular shape picture in Qt5 and QML

【发布时间】：2015-05-09 17:05:37

【问题描述】：

我正在使用 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 是不可能的。

【参考方案1】：

使用QPainterPath 构建每个国家的形状。您可以使用moveTo() 和lineTo() 执行此操作。一旦你有了这个，让它成为自定义QQuickItem 的成员变量——我们称之为CountryItem。在通过CountryMapModule 将图像暴露给 QML 后，您可以将图像设为该项目的子项：

import CountryMapModule 1.0

CountryItem 
    implicitWidth: mapImage.implicitWidth
    implicitHeight: mapImage.implicitHeight

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

覆盖QQuickItem::mouseMoveEvent() 以允许项目检查鼠标移动。然后可以使用QPainterPath 的contains() 函数来检查鼠标是否在其中。您可能需要缩放路径以适合图像的大小。

【讨论】：

非常漂亮整洁的方法！

我只是想说我让它工作了，但我没有使用 QPainterPath 而是 QImage。检查鼠标坐标是否在 alpha 分量等于 0 的像素上。