CODEWITHSUNDEEP
qtqmlqtquickcontrolsqt5.7
James
James

Reputation: 2834

QT 5.7 QML quick semi-transparent rectangle, with rounded corners on one side

I want a semi-transparent rectangular shape using Qt Quick QML, but with rounded corners on 1 side only.

This is sort of the shape of the rectangle I want. If it were not see through, I would probably just overlap 2 rectangles, one with rounded corners and one without. However, this doesn't work with transparency, as the overlap becomes darker. 

     ----------|
   /           |
 /             | 
|              |
|              |
|              |
 \             | 
   \           |   
     ----------|

Anybody have any ideas?

Upvotes: 6

Views: 5217

Answers (1)

Mitch
Mitch

Reputation: 24406

You could use clipping (see performance docs) to cut off the corners of a single rounded rectangle:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    width: 300
    height: 300
    visible: true

    Item {
        width: 100
        height: 100
        anchors.centerIn: parent
        clip: true

        Rectangle {
            anchors.fill: parent
            anchors.rightMargin: -radius
            radius: 10
            color: "navajowhite"
            opacity: 0.5
        }
    }
}

You could also use layers to avoid the overlapping transparency issue:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    width: 300
    height: 300
    visible: true

    Item {
        width: 100
        height: 100
        opacity: 0.5
        layer.enabled: true
        anchors.centerIn: parent

        Rectangle {
            color: "navajowhite"
            radius: 10
            anchors.fill: parent
        }
        Rectangle {
            color: "navajowhite"
            anchors.fill: parent
            anchors.leftMargin: 10
        }
    }
}

As mentioned by @folibis, you can also use Canvas, for which there is already a similar answer.

Upvotes: 12

Related Questions