跳到主要内容

Bitmap Blend Modes

When rendering bitmaps graphics on screen, Avalonia supports specifying what blend mode to use while rendering. Blend modes changes the calculations performed when drawing new pixels (source) over existing pixels (destination).

Currently Avalonia Composite modes and Pixel Blend modes are located in a single enum called BitmapBlendingMode.

Composite modes enums mainly describes how the new pixels interact with the current on-screen pixels according to the alpha channel, this can be used to create, for example: "cookie cutters", exclusion zones or masks.

Pixel Blend modes on the other hand, specifies how the new colors will interact with the current colors. These modes can be used for example: on special effects, change color hues or other more complex image compositions.

See the Wikipedia page on blend modes for examples of how they work and the math behind them.

信息

Currently Avalonia only supports Blend Modes when using the Skia renderer. Trying to use these modes with the D2D renderer will result in the same behavior as the default mode.

Default Behavior

The default blend mode is SourceOver, meaning replacing all pixels values by the new values, dictated by the alpha channel. This is the standard way most applications overlay two images.

How to use it

In XAML, you can specify what blend mode to use when rendering a Image control. The following example will render a color overlay over the picture of a very cute cat:

<Panel>
<Image Source="./Cat.jpg"/>
<Image Source="./Overlay-Color.png" BlendMode="Multiply"/>
</Panel>

If you're creating a Custom User control and want to render a bitmap with code using one of these modes, you can do so by setting the BitmapBlendingMode in the control context render options:

// Inside the "Render" method, draw the bitmap like this:

using (context.PushRenderOptions(RenderOptions with { BitmapBlendingMode = BitmapBlendingMode.Multiply }))
{
context.DrawImage(source, sourceRect, destRect);
}

Avalonia supports several bitmap blend modes that can be applied to rendering:

Pixel Blend Modes

Pixel blend modes affect only the color without taking into consideration the alpha channel.

These are the images used in the examples:

Cute Cat base image (destination)Color Wheel overlay image (source)

Below are all the values currently supported by Avalonia

PreviewEnumDescription
Unspecifiedor SourceOver - Default Behavior.
PlusDisplay the sum of the source image and destination image.
ScreenMultiplies the complements of the destination and source color values, then complements the result.
OverlayMultiplies or screens the colors, depending on the destination color value.
DarkenSelects the darker of the destination and source colors.
LightenSelects the lighter of the destination and source colors.
ColorDodgeDarkens the destination color to reflect the source color.
ColorBurnMultiplies or screens the colors, depending on the source color value.
HardLightDarkens or lightens the colors, depending on the source color value.
SoftLightSubtracts the darker of the two constituent colors from the lighter color.
DifferenceProduces an effect similar to that of the Difference mode but lower in contrast.
ExclusionThe source color is multiplied by the destination color and replaces the destination
MultiplyCreates a color with the hue of the source color and the saturation and luminosity of the destination color.
HueCreates a color with the hue of the source color and the saturation and luminosity of the destination color.
SaturationCreates a color with the saturation of the source color and the hue and luminosity of the destination color.
ColorCreates a color with the hue and saturation of the source color and the luminosity of the destination color.
LuminosityCreates a color with the luminosity of the source color and the hue and saturation of the destination color.

Composition Blend modes

Composition blend modes affect only the alpha channel without messing with the colors.

These are the images used in the examples:

"A" base image (destination)"B" overlay image (source)

Below are all the values currently supported by Avalonia. Please note that this demo is sensitive to the alpha channel and therefore the website background bleed through the images.

PreviewEnumDescription
SourceOnly the source will be present.
SourceOveror Unspecified - Default behavior, Source is placed over the destination.
SourceInThe source that overlaps the destination, replaces the destination.
SourceOutSource is placed, where it falls outside of the destination.
SourceAtopSource which overlaps the destination, replaces the destination.
XorThe non-overlapping regions of source and destination are combined.
DestinationOnly the destination will be present.
DestinationOverDestination is placed over the source.
DestinationInDestination which overlaps the source, replaces the source.
DestinationOutDestination is placed, where it falls outside of the source.
DestinationAtopDestination which overlaps the source replaces the source.