QML实现图片圆角

Saturday, July 4, 2020

QML中的 Image 类型没有 radius 属性,不像 Rectangle 可以自定义圆角,借助 OpacityMask (需要导入 QtGraphicalEffects )把他们结合到一起即可实现图片圆角

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480
    title: "rouned image"
    Image {
        id: img
        anchors.centerIn: parent
        width: 200
        height: 200
        source: "qrc:/avatar.png"

        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: Rectangle {
                width: img.width
                height: img.height
                radius: 50
            }
        }
    }
}

效果:


参考:

qmlqt

this_thread::sleep_for()和chrono::duration, ratio;

Div+CSS实现文本居中左对齐