Tryby mieszania niezwiązane z połączeniem

Jak pokazano w artykule SkiaSharp separable blend tryby, separable blend tryby wykonują operacje na czerwonych, zielonych i niebieskich kanałach oddzielnie. Tryby nieparzystnego mieszania nie są. Korzystając z poziomów kolorów Hue, Nasycenie i Jasność, tryby mieszania nieudzielnego mogą zmieniać kolory w ciekawy sposób:

Model Hue-Saturation-Luminosity

Aby zrozumieć tryby mieszania nieoddzielnego, należy traktować piksele docelowe i źródłowe jako kolory w modelu Hue-Saturation-Luminosity. (Jasność jest również nazywana lekkością).

Model kolorów HSL został omówiony w artykule Integrowanie z Xamarin.Forms programem i przykładowym programem w tym artykule umożliwia eksperymentowanie z kolorami HSL. Wartość można utworzyć SKColor przy użyciu wartości Hue, Saturation i Luminosity za pomocą metody statycznej SKColor.FromHsl .

Hue reprezentuje dominującą długość fali koloru. Wartości Hue wahają się od 0 do 360 i cyklu przez prawybory dodawania i odejmowania: Czerwony jest wartością 0, żółty jest 60, zielony jest 120, cyjan jest 180, niebieski to 240, magenta wynosi 300, a cykl wraca do czerwonego na 360.

Jeśli nie ma dominującego koloru — na przykład kolor jest biały lub czarny lub szary — wówczas kolor Hue jest niezdefiniowany i zazwyczaj ustawiony na 0.

Wartości nasycenia mogą wahać się od 0 do 100 i wskazują czystość koloru. Wartość nasycenia 100 jest najczystszym kolorem, podczas gdy wartości niższe niż 100 powodują, że kolor staje się bardziej szary. Wartość nasycenia 0 powoduje cieniowanie szarości.

Wartość Świetlistość (lub Lekkość) wskazuje, jak jasny jest kolor. Wartość świetlistości 0 jest czarna, niezależnie od innych ustawień. Podobnie, wartość jaskrawości 100 jest biała.

Wartość HSL (0, 100, 50) to wartość RGB (FF, 00, 00), która jest czystą czerwoną. Wartość HSL (180, 100, 50) to wartość RGB (00, FF, FF, FF), czysty cyjan. W miarę zmniejszenia nasycenia dominujący składnik koloru jest zmniejszany, a pozostałe składniki są zwiększane. Na poziomie nasycenia 0 wszystkie składniki są takie same, a kolor jest szarym odcieniem. Zmniejsz jasność, aby przejść do czerni; zwiększ jasność, aby przejść do białego.

Tryby mieszania szczegółowo

Podobnie jak w przypadku innych trybów mieszania, cztery tryby mieszania niezwiązane obejmują miejsce docelowe (często obraz mapy bitowej) i źródło, które jest często jednym kolorem lub gradientem. Tryby mieszania łączą wartości Hue, Nasycenie i Jasność z miejsca docelowego i źródła:

Tryb mieszania	Składniki ze źródła	Składniki z miejsca docelowego
Hue	Hue	Nasycenie i jasność
Saturation	Nasycenie	Odcienie i jasność
Color	Odcienie i nasycenie	Jasność
Luminosity	Jasność	Odcienie i nasycenie

Zobacz specyfikację Kompositing i Blending Level 1 dla algorytmów W3C.

