QML圆形图像的制作与图像置灰效果

在用QML开发界面时，往往我们想将一个方形的图片显示成圆形，类似于早期QQ的圆形图像，许多人想到用radius属性与clip属性进行尝试，但是，始终是没有成功，看来Qt还是没有强大到一定程度啊，哈哈哈。接下来我就简单码上几句实现圆形图像的方法，以及将彩色图像置灰（放QQ离线）的一下方法：
一、将方形图片圆形显示
代码如下：

[cpp] view plain copy

Rectangle {
id: img
width: 100
height: 100
radius: width/2
color: "black"
Image {
id: _image
smooth: true
visible: false
anchors.fill: parent
source: "./testPic.jpg"
sourceSize: Qt.size(parent.size, parent.size)
antialiasing: true
}
Rectangle {
id: _mask
color: "black"
anchors.fill: parent
radius: width/2
visible: false
antialiasing: true
smooth: true
}
OpacityMask {
id:mask_image
anchors.fill: _image
source: _image
maskSource: _mask
visible: true
antialiasing: true
}
}

对没错，运行OpacityMask可以实现，其参数source和maskSource官方给的解释为：
source : variant
This property defines the source item that is going to be masked.

maskSource : variant
This property defines the item that is going to be used as the mask. The mask item gets rendered into an intermediate pixel buffer and the alpha values from the result are used to determine the source item\'s pixels visibility in the display.
即通过maskSource对source进行遮挡，显示的外观形状为maskSource，内容显示为source的内容，因为上例中的maskSource为Rectangle且radius: width/2，即为圆形，所以显示出来的图片为圆形。
效果如下：

二、将彩色图像置灰
以下介绍如何将上例中的圆形图像编程黑白色（以下代码中的img为上例中的最外层Rectangle）。
代码如下：

[cpp] view plain copy

Colorize {
anchors.fill: img
width: 100
height: 100
source: img
hue: 0.0
saturation: 0.0
lightness: 0.0
visible:false
}

是的，通过设置Colorize的色调属性hue、饱和度属性saturation和亮度属性lightness，可以将一个彩色的图片显示成灰色（黑白色），具体各值的变化所代表的意思，请参见Qt的帮助，查询关键字Colorize即可找到。
效果如下：

如果想让离线效果更明显一点，可以将lightness: 0.8即亮度设为0.8，可达到更好的效果，如下：