图像颜色渐变和颜色覆盖

• 1. LinearGradient 图像线性渐变
• 2. ColorOverlay 颜色覆盖

所有的热爱都要不遗余力，真正喜欢它便给它更高的优先级，和更多的时间吧！

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:             rootvisible:        truewidth:          rect.widthheight:         rect.heighttitle:          qsTr("斜向渐变");Item {id:                     rectanchors.centerIn:       parentwidth:                  linear.widthheight:                 linear.heightLinearGradient{id:                 linearanchors.centerIn:   parentwidth:              image.widthheight:             image.heightsource: Image {                          ///--[Mark2]id:             imagesource:         "image/404.png"fillMode:       Image.PreserveAspectFit;mipmap:         truesmooth:         trueantialiasing:   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:             rootvisible:        truewidth:          item.widthheight:         item.heighttitle:          qsTr("颜色叠加为绿色");Item {id:                     itemanchors.centerIn:       parentwidth:                  image.widthheight:                 image.heightImage {id:                 imageanchors.centerIn:   parentsource:             "image/404.png"fillMode:           Image.PreserveAspectFit; //按比列填充，不会变形mipmap:             truesmooth:             trueantialiasing:       true}ColorOverlay {anchors.fill:       imagesource:             imagecolor:              "green"      }}
}

QML其它文章请点击这里:     QT QUICK QML 学习笔记

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！