учебник Изображение округлых углов в QML




qt quick (6)

Когда ваш фон имеет сплошной цвет или когда вы никогда не перемещаете изображение, быстрый способ сделать закругленные углы - это совмещение вашего Image с другим (или с BorderImage ), которое только рисует углы.

Если это не вариант, но вы используете OpenGL, другой способ - применить маску к изображению через пиксельный шейдер. См. http://blog.qt.digia.com/blog/2011/05/03/qml-shadereffectitem-on-qgraphicsview/ для плагина, который работает поверх Qt 4.

Наконец, также возможно написать QDeclarativeImageProvider который предварительно обрабатывает ваше изображение, чтобы закруглить углы.

К моему удивлению, компонент Image не имеет свойства radius . Я попытался имитировать закругленные углы, поставив изображение в закругленный Rectangle , но он не закрепил углы.

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"
    }
}

Как я могу создать изображение с закругленными углами правильно?


Хотя и принятый ответ, и один из @fury работали одинаково хорошо для меня (Qt 5.9.3), они оба оставили некоторые аберрации в углах при применении к растровым изображениям (у них не было файлов с SVG). То, что лучше всего работало для меня во всех случаях, - это применить OpacityMask к окружающему элементу, например, как прямоугольник в исходном сообщении.

Rectangle {
    id: root;
    anchors.right: rectContentBg.left
    anchors.top: rectContentBg.top
    anchors.margins: 8

    radius: 8

    width: 64
    height: 64

    // apply rounded corners mask
    layer.enabled: true
    layer.effect: OpacityMask {
        maskSource: Rectangle {
            x: root.x; y: root.y
            width: root.width
            height: root.height
            radius: root.radius
        }
    }

    Image {
        id: imgAuthor
        opacity: 1
        smooth: false
        anchors.fill: parent
        source: "qrc:/res/sample_avatar.jpg"
    }
}

Если у вас есть одноцветный фон, вы можете рисовать с помощью границы закругленного прямоугольника сверху.

Image{
    id:img
}
Rectangle { // rounded corners for img
    anchors.fill: img
    color: "transparent"
    border.color: "blue" // color of background
    border.width: 4
    radius: 4
}

Этот код поможет вам

Rectangle {
    width: 200
    height: 200

    color: "transparent"

    //this Rectangle is needed to keep the source image's fillMode
    Rectangle {
        id: imageSource

        anchors.fill: parent
        Image {
            anchors.fill: parent
            source: "your_image_file_path"

            fillMode: Image.PreserveAspectCrop
        }
        visible: false

        layer.enabled: true
    }

    Rectangle {
        id: maskLayer
        anchors.fill: parent
        radius: parent.width / 2

        color: "red"

        border.color: "black"

        layer.enabled: true
        layer.samplerName: "maskSource"
        layer.effect: ShaderEffect {

            property var colorSource: imageSource
            fragmentShader: "
                uniform lowp sampler2D colorSource;
                uniform lowp sampler2D maskSource;
                uniform lowp float qt_Opacity;
                varying highp vec2 qt_TexCoord0;
                void main() {
                    gl_FragColor =
                        texture2D(colorSource, qt_TexCoord0)
                        * texture2D(maskSource, qt_TexCoord0).a
                        * qt_Opacity;
                }
            "
        }

    }

    // only draw border line
    Rectangle {
        anchors.fill: parent

        radius: parent.width / 2

        border.color: "black"
        border.width: 2

        color: "transparent"
    }
}


Я знаю, что немного опаздываю на вечеринку, но я попал сюда по поиску в Google, поэтому подумал, что буду помогать будущим поколениям :) QtGraphicalEffects OpacityMask должен сделать это немного проще (у меня были проблемы с подходом уровня эффекта)

Image {
    id: imgAuthor

    width: 64
    height: 64

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

    visible: false // this is needed or the corners of the image will be visible underneath the opacity mask
}

OpacityMask {
    anchors.fill: imgAuthor
    source: imgAuthor
    maskSource: Rectangle {
        width: imgAuthor.width
        height: imgAuthor.height
        radius: 8
        visible: false // this also needs to be invisible or it will cover up the image
    }
}