Round the Corner of Map
-
Hi, I need to use map for an application. It will be on a rectangle with a radius. I want to round the corners of the map the same way I round the corners of the rectangle. The QML Map type does not allow this. How can I do this? Thank you for your help.![alt metni]
-
I'm trying but I have no idea how to implement it :( @Markkyboy
-
Have you looked at the docs?, https://doc.qt.io/qt-5/qml-qtgraphicaleffects-opacitymask.html, albeit the docs don't mention 'layer' which may not be required. Without seeing your code, it is guess work on my part. Also, see here https://doc.qt.io/qt-5/qml-qtquick-item.html for information on 'layer.enabled'
EDIT: here's some code for you try;
import QtQuick 2.12 import QtQuick.Window 2.12 import QtGraphicalEffects 1.0 Window { width: 640 height: 480 visible: true color: "lightgrey" title: qsTr("tacdin - rounded corners") Rectangle { id: background width: 350 height: 150 radius: 20 color: "#fef2cc" border { width: 1 color: "black" } anchors.centerIn: parent } Image { id: map source: "map.jpg" anchors.centerIn: parent layer.enabled: true layer.effect: OpacityMask { maskSource: Rectangle { width: background.width height: background.height radius: background.radius } } } }
-
Have you looked at the docs?, https://doc.qt.io/qt-5/qml-qtgraphicaleffects-opacitymask.html, albeit the docs don't mention 'layer' which may not be required. Without seeing your code, it is guess work on my part. Also, see here https://doc.qt.io/qt-5/qml-qtquick-item.html for information on 'layer.enabled'
EDIT: here's some code for you try;
import QtQuick 2.12 import QtQuick.Window 2.12 import QtGraphicalEffects 1.0 Window { width: 640 height: 480 visible: true color: "lightgrey" title: qsTr("tacdin - rounded corners") Rectangle { id: background width: 350 height: 150 radius: 20 color: "#fef2cc" border { width: 1 color: "black" } anchors.centerIn: parent } Image { id: map source: "map.jpg" anchors.centerIn: parent layer.enabled: true layer.effect: OpacityMask { maskSource: Rectangle { width: background.width height: background.height radius: background.radius } } } }
@Markkyboy The code worked! thank you very much. :) Kind regards
-
@Markkyboy The code worked! thank you very much. :) Kind regards
@tacdin said in Round the Corner of Map:
The code worked!
great, so please don't forget to mark your post as solved.
-
Have you looked at the docs?, https://doc.qt.io/qt-5/qml-qtgraphicaleffects-opacitymask.html, albeit the docs don't mention 'layer' which may not be required. Without seeing your code, it is guess work on my part. Also, see here https://doc.qt.io/qt-5/qml-qtquick-item.html for information on 'layer.enabled'
EDIT: here's some code for you try;
import QtQuick 2.12 import QtQuick.Window 2.12 import QtGraphicalEffects 1.0 Window { width: 640 height: 480 visible: true color: "lightgrey" title: qsTr("tacdin - rounded corners") Rectangle { id: background width: 350 height: 150 radius: 20 color: "#fef2cc" border { width: 1 color: "black" } anchors.centerIn: parent } Image { id: map source: "map.jpg" anchors.centerIn: parent layer.enabled: true layer.effect: OpacityMask { maskSource: Rectangle { width: background.width height: background.height radius: background.radius } } } }
@Markkyboy Another problem is this. As you can see in the figure, there is a rectangle on the map. When I slide the slider inside the rectangle, the map also slides! (pan,flick). What should be done to prevent this?
-
@Markkyboy Another problem is this. As you can see in the figure, there is a rectangle on the map. When I slide the slider inside the rectangle, the map also slides! (pan,flick). What should be done to prevent this?
-
M Markkyboy referenced this topic on