Strona Tryby mieszania nieoddzielnego zawiera element umożliwiający Picker wybranie jednego z tych trybów mieszania i trzech Slider widoków w celu wybrania koloru HSL:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp;assembly=SkiaSharp"
             xmlns:skiaviews="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             x:Class="SkiaSharpFormsDemos.Effects.NonSeparableBlendModesPage"
             Title="Non-Separable Blend Modes">

    <StackLayout>
        <skiaviews:SKCanvasView x:Name="canvasView"
                                VerticalOptions="FillAndExpand"
                                PaintSurface="OnCanvasViewPaintSurface" />

        <Picker x:Name="blendModePicker"
                Title="Blend Mode"
                Margin="10, 0"
                SelectedIndexChanged="OnPickerSelectedIndexChanged">
            <Picker.ItemsSource>
                <x:Array Type="{x:Type skia:SKBlendMode}">
                    <x:Static Member="skia:SKBlendMode.Hue" />
                    <x:Static Member="skia:SKBlendMode.Saturation" />
                    <x:Static Member="skia:SKBlendMode.Color" />
                    <x:Static Member="skia:SKBlendMode.Luminosity" />
                </x:Array>
            </Picker.ItemsSource>

            <Picker.SelectedIndex>
                0
            </Picker.SelectedIndex>
        </Picker>

        <Slider x:Name="hueSlider"
                Maximum="360"
                Margin="10, 0"
                ValueChanged="OnSliderValueChanged" />

        <Slider x:Name="satSlider"
                Maximum="100"
                Margin="10, 0"
                ValueChanged="OnSliderValueChanged" />

        <Slider x:Name="lumSlider"
                Maximum="100"
                Margin="10, 0"
                ValueChanged="OnSliderValueChanged" />

        <StackLayout Orientation="Horizontal">
            <Label x:Name="hslLabel"
                   HorizontalOptions="CenterAndExpand" />

            <Label x:Name="rgbLabel"
                   HorizontalOptions="CenterAndExpand" />

        </StackLayout>
    </StackLayout>
</ContentPage>

Aby zaoszczędzić miejsce, trzy Slider widoki nie są identyfikowane w interfejsie użytkownika programu. Należy pamiętać, że kolejność to Hue, Nasycenie i Jasność. Dwa Label widoki w dolnej części strony pokazują wartości kolorów HSL i RGB.

Plik związany z kodem ładuje jeden z zasobów mapy bitowej, wyświetla tak duży, jak to możliwe na kanwie, a następnie obejmuje kanwę prostokątem. Kolor prostokąta jest oparty na trzech Slider widokach, a tryb mieszania jest wybrany w elememencie Picker:

public partial class NonSeparableBlendModesPage : ContentPage
{
    SKBitmap bitmap = BitmapExtensions.LoadBitmapResource(
                        typeof(NonSeparableBlendModesPage),
                        "SkiaSharpFormsDemos.Media.Banana.jpg");
    SKColor color;

    public NonSeparableBlendModesPage()
    {
        InitializeComponent();
    }

    void OnPickerSelectedIndexChanged(object sender, EventArgs args)
    {
        canvasView.InvalidateSurface();
    }

    void OnSliderValueChanged(object sender, ValueChangedEventArgs e)
    {
        // Calculate new color based on sliders
        color = SKColor.FromHsl((float)hueSlider.Value,
                                (float)satSlider.Value,
                                (float)lumSlider.Value);

        // Use labels to display HSL and RGB color values
        color.ToHsl(out float hue, out float sat, out float lum);

        hslLabel.Text = String.Format("HSL = {0:F0} {1:F0} {2:F0}",
                                      hue, sat, lum);

        rgbLabel.Text = String.Format("RGB = {0:X2} {1:X2} {2:X2}",
                                      color.Red, color.Green, color.Blue);

        canvasView.InvalidateSurface();
    }

    void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKImageInfo info = args.Info;
        SKSurface surface = args.Surface;
        SKCanvas canvas = surface.Canvas;

        canvas.Clear();
        canvas.DrawBitmap(bitmap, info.Rect, BitmapStretch.Uniform);

        // Get blend mode from Picker
        SKBlendMode blendMode =
            (SKBlendMode)(blendModePicker.SelectedIndex == -1 ?
                                        0 : blendModePicker.SelectedItem);

        using (SKPaint paint = new SKPaint())
        {
            paint.Color = color;
            paint.BlendMode = blendMode;
            canvas.DrawRect(info.Rect, paint);
        }
    }
}

Zwróć uwagę, że program nie wyświetla wartości koloru HSL wybranej przez trzy suwaki. Zamiast tego tworzy wartość koloru na podstawie tych suwaków, a następnie używa ToHsl metody w celu uzyskania wartości Hue, Nasycenie i Jasność. Dzieje się tak, ponieważ FromHsl metoda konwertuje kolor HSL na kolor RGB, który jest przechowywany wewnętrznie w SKColor strukturze. Metoda ToHsl konwertuje z RGB na HSL, ale wynik nie zawsze będzie oryginalną wartością.

