Why radius no effect when clip: true for Rectangle

RoyDut

I want to use a rec to clip a given image, but no change when set radius: 20. Could anyone please help?```

Item {
        id: electricity

        property real value: 0.7  // 0.0 ~ 1.0

        Image {
            x: 535
            y: 73
            width: 30
            height: 329
            source: "qrc:/Qml/New/Image/electricity_border.png"
        }

        Item {
            id: container2
            x: 539
            y: 79
            width: 22
            height: 317
        }

        Rectangle {
            id: clipper2
            width: 22
            height: 317 * electricity.value
            anchors.left: container2.left
            anchors.bottom: container2.bottom
            radius: 20
            clip: true

            Behavior on height {
                SpringAnimation {
                    spring: 0.7; damping:0.1; mass:0.2; epsilon:0.25
                }
            }

            Image {
                source: "qrc:/Qml/New/Image/electricity.png"
                width: 22
                height: 317
                anchors.bottom: parent.bottom
                anchors.left: parent.left
            }
        }
    }

Vitalii777

Please try to set mask like said here:
https://forum.qt.io/topic/145956/rounded-image-in-qt6/10

There are different ways to do this depending from Qt version you use.

SuhasKrishanamurthy

Item {
    id: electricity

    property real value: 0.7  // 0.0 ~ 1.0

    Image {
        x: 535
        y: 73
        width: 30
        height: 329
        source: "qrc:/Qml/New/Image/electricity_border.png"
    }

    Item {
        id: container2
        x: 539
        y: 79
        width: 22
        height: 317
    }

    Item {
        id: clipper2
        width: 22
        height: 317 * electricity.value
        anchors.left: container2.left
        anchors.bottom: container2.bottom

        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: Rectangle {
                width: clipper2.width
                height: clipper2.height
                radius: 20
                color: "white"
            }
        }

        Behavior on height {
            SpringAnimation {
                spring: 0.7; damping: 0.1; mass: 0.2; epsilon: 0.25
            }
        }

        Image {
            source: "qrc:/Qml/New/Image/electricity.png"
            width: 22
            height: 317
            anchors.bottom: parent.bottom
            anchors.left: parent.left
        }
    }
}

RoyDut

Thank you Vitalii777 and SuhasKrishanamurthy for your help. Much appreciated!
The code above working good.