QML 图像颜色渐变和颜色覆盖(LinearGradient和ColorOverlay)_qml更改图片颜色-程序员宅基地

技术标签: QT Quick QML  qml  qt  颜色渐变  


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

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 学习笔记

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_16504163/article/details/108553802

智能推荐

apksigner完成apk的签名_apksigner 签名-程序员宅基地

文章浏览阅读2.3k次。有时候用第三方加固平台加固以后会让我们重新签名。还有就是上应用市场的时候,如果以前该应用已经在市场上上传过了,由于后面业务原因换了开发者账号再去上传就会提示我们去认领一个没有签名的包(unsign.apk),然后去签名上传进行MD5签名验证,如下图看到上面的提示不要慌,不就是加个签名么,apksigner就是SDK自带的签名工具,处于F:\android-sdk\build-tools\xxx目录下将上面的路径配置到系统环境变量path中,打开cmd,切换到unsign.apk目录下,建议.._apksigner 签名

java内省机制及PropertyUtils使用方法_propertyutils.snaketoline(field.getname());-程序员宅基地

文章浏览阅读1.3k次。背景 一般情况下,在Java中你可以通过get方法轻松获取beans中的属性值。但是,当你事先不知道beans的类型或者将要访问或修改的属性名时,该怎么办?Java语言中提供了一些像java.beans.Introspector这样类,实现了在运行时检测Java类并确定属性get和set方法的名称,结合Java中的反射机制就可以调用这些方法了。然而,这些APIs使用起来比较_propertyutils.snaketoline(field.getname());

LeetCode 516. Longest Palindromic Subsequence--最长回文子序列长度_leetcode longestpalindromesubseq连续字符不想等,长度为偶的回文子序列-程序员宅基地

文章浏览阅读536次。Given a string s, find the longest palindromic subsequence's length in s. You may assume that the maximum length of s is 1000.Example 1:Input:"bbbab"Output:4One possible longest palind_leetcode longestpalindromesubseq连续字符不想等,长度为偶的回文子序列长度

Android自定义View之自定义加载进度条(二)-程序员宅基地

文章浏览阅读189次。本文首发于公众号“AntDream”,欢迎微信搜索“AntDream”或扫描文章底部二维码关注,和我一起每天进步一点点自定义加载进度条Android自定义View之手把手带你自定义一个进度条上次我们已经把实线和虚线都绘制好了,这次我们就主要来解决更新的问题:怎么随着时间的推移逐渐地绘制进度条怎么在绘制的过程中加速进度条的绘制首先我们来解决第一个问题,也就是随着时间更新我们的..._setvalueinterpolator

c#判断字符串是否json-程序员宅基地

文章浏览阅读5.7k次。来源:https://www.cnblogs.com/cyq1162/p/3841766.html下载地址:  https://github.com/cyq1162/cyqdata/blob/master/Tool/JsonSplit.cs  https://github.com/cyq1162/cyqdata  using System;using System.C..._c#判断是json还是xml

python读取eml文件并用正则匹配邮箱_python 如何查看eml文件-程序员宅基地

文章浏览阅读992次。python读取eml文件并用正则匹配邮箱_python 如何查看eml文件

随便推点

Jquery插件之DataTables初探_jquery datatables 英文-程序员宅基地

文章浏览阅读2.5k次。今天闲来无事,就研究了一下Jquery的DataTables插件。感觉效果不错,支持排序和内容过滤(查询),在这里向大家推荐一下^_^不得不说之前犯了一个错误,这个插件应该叫做DataTable,而我把它当成了tablesort,实在不好意思。。。。。可以直接到官网上去下载下来,单击http://www.datatables.net/到官网上看看,什么API、demo之类的_jquery datatables 英文

算法:逆序对-程序员宅基地

文章浏览阅读8.5k次,点赞8次,收藏11次。逆序对什么是逆序对呢?百度百科这样解释:设 A 为一个有 n 个数字的有序集 (n>1),其中所有数字各不相同。如果存在正整数 i, j 使得 1 ≤ i < j ≤ n 而且 A[i] > A[j],则 <A[i], A[j]> 这个有序对称为 A 的一个逆序对,也称作逆序数。定义:对于一个包含N个非负整数的数组A[1…n],如果有i < j,且A[ i ]>A[ j ],则称(A[ i] ,A[ j] )为数组A中的一个逆序对。例如,数组(3_逆序对

SLAM导航机器人零基础实战系列:(四)差分底盘设计——3.底盘通信协议_slam 实战-程序员宅基地

文章浏览阅读1.2k次。SLAM+语音机器人DIY系列:(四)差分底盘设计——3.底盘通信协议摘要 运动底盘是移动机器人的重要组成部分,不像激光雷达、IMU、麦克风、音响、摄像头这些通用部件可以直接买到,很难买到通用的底盘。一方面是因为底盘的尺寸结构和参数是要与具体机器人匹配的;另一方面是因为底盘包含软硬件整套解决方案,是很多机..._slam 实战

LOJ #6010. 「网络流 24 题」数字梯形-程序员宅基地

文章浏览阅读89次。#6010. 「网络流 24 题」数字梯形题目描述给定一个由n nn行数字组成的数字梯形如下图所示。梯形的第一行有m mm个数字。从梯形的顶部的m mm个数字开始,在每个数字处可以沿左下或右下方向移动,形成一条从梯形的顶至底的路径。分别遵守以下规则:从梯形的顶至底的m mm条路径互不相交;从梯形的顶至底的m mm..._7-60 数字梯形 (110 分) 给定一个由n行数字组成的数字梯形如下图所示。梯形的第一

Ubuntu20.04 + RTX 3090(兼容RTX 2080 Ti) + Pytorch1.7配置方法_2080ti ubuntr20.04-程序员宅基地

文章浏览阅读2.2k次。背景介绍:由于在Ubuntu16.04系统上安装RTX 3090显卡驱动有点吃力(各种Error和不兼容),使用最新Ubuntu20.04系统搭配最新的RTX 3090显卡配置最新的Pytorch【(*^▽^*)】前期准备: 1、Ubuntu20.04下载:Ubuntu20.4_amd64_desktop.iso 2、UNtebootin光盘刻录软件下载:unetbootin,选择Windows下载 3、NVID..._2080ti ubuntr20.04

Struts + Spring +ibatis 整合开发步骤_struts+spring+ibatis-程序员宅基地

文章浏览阅读329次。一.添加Spring 、Struts框架对web.xml文件的修改1. 添加Spring框架2. 在web.xml中引入Spring配置文件(注意:applicationContext.xml文件的路径)context-param> param-name>contextConfigLocationparam-name> param-v_struts+spring+ibatis