最近美化了一下前端，图片的圆角裁剪之前卡了我很久，一直找不到有效的方法，现在学会了用遮罩OpacityMask去实现这个效果了，下面给出一个示例并细解一下：

一、示例代码

Image {
    id: img
    width: 120
    height: 120
    source: "qrc:/IMG/test.jpg"
    fillMode: Image.PreserveAspectCrop
    anchors.centerIn: parent
    layer.enabled: true
    layer.smooth: true
    layer.effect: OpacityMask {
        maskSource: Rectangle {
            width: img.width
            height: img.height
            radius: 20 
            color: "white"
        }
    }
}

二、属性

fillMode: Image.PreserveAspectCrop

fillMode是控制图片的填满方式，常用的几个有：

Image.Stretch：把图片拉伸，去铺满整个区域（可能变形）

Image.PreserveAspectFit：按比例缩放，可能留下空白

Image.PreserveAspectCrop：按比例缩放，保证区域完全填满，多余部分裁剪

Image.Pad：不缩放，空余部分透明

layer.enabled: true

layer直译是层，也就是把Item渲染到单独的一个离屏缓冲区，将其设为启用

layer.smooth: true

使图片缩放时边缘变得平滑，类似抗锯齿（目前感觉没啥效果）

layer.effect: OpacityMask

使用“特效”来处理这个离屏层，而OpacityMask是遮罩效果，能够用maskSource的形状来裁剪图片，具体的例子在Qt的帮助中有，可以按F1查看

这个遮罩是根据alpha通道来决定显示/隐藏图片的（白色/不透明是保留，黑色/透明是裁剪）

三、颜色格式

颜色的十六进制格式为 #AARRGGBB

AA        即alpha，控制透明度，从00至ff，数值越小越透明

RR/GG/BB        即Red/Green/blue（三原色），控制最终显示出的颜色