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

Nisha_R

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?

stcorp

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

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

Nisha_R

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.

p3c0

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

stcorp

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

Nisha_R

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

stcorp

@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

Nisha_R

@stcorp thank you.