1 Clip round rectangles

Mehran Dehghanian edited this page 4 years ago

Using the clip property to crop child objects inside Item or Rectangle

https://evileg.com/en/post/577/

Short Version

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0

Item{
    id: root

    width: parent.width
    height: parent.height

    Rectangle{
        id: itemDelegate
        width: 300
        height: 96
        color: "#1aebebeb"
        radius: height/4
        border.color: "#9de000"
        clip: true

        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: Item {
                width: itemDelegate.width
                height: itemDelegate.height
                Rectangle {
                    anchors.centerIn: parent
                    width: itemDelegate.width
                    height: itemDelegate.height
                    radius: itemDelegate.radius
                }
            }
        }

        Rectangle{
            width: parent.width*0.25
            height: parent.height
            color: "#9de000"
        }

        Row{
            width: parent.width
            height: parent.height
        }
    }
}

Table of Contents

• Using the clip property to crop child objects inside Item or Rectangle
• Short Version