[Qt-qml] partial MouseArea

[Adriano Rezende]

On Sun, Aug 22, 2010 at 9:36 PM, Bartosh Wroblevksy <bartosh at live.com> wrote:
> I would like to set a partial MouseArea determine by real coordinates on an
> image. Is this possible in QML?

For simple shapes you can handle it from QML side.
For example, if you want to detect mouse clicks inside a circle you
can create a circle mouse area like below:

Item {
    width: 200
    height: 200

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("back clicked");
    }

    MouseArea {
        id: circleMouseArea
        anchors.fill: parent
        onClicked: console.log("circle clicked");
        onPressed: mouse.accepted = circleMouseArea.contains(mouse.x, mouse.y);

        function contains(x, y) {
            var d = (area.width / 2);
            var dx = (x - area.width / 2);
            var dy = (y - area.height / 2);
            return (d * d > dx * dx + dy * dy);
        }
    }
}

You can extend it to other shapes like ellipses, polygons, and so on.
But if you want to detect using an image as a shape, you will need to
create an image component in C++ side that exports pixel access, since
QML Image element doesn't expose such method.

With this new image component you could do the detection like below:

MouseArea {
    anchors.fill: image
    onPressed: mouse.accepted = image.contains(mouse.x, mouse.y);
}


BR,
Adriano