Na przykład FromHsl konwertuje wartość HSL (180, 50, 0) na kolor RGB (0, 0, 0, 0), ponieważ Luminosity wartość wynosi zero. Metoda ToHsl konwertuje kolor RGB (0, 0, 0) na kolor HSL (0, 0, 0, 0), ponieważ wartości Nasycenie i Hue są nieistotne. W przypadku korzystania z tego programu lepiej jest zobaczyć reprezentację koloru HSL używanego przez program, a nie określonego za pomocą suwaków.

Tryb SKBlendModes.Hue mieszany używa poziomu Hue źródła przy zachowaniu poziomów Nasycenie i Jasność miejsca docelowego. Podczas testowania tego trybu mieszania suwaki nasycenia i jasności muszą być ustawione na wartość inną niż 0 lub 100, ponieważ w takich przypadkach hue nie jest jednoznacznie zdefiniowana.

Po ustawieniu suwaka na wartość 0 (podobnie jak na zrzucie ekranu systemu iOS po lewej stronie) wszystko zmieni się na czerwono. Ale nie oznacza to, że obraz jest całkowicie nieobecny w kolorze zielonym i niebieskim. Oczywiście w wyniku są jeszcze szare odcienie. Na przykład kolor RGB (40, 40, C0) jest odpowiednikiem koloru HSL (240, 50, 50). Hue jest niebieski, ale wartość nasycenia 50 wskazuje, że istnieją również czerwone i zielone składniki. Jeśli wartość Hue ma wartość 0 z wartością SKBlendModes.Hue, kolor HSL to (0, 50, 50), czyli kolor RGB (C0, 40, 40). Nadal istnieją niebieskie i zielone składniki, ale teraz dominujący składnik jest czerwony.

Tryb SKBlendModes.Saturation mieszany łączy poziom nasycenia źródła z wartościami Hue i Luminosity miejsca docelowego. Podobnie jak hue, nasycenie nie jest dobrze zdefiniowane, jeśli jasność wynosi 0 lub 100. Teoretycznie każde ustawienie jaskrawości między tymi dwoma skrajnościami powinno działać. Jednak ustawienie Jasność wydaje się mieć wpływ na wynik bardziej niż powinien. Ustaw jasność na 50, a możesz zobaczyć, jak ustawić poziom nasycenia obrazu:

Możesz użyć tego trybu mieszania, aby zwiększyć nasycenie koloru nudnego obrazu lub zmniejszyć nasycenie do zera (jak na zrzucie ekranu systemu iOS po lewej stronie) dla wynikowego obrazu składającego się tylko z szarych odcieni.

Tryb SKBlendModes.Color mieszany zachowuje jasność miejsca docelowego, ale używa odcienia i nasycenia źródła. Ponownie oznacza to, że każde ustawienie suwaka Jasność gdzieś między skrajnościami powinno działać.

Wkrótce zobaczysz aplikację tego trybu mieszania.

SKBlendModes.Luminosity Na koniec tryb mieszania jest przeciwieństwem SKBlendModes.Colorelementu . Zachowuje odcień i nasycenie miejsca docelowego, ale używa świetlistości źródła. Luminosity Tryb mieszania jest najbardziej tajemniczym z partii: Suwaki Odcienie i Nasycenie wpływają na obraz, ale nawet w średniej jaskrawości obraz nie jest odrębny:

Teoretycznie zwiększenie lub zmniejszenie jasności obrazu powinno sprawić, że będzie jaśniejszy lub ciemniejszy. Ten przykład właściwości Jaskrawość lub definicja wyliczenia SKBlendMode może być interesująca.

Zazwyczaj nie jest tak, że należy użyć jednego z trybów nieudostępniania mieszania ze źródłem, który składa się z jednego koloru zastosowanego do całego obrazu docelowego. Efekt jest po prostu zbyt wielki. Należy ograniczyć efekt do jednej części obrazu. W takim przypadku źródło prawdopodobnie będzie zawierać transparancy, a może źródło będzie ograniczone do mniejszej grafiki.

