Making a circular profile picture in QtCreator

[Gilberrt]

I'm trying to develop a project and I have to make a profile picture that shows in a circle like the ones you normally see everywhere on a profile. Someone help me do that.
I knwo how to make a circle by making the radius of a rectangle half the width, my problem is fitting an image and clipping it so it doesn't appear outside the circle. How do I do that?

[SGaist]

Hi and welcome to devnet,

This might serve as good base.

Don't forget to credit the author.

[Markkyboy]

@Gilberrt - out of curiosity, which version of Qt are you using?, Qt5 or Qt6?

[Ronel_qtmaster]

@Gilberrt maybe this can help?

Item {
   id:circularImage
    anchors.fill: parent
    Rectangle
    {
        width: 500
        height: 500
        color: "#a2ecf5"
        radius:  width/2
        anchors.centerIn: parent

        Image {
            width: 350
            height: 350
            source: "image.png"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
        }

       }
 }

[mzimmers]

@SGaist just as a side note, the solution you referenced depends on QtGraphicalEffects 1.0 and so probably won't work in Qt 6. This seems to be the modern equivalent.

[SGaist]

@mzimmers good point ! Thanks for the updated version.

[ndias]

Solution @mzimmers reported will work.

Maybe I will recomend to set fillMode to PreserveAspectCrop to preserve aspect ratio of not square images.

import QtQuick.Effects will be required.

[Gilberrt]

@Markkyboy It's been long.....I'm using Qt Version 6.4

[SGaist]

Another solution is provided here.

[Gilberrt]

@Ronel_qtmaster Thanks for answering