Make Image Round

[Mariam Alshamsi]

Hello everyone,

I wanted to post my issue regarding 6.8.2 qt as I am unable to make a picture round because Qt Graphical Effects is not compatible with qt 6 but it is with 5. Any work arounds I could use?

[J.Hilk]

Well, there's always clipping to a round parent

Rectangle {
    width: 100
    height: 100
    radius: width / 2  // Makes it a circle
    clip: true         // Clips child content to this shape

    Image {
        anchors.fill: parent
        source: "myphoto.jpg"
        fillMode: Image.PreserveAspectCrop
        smooth: true
    }

    border.color: "#aaa"
    border.width: 1
}

not the ideal solution but a requested workaround.

I'm surprised there is no comparable feature in Qt6, how did you do it in Qt5?

[J.Hilk]

Ah, found it, good old Multieffect to the rescue:

import QtQuick
import QtQuick.Window
import QtQuick.Effects

Window {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MultiEffect {
        source: image
        anchors.fill: image
        maskEnabled: true
        maskSource: mask
    }

    Image {
        id: image
        source: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Qt_logo_2016.svg/2560px-Qt_logo_2016.svg.png"
        visible: false

        width: root.width
        height: root.height
        smooth: true
        fillMode: Image.PreserveAspectFit
    }

    Item {
        id: mask
        anchors.fill: image; layer.enabled: true; visible: false
        Rectangle { anchors.fill: parent; radius: root.width/2 }
    }
}

[Mariam Alshamsi]

@J.Hilk I have tried this its not clipping for some reason, However just to add I am using CMake and Gradle to make a quick app for Android

[Mariam Alshamsi]

@J.Hilk import QtQuick.Effects package is not available either , I have been juggling this issue for two days now :) , Last solution I came to reach is to design a png square with the background color and cropped circle inside it and layer it over the picture I am using. I have tried a package called Graphics 5 compact also is not working, nor shaders even though I have them under my 6.8.2 Idk whats wrong honestly tried every route even chatgpt is fed up.

[J.Hilk]

well, its working flawlessly for me:

what do you mean with

import QtQuick.Effects package is not available either

are you sure you're using Qt6 ? It should be part of the base QtQuick module

[Mariam Alshamsi]

@J.Hilk yes I am sure, but apparently android is not rendering the images when I apply it, however this workaround that I mention worked for me finally.