Clickable irregular shapes in Qt/QML

tomoO

Hi, is it possible in Qt/QML to create clickable/hoverable units with uneven, irregular shapes (picture)? Once I hover over a region, I want it to change color and display some information.

GrecKo

@tomoO You could do that with https://doc.qt.io/qt-6/qquickitem.html#contains or https://doc.qt.io/qt-6/qml-qtquick-item.html#containmentMask-prop if each shape is a separate item.

If everything is a single flat item you could do the hit test yourself and change how you are rendering it.

tomoO

@GrecKo
I have 1 flat png file and also I have extracted each region in GIMP, having every one of them in separate png file.
So as I get it, to test first proposed method, I would have to connect them all together. Is it somehow possible to connect them and get the same overall shape as original one?

jeremy_k

I'm a fan of using the pixel color in similar hit test problems. If working purely with QML is a requirement, Canvas enables reading individual pixels. Use an image with 1 color per region, and your choice of lookup table implementation to map from color to the region name, index, etc.

import QtQuick
import QtQuick.Window

Window {
    id: root
    property url mapUrl
    property url displayUrl

    Canvas {
        id: canvas
        anchors.fill: parent
        visible: false
        onPaint: {
            var ctx = getContext("2d");
            if (isImageLoading(root.mapUrl)) {
                return;
            } else if (isImageLoaded(root.mapUrl)) {
                ctx.drawImage(root.mapUrl, 0, 0);
            } else {
                loadImage(root.mapUrl);
            }
        }

        onImageLoaded: requestPaint()

        function colorAt(x, y) {
            var imageData = canvas.context.getImageData(x * Screen.devicePixelRatio, y * Screen.devicePixelRatio, 1, 1);
            return imageData.data[0] << 24 | imageData.data[1] << 16 | imageData.data[2] << 8 | imageData.data[3];
        }
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onPositionChanged: print(canvas.colorAt(mouseX, mouseY))
      }

    Image {
        source: root.displayUrl
    }   
}