Image coins arrondis en QML

Question

À ma grande surprise, le composant Image n'a pas de propriété radius. J'ai essayé d'émuler les coins arrondis en mettant l'image dans un Rectangle arrondi, mais cela ne clipse pas les coins.

Rectangle {
    anchors.right: rectContentBg.left
    anchors.top: rectContentBg.top
    anchors.margins: 8

    radius: 8

    width: 64
    height: 64

    Image {
        id: imgAuthor

        opacity: 1
        smooth: false

        anchors.fill: parent

        source: "qrc:/res/sample_avatar.jpg"
    }
}

Comment puis-je créer une image avec des coins arrondis correctement ?

Answer 1

QML prend actuellement en charge uniquement le rognage rectangulaire, mais vous voudrez peut-être jeter un œil à DeclarativeMaskedImage dans le projet qt-components:

http://qt.gitorious.org/qt-components/qt-components/blobs/master/src/symbian/sdeclarativemaskedimage.h

Answer 2

Je sais que je suis un peu en retard pour la fête, mais j'y suis arrivé en faisant une recherche sur Google, alors j'ai pensé aider les futures générations :) QtGraphicalEffects OpacityMask devrait faire cela un peu plus simplement (j'ai eu des problèmes avec l'approche de l'effet de couche)

Image {
    id: imgAuthor

    width: 64
    height: 64

    source: "qrc:/res/sample_avatar.jpg"

    visible: false // cela est nécessaire sinon les coins de l'image seront visibles sous le masque de transparence
}

OpacityMask {
    anchors.fill: imgAuthor
    source: imgAuthor
    maskSource: Rectangle {
        width: imgAuthor.width
        height: imgAuthor.height
        radius: 8
        visible: false // cela doit également être invisible sinon cela recouvrira l'image
    }
}

Answer 3

Si vous avez un arrière-plan unicolore, vous pouvez dessiner avec la bordure d'un rectangle arrondi sur le dessus.

Item {
    property int radius: 0
    property color bgColor: "#000000"
    property int drawRadius: radius > 0 ? radius : width/2

    Image {
        anchors.fill: parent
        sourceSize: Qt.size(width, height)
        asynchronous: true
    }

    Canvas {
        anchors.fill: parent
        antialiasing: true
        onPaint: {
            var ctx = getContext("2d")
            ctx.fillStyle = bgColor
            ctx.beginPath()
            ctx.rect(0, 0, width, height)
            ctx.fill()

            ctx.beginPath()
            ctx.globalCompositeOperation = 'source-out'
            ctx.roundedRect(0, 0, width, height, drawRadius, drawRadius)
            ctx.fill()
        }
    }
}