Blend QML Type

Merges two source items by using a blend mode. More...

Import Statement: import QtGraphicalEffects 1.15
Since: QtGraphicalEffects 1.0
Inherits:

Item

Properties

Detailed Description

Blend mode can be selected with the mode property.

sourceforegroundSourceEffect applied

Note: This effect is available when running with OpenGL.

Example

The following example shows how to apply the effect.

 import QtQuick 2.12
 import QtGraphicalEffects 1.12

 Item {
     width: 300
     height: 300

     Image {
         id: bug
         source: "images/bug.jpg"
         sourceSize: Qt.size(parent.width, parent.height)
         smooth: true
         visible: false
     }

     Image {
         id: butterfly
         source: "images/butterfly.png"
         sourceSize: Qt.size(parent.width, parent.height)
         smooth: true
         visible: false
     }

     Blend {
         anchors.fill: bug
         source: bug
         foregroundSource: butterfly
         mode: "subtract"
     }
 }

Property Documentation

cached : bool

This property allows the effect output pixels to be cached in order to improve the rendering performance.

Every time the source or effect properties are changed, the pixels in the cache must be updated. Memory consumption is increased, because an extra buffer of memory is required for storing the effect output.

It is recommended to disable the cache when the source or the effect properties are animated.

By default, the property is set to false.


foregroundSource : variant

This property defines the item that is going to be blended over the source.

Note: It is not supported to let the effect include itself, for instance by setting foregroundSource to the effect's parent.


mode : string

This property defines the mode which is used when foregroundSource is blended over source. Values are case insensitive.

modedescription
normalThe pixel component values from foregroundSource are written over source by using alpha blending.
additionThe pixel component values from source and foregroundSource are added together and written.
averageThe pixel component values from source and foregroundSource are averaged and written.
colorThe lightness value from source is combined with hue and saturation from foregroundSource and written.
colorBurnThe darker pixels from source are darkened more, if both source and foregroundSource pixels are light the result is light.
colorDodgeThe lighter pixels from source are lightened more, if both source and foregroundSource pixels are dark the result is dark.
darkenThe darker pixel component value from source and foregroundSource is written.
darkerColorThe lower luminance pixel rgb-value from source and foregroundSource is written.
differenceThe absolute pixel component value difference between source and foregroundSource is written.
divideThe pixel component values from source is divided by the value from foregroundSource and written.
exclusionThe pixel component value difference with reduced contrast between source and foregroundSource is written.
hardLightThe pixel component values from source are lightened or darkened according to foregroundSource values and written.
hueThe hue value from foregroundSource is combined with saturation and lightness from source and written.
lightenThe lightest pixel component value from source and foregroundSource is written.
lighterColorThe higher luminance pixel rgb-value from source and foregroundSource is written.
lightnessThe lightness value from foregroundSource is combined with hue and saturation from source and written.
multiplyThe pixel component values from source and foregroundSource are multiplied together and written.
negationThe inverted absolute pixel component value difference between source and foregroundSource is written.
saturationThe saturation value from foregroundSource is combined with hue and lightness from source and written.
screenThe pixel values from source and foregroundSource are negated, then multiplied, negated again, and written.
subtractPixel value from foregroundSource is subracted from source and written.
softLightThe pixel component values from source are lightened or darkened slightly according to foregroundSource values and written.
Example sourceExample foregroundSource

Output examples with different mode values

mode: normal mode: addition mode: average

mode: color mode: colorBurn mode: colorDodge

mode: darken mode: darkerColor mode: difference

mode: divide mode: exclusion mode: hardlight

mode: hue mode: lighten mode: lighterColor

mode: lightness mode: negation mode: multiply

mode: saturation mode: screen mode: subtract

mode: softLight

source : variant

This property defines the source item that is going to be the base when foregroundSource is blended over it.

Note: It is not supported to let the effect include itself, for instance by setting source to the effect's parent.