Ayrıştırılabilir karışım modları

SkiaSharp Porter-Duff harmanlama modlarında gördüğünüz gibi Porter-Duff harmanlama modları genellikle kırpma işlemleri gerçekleştirir. Ayrıştırılabilir karışım modları farklıdır. Ayrıştırılabilir modlar, görüntünün tek tek kırmızı, yeşil ve mavi renk bileşenlerini değiştirir. Ayrıştırılabilir karışım modları kırmızı, yeşil ve mavi bileşiminin gerçekten beyaz olduğunu göstermek için rengi karıştırabilir:

İki şekilde açıklaştırın ve koyulaştırın

Biraz fazla koyu veya çok açık bir bit eşlem olması yaygın bir durumdur. Görüntüyü açmak veya koyulaştırmak için ayrıştırılabilir karışım modlarını kullanabilirsiniz. Aslında, numaralandırmadaki SKBlendMode ayrıştırılabilir karışım modlarından ikisi ve Darkenolarak adlandırılırLighten.

Bu iki mod Açık ve Koyulaştır sayfasında gösterilmiştir. XAML dosyası iki SKCanvasView nesne ve iki Slider görünüm örneği oluşturur:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             x:Class="SkiaSharpFormsDemos.Effects.LightenAndDarkenPage"
             Title="Lighten and Darken">
    <StackLayout>
        <skia:SKCanvasView x:Name="lightenCanvasView"
                           VerticalOptions="FillAndExpand"
                           PaintSurface="OnCanvasViewPaintSurface" />

        <Slider x:Name="lightenSlider"
                Margin="10"
                ValueChanged="OnSliderValueChanged" />

        <skia:SKCanvasView x:Name="darkenCanvasView"
                           VerticalOptions="FillAndExpand"
                           PaintSurface="OnCanvasViewPaintSurface" />

        <Slider x:Name="darkenSlider"
                Margin="10"
                ValueChanged="OnSliderValueChanged" />
    </StackLayout>
</ContentPage>

birinci SKCanvasView ve Slider göster SKBlendMode.Lighten ve ikinci çift gösterir SKBlendMode.Darken. İki Slider görünüm aynı ValueChanged işleyiciyi, ikisi SKCanvasView de aynı PaintSurface işleyiciyi paylaşır. Her iki olay işleyicisi de olayı tetikleyen nesneyi denetler:

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

    public LightenAndDarkenPage ()
    {
        InitializeComponent ();
    }

    void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
    {
        if ((Slider)sender == lightenSlider)
        {
            lightenCanvasView.InvalidateSurface();
        }
        else
        {
            darkenCanvasView.InvalidateSurface();
        }
    }

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

        canvas.Clear();

        // Find largest size rectangle in canvas
        float scale = Math.Min((float)info.Width / bitmap.Width,
                               (float)info.Height / bitmap.Height);
        SKRect rect = SKRect.Create(scale * bitmap.Width, scale * bitmap.Height);
        float x = (info.Width - rect.Width) / 2;
        float y = (info.Height - rect.Height) / 2;
        rect.Offset(x, y);

        // Display bitmap
        canvas.DrawBitmap(bitmap, rect);

        // Display gray rectangle with blend mode
        using (SKPaint paint = new SKPaint())
        {
            if ((SKCanvasView)sender == lightenCanvasView)
            {
                byte value = (byte)(255 * lightenSlider.Value);
                paint.Color = new SKColor(value, value, value);
                paint.BlendMode = SKBlendMode.Lighten;
            }
            else
            {
                byte value = (byte)(255 * (1 - darkenSlider.Value));
                paint.Color = new SKColor(value, value, value);
                paint.BlendMode = SKBlendMode.Darken;
            }

            canvas.DrawRect(rect, paint);
        }
    }
}

İşleyici bit PaintSurface eşlem için uygun bir dikdörtgen hesaplar. İşleyici bu bit eşlemi görüntüler ve ardından özelliği veya SKBlendMode.Darkenolarak ayarlanmış SKBlendMode.Lighten bir nesne kullanarak bit eşlem BlendMode üzerinde bir SKPaint dikdörtgen görüntüler. özelliği, Color temelinde gri bir gölgedir Slider. Lighten Mod için renk siyahtan beyaza kadar değişir, ancak mod için Darken beyazdan siyaha kadar değişir.

Soldan sağa ekran görüntüleri, üstteki görüntü daha açık hale geldikçe ve alttaki görüntü koyu hale geldikçe giderek daha büyük Slider değerler gösteriyor:

