Rounded Image Corners



  • Hi there,
    i'm trying to create a rectangle with an image in it. The rectangle should have rounded corners.
    My code looks like this:
    @import QtQuick 2.0

    Image {
    id: background
    source: "../background.jpg"
    width: 360
    height: 360
    focus: true

    Rectangle {
        id: rectangle
        x: 30
        y: 30
        width: 300
        height: 300
        color: "#ffffff"
        radius: 20
        border.width: 5
        border.color: "#000000"
    
        Image {
            id: image
            width: 300
            height: 300
            source: "../example.jpg"
        }
    }
    

    }@

    My problem is, that the image is still an rectangle without rounded corners.
    Does anyone know how to fix that?



  • Enable clipping on the rectangle.



  • Hi Andre,
    thanks for your reply.
    However enabling clipping sadly did not solve the problem.

    This is the updated code:
    @import QtQuick 2.0

    Image {
    id: background
    source: "../background.jpg"
    width: 360
    height: 360
    focus: true

    Rectangle {
        id: rectangle
        x: 30
        y: 30
        width: 300
        height: 300
        color: "#ffffff"
        radius: 20
        border.width: 5
        border.color: "#000000"
        clip: true
    
        Image {
            id: image
            width: 300
            height: 300
            source: "../example.jpg"
          
        }
    }
    

    }
    @

    Do you have an idea how to fix this issue?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.