check Hover in pool of rectangles



  • Hello Everyone,
    I have main Canvas that contains a pool of rectangles I want to show a popup for each hovered rectangle, how could that possibly be done ?
    I always can check this with the last created one, but the taken action applied on all of other rectangles.


  • Moderators

    @Anas-A.-Ismail You can add MouseArea inside each Rectangle and set hoverEnabled property to true the when mouse is hovered over these rectangle onEntered event handler is triggerred. You can invoke a popup from there.



  • @p3c0 I'm drawing the rectangles dynamically at runtime, so when I hover on one of them, the action accepted from the last created rectangle.


  • Moderators

    @Anas-A.-Ismail Do you mean you are drawing rectangles with Canvas API's ?



  • @p3c0 I'm drawing rectangles using Mouse (Drag/Drop) on a Canvas, So I have multiple rectangles on the same Canvas which created dynamically on run time using createObject method, I need to deal with each rectangle separately, like this image here


  • Moderators

    @Anas-A.-Ismail Trying to understand. Did you create Rectangle's using createObject ? In that case you can put MouseArea inside it as said earlier.



  • @p3c0 Yes I did that, but hover property applied only on the last created Rectangle, and when I hover on it the wanted action applied on all rectangles like this image, I want to apply this action on each rectangle separately without affecting the others.

    Thanks.


  • Moderators

    @Anas-A.-Ismail That's strange. Each Rectangle will have its own MouseArea and which will generate hover events for that particular Item only. Can you post the relevant code ?



  • @p3c0
    img.qml

    Item{
       Canvas{
            id: mainCanvase
            width: 640
            height: 480
            visible: true
            anchors.fill: parent
    //        layer.enabled: false
            BoundingBox{
                id: imgBox
            }
    
            MouseArea{
                property Rectangle boundingBox: null
                property Component commentBox: null
                id: mainCanvaseMouseArea
                anchors.fill: parent
    
                onPressed: {
                   var boundingBoxObj = imgBox.createObject (mainCanvase, {"x" :mouse.x, "y": mouse.y});
                    boundingBox = boundingBoxObj;
                }
    
                onReleased: {
                    if((boundingBox.width >2) && (boundingBox.height > 2))
                    {
                        boundingBox.createCommentBox();
                        mainCanvaseMouseArea.enabled = false;
                    }
                    else
                    {
                        boundingBox.destroy();
                    }
                }
    
                onPositionChanged: {
                    boundingBox.width = (Math.abs (mouse.x - boundingBox.x));
                    boundingBox.height = (Math.abs (mouse.y - boundingBox.y));
                }
            }
        }
    }
    

    boundingbox.qml

    Component{
        id: boundingBoxComponent
    
        Rectangle{
            id: boundingBoxRect
            objectName: "boundingBoxRect"
            border.color: "red"
            radius: 10
            color: "transparent"
            property color onHoverColor: "blue"
            property color defaultColor: "red"
            property bool isHovered: true
            property Component commentBox: null
    
            function createCommentBox(){
                commentBox = Qt.createComponent("commentBox.qml")
                commentBox.createObject(boundingBoxRect,{"y": boundingBoxRect.height+5})
            }
    
            MouseArea{
                id: boundingBoxMouseArea
                //properties
                hoverEnabled: true
                anchors.fill: parent
    
                //events
                onEntered: {
                    parent.border.color = onHoverColor;
                    isHovered = true;
                }
                onExited: {
                    parent.border.color = defaultColor;
                    isHovered = false;
                }
            }
        }
    }
    

  • Moderators

    @Anas-A.-Ismail According to your code property Rectangle boundingBox will always point to the last created or the latest created Item.



  • @p3c0 Thank You, your answers were really helpful, it's solved.



Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.