Bu program, ayrıştırılabilir karışım modlarının kullanıldığı normal yöntemi gösterir: Hedef, bir tür, çok sık bit eşlem şeklinde bir görüntüdür. Kaynak, özelliği ayrıştırılabilir karıştırma moduna ayarlanmış bir SKPaint nesne BlendMode kullanılarak görüntülenen bir dikdörtgendir. Dikdörtgen düz bir renk (burada olduğu gibi) veya gradyan olabilir. Saydamlık genellikle ayrıştırılabilir karışım modlarında kullanılmaz.

Bu programla denemeler yapınca, bu iki karışım modunun görüntüyü tekdüzen olarak açmadığını ve karartmadığını keşfedeceksiniz. Bunun yerine, Slider bir tür eşik ayarlamış gibi görünüyor. Örneğin, modun Slider Lighten değerini artırdıkça, açık alanlar aynı kalırken görüntünün daha koyu alanları önce açık olur.

Lighten Mod için hedef piksel RGB renk değeriyse (Dr, Dg, Db) ve kaynak piksel de renk (Sr, Sg, Sb) ise çıkış şu şekilde hesaplanır:

Or = max(Dr, Sr) Og = max(Dg, Sg) Ob = max(Db, Sb)

Kırmızı, yeşil ve mavi için ayrı ayrı sonuç, hedef ve kaynağın büyük olmasıdır. Bu, önce hedefin karanlık alanlarının aydınlatılması etkisini üretir.

Mod Darken benzerdir, ancak sonuç hedef ve kaynağın daha küçük olmasıdır:

Or = min(Dr, Sr) Og = min(Dg, Sg) Ob = min(Db, Sb)

Kırmızı, yeşil ve mavi bileşenlerin her biri ayrı ayrı işlenir, bu nedenle bu karışım modları ayrıştırılabilir karışım modları olarak adlandırılır. Bu nedenle dc ve sc kısaltmaları hedef ve kaynak renkler için kullanılabilir ve hesaplamaların kırmızı, yeşil ve mavi bileşenlerin her birine ayrı ayrı uygulandığı anlaşılmaktadır.

Aşağıdaki tabloda, ne yaptıklarına ilişkin kısa açıklamalarla birlikte tüm ayrıştırılabilir karışım modları gösterilmektedir. İkinci sütunda değişiklik içermeyen kaynak renk gösterilir:

Blend Modu	Değişiklik yok	İşlem
Plus	Siyah	Renk ekleyerek açıklaşır: Sc + Dc
Modulate	Beyaz	Renkleri çarparak koyulaşır: Sc· Dc
Screen	Siyah	Tamamlayıcıların ürününü tamamlar: Sc + Dc – Sc· Dc
Overlay	Gri	Tersini HardLight
Darken	Beyaz	En az renk: min(Sc, Dc)
Lighten	Siyah	En fazla renk: max(Sc, Dc)
ColorDodge	Siyah	Hedefi kaynağa göre parlaklaştırır
ColorBurn	Beyaz	Kaynağı temel alarak hedefi koyulaştırır
HardLight	Gri	Sert spot etkisine benzer
SoftLight	Gri	Yumuşak spotun etkisine benzer
Difference	Siyah	Koyu olanı açıktan çıkarır: Abs(Dc – Sc)
Exclusion	Siyah	Difference Benzer ancak daha düşük karşıtlık
Multiply	Beyaz	Renkleri çarparak koyulaşır: Sc· Dc

Daha ayrıntılı algoritmalar W3C Compositing and Blending Level 1 belirtiminde ve Skia SkBlendMode Başvurusu'nda bulunabilir, ancak bu iki kaynaktaki gösterimi aynı değildir. Genellikle Porter-Duff karıştırma modu olarak kabul edilir ve Modulate W3C belirtiminin bir parçası olmadığını unutmayınPlus.

Kaynak saydamsa, dışındaki Modulatetüm ayrıştırılabilir karışım modları için karıştırma modunun hiçbir etkisi yoktur. Daha önce gördüğünüz gibi, harmanlama Modulate modu çarpmada alfa kanalını içerir. Aksi takdirde, Modulate ile aynı etkiye Multiplysahiptir.

ve ColorBurnadlı ColorDodge iki moda dikkat edin. Dodge and burn sözcükleri fotoğrafik karanlık oda uygulamalarından kaynaklanır. Büyüteç, negatiften ışık parlayarak fotoğraf baskısı yapar. Işık olmadan, baskı beyazdır. Daha uzun bir süre boyunca baskıya daha fazla ışık düştükçe baskı koyulaşır. Baskı oluşturucular, ışığın bir kısmının baskının belirli bir bölümüne düşmesini engellemek için genellikle bir el veya küçük bir nesne kullanır ve bu da alanı daha açık hale getirir. Bu, riskten korunma olarak bilinir. Buna karşılık, içinde delik bulunan opak malzeme (veya ışığın çoğunu engelleyen eller) belirli bir noktada daha fazla ışığı karartmaya yönlendirmek için kullanılabilir, buna yanma denir.

