Please nominate your Qt Champions for 2021! https://forum.qt.io/topic/132134/looking-for-the-2021-qt-champions

Image inside a Rectangle ignores radius



  • Hello,
    I have a very simple question: I want to put an Iage inside a Rectangle. Something like this:

    @
    Rectangle {
    width: 800
    height: 600
    radius: 20

    Image {
        source: "path/to/file.png"
        anchors.fill: parent
        fillMode: Image.PreserveAspectCrop
    } 
    

    }
    @

    The problem is the image ignores the rectangle's radius! Hence, it extends over the corners.
    How to draw the images really "inside" the rectangle, so the corners are reduced according?

    Thanks!
    Mark



  • See "QTBUG-9008":https://bugreports.qt-project.org/browse/QTBUG-9008

    It is as designed.

    It is not handy, but what I do is make an image for the rounded rectangle with the corners having the color of the background, and use it in a border-image so I can stretch it without distorting it. I make that lay on top of my content of the rounded rect .
    @
    Item {
    width: 800
    height: 600
    Image {
    source: "path/to/file.png"
    anchors.fill: parent
    fillMode: Image.PreserveAspectCrop
    }

    // last so it is on top (or use the z: )
    BorderImage {
        source: "roundedrect.png"
        anchors.fill: parent
        border {left: 25; top: 25; right: 25; bottom: 25}
    }
    

    }
    @



  • What a pity! QML is so powerful I'm astonished it cannot mask an image. I know the docs says for "performance" reasons, but let the choice to the user!

    Anyway I can't use your solution, unfortunately. I need to generate on-the-fly (at runtime) the mask. The application searches for any image in a folder and put each one in a rounded rectangle with different sizes and colors.

    I found this:

    http://qt-project.org/forums/viewthread/7037

    I removed the import Qt.labs.shaders 1.0 and changed ShaderEffectItem in ShaderEffect - still no chance.
    I got the following error:

    @QQuickShaderEffect: 'qt_ModelViewProjectionMatrix' does not have a matching property!
    @

    I searched for any documentation but I found nothing. Do you have any idea about?



  • Ah sorry to here that.

    I have no knowledge of GLSL. So hopefully someone else can help you with that.



  • @_Mark_ qWarning("ShaderEffect: qt_ModelViewProjectionMatrix is deprecated. Use qt_Matrix instead.");


Log in to reply