Matowe dla trybu separowalnego

Oto jedna z map bitowych uwzględnionych jako zasób w przykładzie. Nazwa pliku jest Banana.jpg:

Istnieje możliwość utworzenia matu, który obejmuje tylko banan. Jest to również zasób w przykładzie. Nazwa pliku jest BananaMatte.png:

Oprócz czarnego kształtu bananów reszta mapy bitowej jest przezroczysta.

Strona Blue Banana używa tego matu, aby zmienić Hue i nasycenie banan, że małpa trzyma, ale nic innego nie zmienić na obrazie.

W poniższej BlueBananaPage klasie mapa bitowa Banana.jpg jest ładowana jako pole. Konstruktor ładuje mapę bitową BananaMatte.png jako matteBitmap obiekt, ale nie zachowuje tego obiektu poza konstruktorem. Zamiast tego zostanie utworzona trzecia mapa bitowa o nazwie blueBananaBitmap . Element matteBitmap jest rysowany SKPaint na, blueBananaBitmap a następnie ze swoim Color zestawem na niebieski i ustawionym BlendMode na SKBlendMode.SrcInwartość . Pozostaje blueBananaBitmap głównie przezroczyste, ale z solidnym niebieskim obrazem bananu:

public class BlueBananaPage : ContentPage
{
    SKBitmap bitmap = BitmapExtensions.LoadBitmapResource(
        typeof(BlueBananaPage),
        "SkiaSharpFormsDemos.Media.Banana.jpg");

    SKBitmap blueBananaBitmap;

    public BlueBananaPage()
    {
        Title = "Blue Banana";

        // Load banana matte bitmap (black on transparent)
        SKBitmap matteBitmap = BitmapExtensions.LoadBitmapResource(
            typeof(BlueBananaPage),
            "SkiaSharpFormsDemos.Media.BananaMatte.png");

        // Create a bitmap with a solid blue banana and transparent otherwise
        blueBananaBitmap = new SKBitmap(matteBitmap.Width, matteBitmap.Height);

        using (SKCanvas canvas = new SKCanvas(blueBananaBitmap))
        {
            canvas.Clear();
            canvas.DrawBitmap(matteBitmap, new SKPoint(0, 0));

            using (SKPaint paint = new SKPaint())
            {
                paint.Color = SKColors.Blue;
                paint.BlendMode = SKBlendMode.SrcIn;
                canvas.DrawPaint(paint);
            }
        }

        SKCanvasView canvasView = new SKCanvasView();
        canvasView.PaintSurface += OnCanvasViewPaintSurface;
        Content = canvasView;
    }

    void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKImageInfo info = args.Info;
        SKSurface surface = args.Surface;
        SKCanvas canvas = surface.Canvas;

        canvas.Clear();

        canvas.DrawBitmap(bitmap, info.Rect, BitmapStretch.Uniform);

        using (SKPaint paint = new SKPaint())
        {
            paint.BlendMode = SKBlendMode.Color;
            canvas.DrawBitmap(blueBananaBitmap,
                              info.Rect,
                              BitmapStretch.Uniform,
                              paint: paint);
        }
    }
}

Program PaintSurface obsługi rysuje mapę bitową z małpą trzymającą banan. Ten kod jest wyświetlany za pomocą blueBananaBitmap SKBlendMode.Colorpolecenia . Na powierzchni bananu każdy piksel Hue i Nasycenie jest zastępowany przez niebieski lity, który odpowiada wartości odcienia 240 i wartości nasycenia 100. Jasność pozostaje jednak taka sama, co oznacza, że banan nadal ma realistyczną teksturę pomimo nowego koloru:

Spróbuj zmienić tryb mieszania na SKBlendMode.Saturation. Banan pozostaje żółty, ale jest bardziej intensywny żółty. W rzeczywistej aplikacji może to być bardziej pożądany efekt niż obracanie banana niebieskiego.

Pokrewne łącza

• Interfejsy API skiaSharp