奥地利网站后缀,教育类网站配色,漫威网页制作教程,教务管理系统哪个好1.说明
本篇博客主要记录一些在QML中#xff0c;对图片进行操作的一些控件
2.示例代码
博客中用到的两张图片分别如下所示#xff1a;
2.1 混合效果
效果展示#xff1a;
相关代码#xff1a;
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Cont…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.pngsourceSize: Qt.size(parent.width,parent.height)smooth: truevisible: false}Image {id:butterflysource: qrc:/image/imgs/butterfly.pngsourceSize: 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: #00ffffffmaximumOutput: #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: #b0000000radius: 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: blackspread: 0.5
}2.23 矩形发光
效果展示 相关代码
Rectangle {anchors.fill: parentcolor: black
}
RectangularGlow {anchors.fill: rectglowRadius: 20spread: 0.4color: whitecornerRadius: rect.radius glowRadius
}
Rectangle {id: rectanchors.centerIn: parentcolor: blackradius: 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
}
