1.说明
本篇博客主要记录一些在QML中，对图片进行操作的一些控件
2.示例代码
博客中用到的两张图片分别如下所示：
2.1 混合效果
效果展示：
相关代码：
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0ApplicationWindow {id:rootvisible: truewidth: 640height: 480title: qsTr("Hello World")Item {anchors.centerIn: parentwidth: 300height: 300Image {id:bugsource: "qrc:/image/imgs/bug.png"sourceSize: Qt.size(parent.width,parent.height)smooth: truevisible: false}Image {id:butterflysource: "qrc:/image/imgs/butterfly.png"sourceSize: Qt.size(parent.width,parent.height)smooth: truevisible: false}Blend {anchors.fill: bugsource: bugforegroundSource: butterflymode: "saturation"}}
}
2.2 亮度对比度
效果展示：
相关代码：
BrightnessContrast {anchors.fill: butterflysource: butterflybrightness: 0.1contrast: 0.9
}
2.3 颜色叠加
效果展示：
相关代码：
ColorOverlay {anchors.fill: bugsource: bugcolor: "#80800000"
}
2.4 着色效果
效果展示：
相关代码：
Colorize {anchors.fill: bugsource: bughue: 0.7saturation: 0.5lightness: -0.2
}
2.5 饱和度
效果展示：
相关代码：
Desaturate {anchors.fill: bugsource: bugdesaturation: 0.8
}
2.6 伽玛调整
效果展示：
相关代码：
GammaAdjust {anchors.fill: bugsource: buggamma: 0.45
}
2.7 伽玛调整
效果展示：
相关代码：
HueSaturation {anchors.fill: bugsource: bughue: -0.3saturation: 0.5lightness: -0.1
}
2.8 色阶调整
效果展示：
相关代码：
LevelAdjust {anchors.fill: butterflysource: butterflyminimumOutput: "#00ffffff"maximumOutput: "#ff000000"
}
2.9 锥形渐变
效果展示：
相关代码：
ConicalGradient {anchors.fill: parentsource: butterflygradient: Gradient {GradientStop { position: 0.0; color: "#F0F0F0" }GradientStop { position: 0.5; color: "#000000" }GradientStop { position: 1.0; color: "#F0F0F0" }}
}
2.10 线性渐变
效果展示：
相关代码：
LinearGradient {anchors.fill: butterflysource: butterflystart: Qt.point(100,100)end: Qt.point(300,300)gradient: Gradient {GradientStop { position: 0.0; color: "white" }GradientStop { position: 1.0; color: "black" }}
}
2.11 辐射渐变
效果展示：
相关代码：
RadialGradient {anchors.fill: butterflysource: butterflyverticalRadius: 100angle: 30gradient: Gradient {GradientStop { position: 0.0; color: "white" }GradientStop { position: 0.5; color: "black" }}
}
2.12 投影
效果展示：
相关代码：
DropShadow {anchors.fill: butterflysource: butterflyhorizontalOffset: 4verticalOffset: 4radius: 8.0samples: 16color: "#80000000"
}
2.13 内阴影
效果展示：
相关代码：
InnerShadow {anchors.fill: butterflysource: butterflycolor: "#b0000000"radius: 8.0samples: 16horizontalOffset: -3verticalOffset: -3
}
2.14 快速模糊
效果展示：
相关代码：
FastBlur {anchors.fill: bugsource: bugradius: 32
}
2.15 高斯模糊
效果展示：
相关代码：
GaussianBlur {anchors.fill: bugsource: bugradius: 8samples: 16
}
2.16 递归模糊
效果展示：
相关代码：
RecursiveBlur {anchors.fill: bugsource: bugradius: 7.5loops: 50
}
2.17 遮罩模糊
效果展示：
相关代码：
LinearGradient {id:maskanchors.fill: bugvisible: falsegradient: Gradient {GradientStop { position: 0.2; color: "#ffffffff" }GradientStop { position: 0.5; color: "#00ffffff" }}start: Qt.point(0,0)end:Qt.point(300,0)
}
MaskedBlur {anchors.fill: bugsource: bugmaskSource: maskradius: 16samples: 24
}
2.18 方向模糊
效果展示：
相关代码：
DirectionalBlur {anchors.fill: bugsource: bugangle: 90length: 32samples: 24
}
2.20 径向模糊
效果展示：
相关代码：
RadialBlur {anchors.fill: bugsource: bugsamples: 24angle: 30
}
2.21 缩放模糊
效果展示：
相关代码：
ZoomBlur {anchors.fill: bugsource: bugsamples: 24length: 48
}
2.22 发光
效果展示：
相关代码：
Glow {anchors.fill: butterflysource: butterflyradius: 16samples: 24color: "black"spread: 0.5
}
2.23 矩形发光
效果展示：
相关代码：
Rectangle {anchors.fill: parentcolor: "black"
}
RectangularGlow {anchors.fill: rectglowRadius: 20spread: 0.4color: "white"cornerRadius: rect.radius + glowRadius
}
Rectangle {id: rectanchors.centerIn: parentcolor: "black"radius: 25width: Math.round(parent.width / 1.5)height: Math.round(parent.height / 2)
}
2.24 不透明遮罩
效果展示：
相关代码：
OpacityMask {anchors.fill: bugsource: bugmaskSource: butterfly
}
2.25 阈值遮罩
效果展示：
相关代码：
ThresholdMask {anchors.fill: bugsource: bugmaskSource: butterflythreshold: 0.45spread: 0.2
}
