qml Image绘制圆角(图片绘制圆角)

qml Image绘制圆角(图片绘制圆角)

在网上寻求了很多方法，大部分使用到了 OpacityMask，但是由于我的图像使用了自适应尺寸
fillMode: Image.PreserveAspectFit，所以其实达不到我想要的效果，所以出了如下攻略，期待你的点赞！

完整源码

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

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

    //缩略图本体
    Image {
        id: image
        source: "file:///home/lmh/Pictures/1000张图片素材/20071014224036691.jpg"
        asynchronous: true
        anchors.centerIn: parent
        width: 200
        height: 200
        //使用PreserveAspectFit确保在原始比例下不会变形
        fillMode: Image.PreserveAspectFit
        clip: true
        visible: false //因为显示的是OpacityMask需要false
    }

    //圆角遮罩Rectangle
    Rectangle {
        id: maskRec
        anchors.centerIn: parent
        width: image.width
        height: image.height

        color:"transparent"
        Rectangle {
            anchors.centerIn: parent
            width: image.paintedWidth
            height: image.paintedHeight
            color:"black"
            radius: 10
        }
        visible: false //因为显示的是OpacityMask需要false
    }

    //遮罩后的图案
    OpacityMask {
        id: mask
        anchors.fill: image
        source: image
        maskSource: maskRec
    }
}

代码讲解

其实就是maskRec的子Rectangle作为image的显示区域

疑问一：为什么要用Rectangle包含 Rectangle，因为我只需要image的真实显示宽高，比如一张图原始尺寸为1920 1080，那么在设置宽高为200200后，他的自适应尺寸为200112.5，那么我的圆角就会是需要绘制200112.5的区域，所以使用这种方案

疑问二：遮罩的Rectangle和Image为什么要visible设置为false
因为我们需要显示的遮罩后的图案，原始图案就隐藏了

效果

横图:

竖图:

有问必答！