QML 图像颜色渐变和颜色覆盖(LinearGradient和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:             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 学习笔记