图像颜色渐变和颜色覆盖
所有的热爱都要不遗余力,真正喜欢它便给它更高的优先级,和更多的时间吧!
QML其它文章请点击这里: QT QUICK QML 学习笔记
姊妹篇: QML 矩形颜色横向渐变(gradient和LinearGradient)
接着上一篇继续,今要说的是图像的颜色的些小技巧。
1. LinearGradient 图像线性渐变
图像颜色渐变也是用 LinearGradient 实现的,闲话不说,先上效果:
完整代码如下:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.12 ///--[Mark1]
ApplicationWindow{
id: root
visible: true
width: rect.width
height: rect.height
title: qsTr("斜向渐变");
Item {
id: rect
anchors.centerIn: parent
width: linear.width
height: linear.height
LinearGradient
{
id: linear
anchors.centerIn: parent
width: image.width
height: image.height
source: Image { ///--[Mark2]
id: image
source: "image/404.png"
fillMode: Image.PreserveAspectFit;
mipmap: true
smooth: true
antialiasing: true
}
gradient: Gradient {
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 0.5; color: "green" }
GradientStop { position: 1.0; color: "blue" }
}
start: Qt.point(0, 0)
// end: Qt.point(width, 0) ///1.横向渐变
// end: Qt.point(0, height) ///2.竖向渐变
end: Qt.point(width, height) ///3.斜向渐变 [Mark3]
}
}
}
要注意三处,文中都已用Mark标记。
- 其一是,需要导入 import QtGraphicalEffects 1.12
- 其二是,LinearGradient 的源为要显示的图像
- 其三是,渐变的结束点位置
另外颜色如果改变不了,很有可能是图片本身不允许,最好是矢量图吧,我也不太懂~
2. ColorOverlay 颜色覆盖
一般可以用 ColorOverlay 来统一颜色,改成你想用的色,先上效果:
完整代码如下:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.12 ///--[Mark1]
ApplicationWindow{
id: root
visible: true
width: item.width
height: item.height
title: qsTr("颜色叠加为绿色");
Item {
id: item
anchors.centerIn: parent
width: image.width
height: image.height
Image {
id: image
anchors.centerIn: parent
source: "image/404.png"
fillMode: Image.PreserveAspectFit; //按比列填充,不会变形
mipmap: true
smooth: true
antialiasing: true
}
ColorOverlay {
anchors.fill: image
source: image
color: "green"
}
}
}
QML其它文章请点击这里: QT QUICK QML 学习笔记