本篇文章的样例都是在下面的底层控件中运行的:
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.12//处理用控件的来源
ApplicationWindow {
visible: true;
width: 600;
height: 300;
title: qsTr("GraphicalEffect_Test");
}
用到的图片素材:bg.png / bt.png
Blend——混合:使用混合模式将两个Item叠加显示
属性:
-
cached:bool型
此属性以缓存像素的模式输出,可以提高渲染性能,但是占用内存会增加,默认值为false
此外,当要渲染的源控件为动画类型的时候,这个属性必须设置为false -
foregroundSource:var型
-
source: var型
简单理解就说后者为混合渲染中的基底组件(位于底层),后者为覆盖其上的组件(位于顶层),下面做简单样例(model中的average为求重叠区域的平均像素)
PS:在使用Drag拖动元素的同时,Blend生成的效果不会主动更新,默认保持anchors.centerIn的状态
***Blend所做的操作都是以foregroundSource为参照操作Source中像素的值
- mode:string型
这个属性决定了叠加渲染的模式,类型有以下几种,直接看图的话效果更为直观: - normal:简单叠加
- addition:重合区域像素加法(系数未知)
- average:重合区域像素取平均(系数未知)
- color:重写重合区域,结合参照亮度色调和饱和度
- colorBurn:使暗的像素更暗
- colorDodge:使重叠部分中只有fore中亮的元素更亮,都为暗的部分则不变
- darken:明亮度降低
- darkerColor:取重叠部分亮度更低的值
- difference:取重叠部分像素RBG差的绝对值组成的像素
- divide:Source像素RBG值被对应fore中像素RBG除
- exclusion:写入对比度减小的像素差
- hardLight:亮的更亮,暗的更暗
- hue:饱和度结合
- lighten:取重叠部分较亮的像素
- lightColor:取重叠部分由RGB得出的更亮的像素
- lightness:取重叠部分亮度结参照合饱和度和色调得结果
- multiply:取重叠部分RGB乘得像素
- negation:取绝对像素分量差
- saturation:饱和度结合亮度和色调取结果
- screen:重叠区域像素取反色,再取乘积,再取反色
- subtract:取相减结果
- softLight:source中的像素会根据fore中得值稍微变亮或者变暗