Qt World Summit: Register Today!

How to set the Mouse Area for certain part of the image?

  • For example i have am image of 400x400 but the rectangle in that image is only 100x100,
    i just want to set mouse area for that rectangle.
    how can i get it done in QT/QML?

  • Just have the MouseArea as a child of the image, and give the MouseArea a width and height of 100. If you need to place the MouseArea somewhere else in the image besides the top-left corner, use the x and y property of the MouseArea.

    The example below draws a 400x400 blue rectangle. I have placed a 100x100 MouseArea in the top right corner. When you click on it, it changes the color of the rectangle. In your case, just replace the Rectangle with Image

        width: 400
        height: 400
        color: "blue"
            x: 300
            y: 0
            width: 100
            height: 100
            onClicked: parent.color = Qt.hsva(Math.random(), 1, 0.7, 1)

  • Thank You @stcorp
    but, what if i have an arc in an image? and would want to set the mouse area?
    because the requirement is to arrange the arcs to form a circle, and on clicking an individual arc i should perform certain action.
    but on arranging the arcs the images are overlapping.

  • Moderators

    @Nisha_R May be what you are look for is the masked mousearea.
    It is under <QtDir>/Examples/Qt-5.7/quick/customitems/maskedmousearea

  • I'm not sure how to do this myself, but take a look at this, it seems like it could be a solution for you: https://forum.qt.io/topic/32045/non-rectangular-mouse-area-triangular-or-polygon-solved/8

    Edit: Oops, seems p3c0 already posted that solution while I was still searching for it :P

  • Thank you @p3c0 @stcorp ,
    Got it that was what i exactly wanted.

  • @Nisha_R

    You'll need a little bit of C++ to get this working.

    First, drop the maskedmousearea.cpp and maskedmousarea.h files into your project directory. Then in QtCreator, right click on your project and click "Add Existing Files..." and add these two files to your project.

    Next you need to make some edits to your main.cpp file. In the includes, include the following:

    #include "maskedmousearea.h"

    Now register this new type with the QML so you can use it in your QML code. This is done by pasting the following line into the main function of main.cpp (near the beginning of the function. It has to be placed before your QML is loaded):

    qmlRegisterType<MaskedMouseArea>("Example", 1, 0, "MaskedMouseArea");

    Now it is ready to be used in your QML. Import it using the following:

    import Example 1.0

    And then create the MaskedMouseArea using the following

    MaskedMouseArea {
                id: maskedmousearea
                anchors.fill: parent
                alphaThreshold: 0.4
                maskSource: parentimage.source

    But you should really have a look at the example if you want to see more about how it is implemented

  • @stcorp thank you.

Log in to reply