跳转至
Enumeration

BlendMode

Modes for compositing a view with overlapping content.

Declaration

enum BlendMode

Overview

There are 21 different types of blend modes. To use the following example, drag in the following two photos and label them "ocean" and "space".

Image of the ocean

Image of space

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("ocean")
                .resizable()
                .scaledToFit()

            Image("space")
                .resizable()
                .scaledToFit()
                .blendMode(BlendMode.softLight)
        }
    }
}
A screenshot displaying a blended image of the ocean and space.

Availability

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics


Case

color Keeps the brightness of the bottom layer, while taking the hue and saturation of the top layer.

colorBurn Divides the inverted bottom layer by the top layer, then inverts the result.

colorDodge Divides the bottom layer by the inversion of the top layer.

darken Takes the darker of the top and bottom picture pixels.

destinationOut Displays only the bottom layer, and only where the top is transparent.

destinationOver The bottom is drawn over the top, and the top is only visible where the bottom is transparent.

difference Subtracts the bottom layer from the top layer, and then makes the result positive.

exclusion Subtracts the bottom layer from the top layer, and then makes the result positive.

hardLight A combination of multiply and screen are applied.

hue Keeps the brightness and saturation of the bottom layer, while taking the hue of the top layer.

lighten Takes the lighter of the top and bottom picture pixels.

luminosity Keeps the hue and saturation of the bottom layer, while taking the brightness of the top layer.

multiply Multiplies the RGB channel numbers (0.0 - 1.0) of each pixel.

normal Regular overlapping, with opacity taken into account.

overlay The parts where the bottom layer is light become lighter, and dark becomes darker.

plusDarker Adds the top layer pixels to the bottom layer.

plusLighter Adds the top layer pixels to the bottom layer, than subtracts the result from 1.

saturation Keeps the brightness and hue of the bottom layer, while taking the saturation of the top layer.

screen Each RGB pixel value is inverted (subtracted from 1), multiplied together, and then inverted back.

softLight Basically, every light color gets a little lighter, and every dark color gets darker.

sourceAtop Shows the bottom layer fully, with the top layer drawn only where it intersect the bottom.


Type Method

==(a:b:) Returns a Boolean value indicating whether two values are equal.


Instance Method

hash(into:) Hashes the essential components of this value by feeding them into the given hasher.


Instance Property

hashValue The hash value.