View Blending

Besides mixing different background layers of the view which we've covered on View Background page we can control how the view's content blends with its background and other elements behind it. This is done by the "mix-blend-mode" property of the view.

Property	Type	Description
"mix-blend-mode"	`int`	Blending mode between view content(including background) and parent view

The property holds the type of blending to apply between views. Keep in mind that blending can have performance implications, especially for complex graphics or large numbers of overlapping views, so use it judiciously.

Below is the list of all possible blending modes which we can apply.

Value	Name	Description
`BlendNormal`	"normal"	The final color is the top color, regardless of what the bottom color is. The effect is like two opaque pieces of paper overlapping
`BlendMultiply`	"multiply"	The final color is the result of multiplying the top and bottom colors. A black layer leads to a black final layer, and a white layer leads to no change. The effect is like two images printed on transparent film overlapping
`BlendScreen`	"screen"	The final color is the result of inverting the colors, multiplying them, and inverting that value. A black layer leads to no change, and a white layer leads to a white final layer. The effect is like two images shone onto a projection screen
`BlendOverlay`	"overlay"	The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter. This blend mode is equivalent to hard-light but with the layers swapped
`BlendDarken`	"darken"	The final color is composed of the darkest values of each color channel
`BlendLighten`	"lighten"	The final color is composed of the lightest values of each color channel
`BlendColorDodge`	"color-dodge"	The final color is the result of dividing the bottom color by the inverse of the top color. A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color. This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to create a fully lit color
`BlendColorBurn`	"color-burn"	The final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value. A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image. This blend mode is similar to multiply, but the foreground need only be as dark as the inverse of the backdrop to make the final image black
`BlendHardLight`	"hard-light"	The final color is the result of multiply if the top color is darker, or screen if the top color is lighter. This blend mode is equivalent to overlay but with the layers swapped. The effect is similar to shining a harsh spotlight on the backdrop
`BlendSoftLight`	"soft-light"	The final color is similar to hard-light, but softer. This blend mode behaves similar to hard-light. The effect is similar to shining a diffused spotlight on the backdrop
`BlendDifference`	"difference"	The final color is the result of subtracting the darker of the two colors from the lighter one. A black layer has no effect, while a white layer inverts the other layer's color
`BlendExclusion`	"exclusion"	The final color is similar to difference, but with less contrast. As with difference, a black layer has no effect, while a white layer inverts the other layer's color
`BlendHue`	"hue"	The final color has the hue of the top color, while using the saturation and luminosity of the bottom color
`BlendSaturation`	"saturation"	The final color has the saturation of the top color, while using the hue and luminosity of the bottom color. A pure gray backdrop, having no saturation, will have no effect
`BlendColor`	"color"	The final color has the hue and saturation of the top color, while using the luminosity of the bottom color. The effect preserves gray levels and can be used to colorize the foreground
`BlendLuminosity`	"luminosity"	The final color has the luminosity of the top color, while using the hue and saturation of the bottom color. This blend mode is equivalent to `BlendColor`, but with the layers swapped

Lets have a look at a simple example where we've a few controls and configure mix blending mode for them.

RUI

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    background-color = peachpuff,
    content = ListLayout {
        content = [
            EditView {
                radius = 4px,
                // Mixing with parent
                mix-blend-mode = multiply,
            },
            Button {
                content = Search,
                // Mixing with parent
                mix-blend-mode = multiply,
            }
        ]
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.BackgroundColor:     rui.PeachPuff,
    rui.Content: rui.NewListLayout(session, rui.Params{
        rui.Content: []rui.View{
            rui.NewEditView(session, rui.Params{
                rui.Radius: rui.Px(4),
                // Mixing with parent
                rui.MixBlendMode: rui.BlendMultiply,
            }),
            rui.NewButton(session, rui.Params{
                rui.Content: "Search",
                // Mixing with parent
                rui.MixBlendMode: rui.BlendMultiply,
            }),
        },
    }),
})

Here is how the mix blending mode multiply works, as illustrated in the following image.

We can manipulate that property at any time we want using the Set() method of the view object or using a similar global function.

If someone would like to query the current value of that property we can use a convenient rui.GetMixBlendMode() global function or a well known rui.Get() or Get() method of the view object using rui.MixBlendMode as a property name.

blendMode := rui.GetMixBlendMode(rootView, "view-id")
// Do something with the value