Clickable irregular shapes in Qt/QML
-
@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.
-
@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? -
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 } }