Solved 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
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) } }
-
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. -
@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
-
-
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.