Dodge ve Burn programı Lighten ve Darken'e çok benzer. XAML dosyası aynı ama farklı öğe adlarıyla yapılandırılmıştır ve arka planda kod dosyası da benzerdir, ancak bu iki blend modunun etkisi oldukça farklıdır:

Küçük Slider değerler için mod önce Lighten koyu alanları açarken ColorDodge , daha düzgün bir şekilde aydınlatır.

Görüntü işleme uygulama programları genellikle tıpkı karanlık odalarda olduğu gibi, tarama ve yazma işlemlerinin belirli alanlarla sınırlandırılmasına olanak sağlar. Bu, gradyanlarla veya farklı gri tonlarına sahip bir bit eşlem tarafından gerçekleştirilebilir.

Ayrıştırılabilir karışım modlarını keşfetme

Ayrıştırılabilir Blend Modları sayfası, tüm ayrıştırılabilir karışım modlarını incelemenizi sağlar. Karma modlarından birini kullanarak bit eşlem hedefi ve renkli dikdörtgen kaynağı görüntüler.

XAML dosyası bir Picker (karıştırma modunu seçmek için) ve dört kaydırıcı tanımlar. İlk üç kaydırıcı, kaynağın kırmızı, yeşil ve mavi bileşenlerini ayarlamanıza olanak sağlar. Dördüncü kaydırıcı, gri bir gölge ayarlayarak bu değerleri geçersiz kılmaya yöneliktir. Tek tek kaydırıcılar tanımlanmaz, ancak renkler işlevlerini gösterir:

<?xml version="1.0" encoding="utf-8" ?>
<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.SeparableBlendModesPage"
             Title="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.Plus" />
                    <x:Static Member="skia:SKBlendMode.Modulate" />
                    <x:Static Member="skia:SKBlendMode.Screen" />
                    <x:Static Member="skia:SKBlendMode.Overlay" />
                    <x:Static Member="skia:SKBlendMode.Darken" />
                    <x:Static Member="skia:SKBlendMode.Lighten" />
                    <x:Static Member="skia:SKBlendMode.ColorDodge" />
                    <x:Static Member="skia:SKBlendMode.ColorBurn" />
                    <x:Static Member="skia:SKBlendMode.HardLight" />
                    <x:Static Member="skia:SKBlendMode.SoftLight" />
                    <x:Static Member="skia:SKBlendMode.Difference" />
                    <x:Static Member="skia:SKBlendMode.Exclusion" />
                    <x:Static Member="skia:SKBlendMode.Multiply" />
                </x:Array>
            </Picker.ItemsSource>

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

        <Slider x:Name="redSlider"
                MinimumTrackColor="Red"
                MaximumTrackColor="Red"
                Margin="10, 0"
                ValueChanged="OnSliderValueChanged" />

        <Slider x:Name="greenSlider"
                MinimumTrackColor="Green"
                MaximumTrackColor="Green"
                Margin="10, 0"
                ValueChanged="OnSliderValueChanged" />

        <Slider x:Name="blueSlider"
                MinimumTrackColor="Blue"
                MaximumTrackColor="Blue"
                Margin="10, 0"
                ValueChanged="OnSliderValueChanged" />

        <Slider x:Name="graySlider"
                MinimumTrackColor="Gray"
                MaximumTrackColor="Gray"
                Margin="10, 0"
                ValueChanged="OnSliderValueChanged" />

        <Label x:Name="colorLabel"
               HorizontalTextAlignment="Center" />

    </StackLayout>
</ContentPage>

Arka planda kod dosyası bit eşlem kaynaklarından birini yükler ve bir kez tuvalin üst yarısına ve yeniden tuvalin alt yarısına iki kez çizer:

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

    public SeparableBlendModesPage()
    {
        InitializeComponent();
    }

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

    void OnSliderValueChanged(object sender, ValueChangedEventArgs e)
    {
        if (sender == graySlider)
        {
            redSlider.Value = greenSlider.Value = blueSlider.Value = graySlider.Value;
        }

        colorLabel.Text = String.Format("Color = {0:X2} {1:X2} {2:X2}",
                                        (byte)(255 * redSlider.Value),
                                        (byte)(255 * greenSlider.Value),
                                        (byte)(255 * blueSlider.Value));

        canvasView.InvalidateSurface();
    }

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

        canvas.Clear();

        // Draw bitmap in top half
        SKRect rect = new SKRect(0, 0, info.Width, info.Height / 2);
        canvas.DrawBitmap(bitmap, rect, BitmapStretch.Uniform);

        // Draw bitmap in bottom halr
        rect = new SKRect(0, info.Height / 2, info.Width, info.Height);
        canvas.DrawBitmap(bitmap, rect, BitmapStretch.Uniform);

        // Get values from XAML controls
        SKBlendMode blendMode =
            (SKBlendMode)(blendModePicker.SelectedIndex == -1 ?
                                        0 : blendModePicker.SelectedItem);

        SKColor color = new SKColor((byte)(255 * redSlider.Value),
                                    (byte)(255 * greenSlider.Value),
                                    (byte)(255 * blueSlider.Value));

        // Draw rectangle with blend mode in bottom half
        using (SKPaint paint = new SKPaint())
        {
            paint.Color = color;
            paint.BlendMode = blendMode;
            canvas.DrawRect(rect, paint);
        }
    }
}

İşleyicinin PaintSurface en altına doğru, seçili karıştırma modu ve seçili renkle ikinci bit eşlem üzerinde bir dikdörtgen çizilir. Alttaki değiştirilmiş bit eşlemi en üstte bulunan özgün bit eşlem ile karşılaştırabilirsiniz:

Eklemeli ve subtractive birincil renkler

Birincil Renkler sayfası kırmızı, yeşil ve maviden oluşan üç örtüşen daire çizer:

Bunlar, ek birincil renklerdir. Her ikisinin kombinasyonları camgöbeği, eflatun ve sarı üretir ve üçünün birleşimi de beyazdır.

Bu üç daire modla SKBlendMode.Plus çizilir, ancak aynı etki için , Lightenveya Difference kullanabilirsinizScreen. Program şu şekildedir:

public class PrimaryColorsPage : ContentPage
{
    bool isSubtractive;

    public PrimaryColorsPage ()
    {
        Title = "Primary Colors";

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

        // Switch between additive and subtractive primaries at tap
        TapGestureRecognizer tap = new TapGestureRecognizer();
        tap.Tapped += (sender, args) =>
        {
            isSubtractive ^= true;
            canvasView.InvalidateSurface();
        };
        canvasView.GestureRecognizers.Add(tap);

        Content = canvasView;
    }

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

        canvas.Clear();

        SKPoint center = new SKPoint(info.Rect.MidX, info.Rect.MidY);
        float radius = Math.Min(info.Width, info.Height) / 4;
        float distance = 0.8f * radius;     // from canvas center to circle center
        SKPoint center1 = center + 
            new SKPoint(distance * (float)Math.Cos(9 * Math.PI / 6),
                        distance * (float)Math.Sin(9 * Math.PI / 6));
        SKPoint center2 = center +
            new SKPoint(distance * (float)Math.Cos(1 * Math.PI / 6),
                        distance * (float)Math.Sin(1 * Math.PI / 6));
        SKPoint center3 = center +
            new SKPoint(distance * (float)Math.Cos(5 * Math.PI / 6),
                        distance * (float)Math.Sin(5 * Math.PI / 6));

        using (SKPaint paint = new SKPaint())
        {
            if (!isSubtractive)
            {
                paint.BlendMode = SKBlendMode.Plus; 
                System.Diagnostics.Debug.WriteLine(paint.BlendMode);

                paint.Color = SKColors.Red;
                canvas.DrawCircle(center1, radius, paint);

                paint.Color = SKColors.Lime;    // == (00, FF, 00)
                canvas.DrawCircle(center2, radius, paint);

                paint.Color = SKColors.Blue;
                canvas.DrawCircle(center3, radius, paint);
            }
            else
            {
                paint.BlendMode = SKBlendMode.Multiply
                System.Diagnostics.Debug.WriteLine(paint.BlendMode);

                paint.Color = SKColors.Cyan;
                canvas.DrawCircle(center1, radius, paint);

                paint.Color = SKColors.Magenta;
                canvas.DrawCircle(center2, radius, paint);

                paint.Color = SKColors.Yellow;
                canvas.DrawCircle(center3, radius, paint);
            }
        }
    }
}

Program bir TabGestureRecognizeriçerir. Ekrana dokunduğunuzda veya tıkladığınızda, program üç alt etki alanını görüntülemek için kullanır SKBlendMode.Multiply :

Mod aynı Darken etki için de çalışır.

İlgili bağlantılar

• SkiaSharp API'leri