SkiaSharp dairesel gradyanları

sınıfı, SKShader dört farklı gradyan türü oluşturmak için statik yöntemler tanımlar. SkiaSharp doğrusal gradyan makalesinde yöntemi ele alınmaktadırCreateLinearGradient. Bu makale, tümü daireleri temel alan diğer üç gradyan türünü kapsar.

yöntemi, CreateRadialGradient dairenin merkezinden çıkan bir gradyan oluşturur:

Radyal Gradyan Örneği

yöntemi, CreateSweepGradient dairenin merkezini süpüren bir gradyan oluşturur:

Süpürme Gradyan Örneği

Üçüncü gradyan türü oldukça olağan dışıdır. İki noktalı konik gradyan olarak adlandırılır ve yöntemi tarafından CreateTwoPointConicalGradient tanımlanır. Gradyan bir daireden diğerine genişletir:

Konik Gradyan Örneği

İki daire farklı boyutlardaysa gradyan bir koni biçiminde olur.

Bu makalede bu gradyanlar daha ayrıntılı olarak inceler.

Radyal gradyan

CreateRadialGradient yöntemi aşağıdaki söz dizimine sahiptir:

public static SKShader CreateRadialGradient (SKPoint center,
                                             Single radius,
                                             SKColor[] colors,
                                             Single[] colorPos,
                                             SKShaderTileMode mode)

Aşırı CreateRadialGradient yükleme, bir dönüştürme matrisi parametresi de içerir.

İlk iki bağımsız değişken, dairenin merkezini ve yarıçapı belirtir. Gradyan bu merkezden başlar ve pikseller için radius dışa doğru genişletir. Bunun ötesinde radius ne olacağı bağımsız değişkene SKShaderTileMode bağlıdır. colors parametresi, iki veya daha fazla renkten oluşan bir dizidir (doğrusal gradyan yöntemlerinde olduğu gibi) ve colorPos 0 ile 1 aralığındaki bir tamsayı dizisidir. Bu tamsayılar, renklerin bu radius çizgi boyunca göreli konumlarını gösterir. Bu bağımsız değişkeni null , renkleri eşit aralıkta olacak şekilde ayarlayabilirsiniz.

Bir daireyi doldurmak için kullanırsanız CreateRadialGradient , gradyanın merkezini dairenin merkezine, gradyanın yarıçapını da dairenin yarıçapı olarak ayarlayabilirsiniz. Bu durumda bağımsız değişkenin SKShaderTileMode gradyanın işlenmesi üzerinde hiçbir etkisi yoktur. Ancak gradyan tarafından doldurulan alan gradyan tarafından tanımlanan daireden büyükse, bağımsız değişkenin SKShaderTileMode dairenin dışında gerçekleşenler üzerinde derin bir etkisi vardır.

etkisi SKShaderMode , örnekteki Radyal Gradyan sayfasında gösterilmiştir. Bu sayfanın XAML dosyası, numaralandırmanın üç üyesinden SKShaderTileMode birini seçmenize olanak tanıyan bir Picker ö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;assembly=SkiaSharp"
             xmlns:skiaforms="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             x:Class="SkiaSharpFormsDemos.Effects.RadialGradientPage"
             Title="Radial Gradient">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <skiaforms:SKCanvasView x:Name="canvasView"
                                Grid.Row="0"
                                PaintSurface="OnCanvasViewPaintSurface" />

        <Picker x:Name="tileModePicker"
                Grid.Row="1"
                Title="Shader Tile Mode"
                Margin="10"
                SelectedIndexChanged="OnPickerSelectedIndexChanged">
            <Picker.ItemsSource>
                <x:Array Type="{x:Type skia:SKShaderTileMode}">
                    <x:Static Member="skia:SKShaderTileMode.Clamp" />
                    <x:Static Member="skia:SKShaderTileMode.Repeat" />
                    <x:Static Member="skia:SKShaderTileMode.Mirror" />
                </x:Array>
            </Picker.ItemsSource>

            <Picker.SelectedIndex>
                0
            </Picker.SelectedIndex>
        </Picker>
    </Grid>
</ContentPage>

Arka plandaki kod dosyası, tuvalin tamamını radyal gradyanla renkler. Gradyanın merkezi tuvalin merkezine, yarıçap ise 100 piksele ayarlanır. Gradyan yalnızca iki renkten oluşur: siyah beyaz:

public partial class RadialGradientPage : ContentPage
{
    public RadialGradientPage ()
    {
        InitializeComponent ();
    }

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

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

        canvas.Clear();

        SKShaderTileMode tileMode =
            (SKShaderTileMode)(tileModePicker.SelectedIndex == -1 ?
                                        0 : tileModePicker.SelectedItem);

        using (SKPaint paint = new SKPaint())
        {
            paint.Shader = SKShader.CreateRadialGradient(
                                new SKPoint(info.Rect.MidX, info.Rect.MidY),
                                100,
                                new SKColor[] { SKColors.Black, SKColors.White },
                                null,
                                tileMode);

            canvas.DrawRect(info.Rect, paint);
        }
    }
}

Bu kod, merkezde siyah olan bir gradyan oluşturur ve ortadaki beyaz 100 piksele yavaş yavaş soluk görünür. Bu yarıçapın ötesinde ne olacağı bağımsız değişkene SKShaderTileMode bağlıdır:

Üç durumda da gradyan tuvali doldurur. Soldaki iOS ekranında, yarıçapın ötesindeki gradyan, beyaz olan son renkle devam eder. Bu, sonucunun sonucu olur SKShaderTileMode.Clamp. Android ekranı şunun SKShaderTileMode.Repeatetkisini gösterir: Ortadaki 100 pikselde gradyan yeniden siyah olan ilk renkle başlar. Gradyan her 100 piksel yarıçapta bir yineler.

Sağdaki Evrensel Windows Platformu ekranı gradyanların alternatif yönlere nasıl SKShaderTileMode.Mirror neden olduğunu gösterir. İlk gradyan ortadaki siyahtan 100 piksel yarıçapındaki beyaza kadardır. Sonraki, 100 piksel yarıçapından 200 piksel yarıçapındaki siyaha kadar beyazdır ve sonraki gradyan yeniden tersine çevrilir.

Radyal gradyan içinde ikiden fazla renk kullanabilirsiniz. Gökkuşağı Yay Gradyanı örneği, gökkuşağının renklerine karşılık gelen ve kırmızıyla biten sekiz renkten oluşan bir dizi ve ayrıca sekiz konum değeri dizisi oluşturur:

public class RainbowArcGradientPage : ContentPage
{
    public RainbowArcGradientPage ()
    {
        Title = "Rainbow Arc Gradient";

        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();

        using (SKPaint paint = new SKPaint())
        {
            float rainbowWidth = Math.Min(info.Width, info.Height) / 4f;

            // Center of arc and gradient is lower-right corner
            SKPoint center = new SKPoint(info.Width, info.Height);

            // Find outer, inner, and middle radius
            float outerRadius = Math.Min(info.Width, info.Height);
            float innerRadius = outerRadius - rainbowWidth;
            float radius = outerRadius - rainbowWidth / 2;

            // Calculate the colors and positions
            SKColor[] colors = new SKColor[8];
            float[] positions = new float[8];

            for (int i = 0; i < colors.Length; i++)
            {
                colors[i] = SKColor.FromHsl(i * 360f / 7, 100, 50);
                positions[i] = (i + (7f - i) * innerRadius / outerRadius) / 7f;
            }

            // Create sweep gradient based on center and outer radius
            paint.Shader = SKShader.CreateRadialGradient(center,
                                                         outerRadius,
                                                         colors,
                                                         positions,
                                                         SKShaderTileMode.Clamp);
            // Draw a circle with a wide line
            paint.Style = SKPaintStyle.Stroke;
            paint.StrokeWidth = rainbowWidth;

            canvas.DrawCircle(center, radius, paint);
        }
    }
}

Tuvalin genişliği ve yüksekliğinin en az 1000 olduğunu varsayalım; bu da değerin rainbowWidth 250 olduğu anlamına gelir. outerRadius ve innerRadius değerleri sırasıyla 1000 ve 750 olarak ayarlanır. Bu değerler diziyi positions hesaplamak için kullanılır; sekiz değer 0,75f ile 1 arasında değişir. Değer radius , daireyi okşama için kullanılır. 875 değeri, 250 piksel vuruş genişliğinin 750 piksel yarıçapı ile 1000 piksel yarıçapı arasında genişlediğini gösterir:

Tuvalin tamamını bu gradyanla doldurduysanız, iç yarıçap içinde kırmızı olduğunu görürsünüz. Bunun nedeni positions dizinin 0 ile başlamamasıdır. İlk renk, 0 ile ilk dizi değerinin uzaklıkları için kullanılır. Gradyan da dış yarıçapın ötesinde kırmızıdır. Bu, kutucuk modunun Clamp sonucu olur. Gradyan kalın bir çizginin üzerine vuruş için kullanıldığından, bu kırmızı alanlar görünmez.

Maskeleme için radyal gradyanlar

Doğrusal gradyanlar gibi radyal gradyanlar da saydam veya kısmen saydam renkler içerebilir. Bu özellik, görüntünün başka bir bölümünü vurgulamak için görüntünün bir kısmını gizleyen maskeleme adlı bir işlem için kullanışlıdır.

Radyal Gradyan Maskesi sayfasında bir örnek gösterilir. Program kaynak bit eşlemlerinden birini yükler. CENTER ve RADIUS alanları bit eşlem incelemesinden belirlendi ve vurgulanması gereken bir alana başvuruda bulundu. İşleyici, PaintSurface bit eşlemi görüntülemek için bir dikdörtgen hesaplayarak başlar ve ardından bu dikdörtgende görüntüler:

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

    static readonly SKPoint CENTER = new SKPoint(180, 300);
    static readonly float RADIUS = 120;

    public RadialGradientMaskPage ()
    {
        Title = "Radial Gradient Mask";

        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();

        // Find rectangle to display bitmap
        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 in rectangle
        canvas.DrawBitmap(bitmap, rect);

        // Adjust center and radius for scaled and offset bitmap
        SKPoint center = new SKPoint(scale * CENTER.X + x,
                                     scale * CENTER.Y + y);
        float radius = scale * RADIUS;

        using (SKPaint paint = new SKPaint())
        {
            paint.Shader = SKShader.CreateRadialGradient(
                                center,
                                radius,
                                new SKColor[] { SKColors.Transparent,
                                                SKColors.White },
                                new float[] { 0.6f, 1 },
                                SKShaderTileMode.Clamp);

            // Display rectangle using that gradient
            canvas.DrawRect(rect, paint);
        }
    }
}

Bit eşlemi çizdikten sonra, bazı basit kod, bit eşlem içinde ölçeklendirilen ve görüntülenmek üzere kaydırılan vurgulanan alana başvuran ve öğesine dönüştürür CENTER center RADIUS.radius Bu değerler, bu orta ve yarıçap ile radyal gradyan oluşturmak için kullanılır. İki renk, merkezde ve yarıçapın ilk %60'ı için saydam olarak başlar. Gradyan daha sonra beyaz olarak kaybolur:

Bu yaklaşım, bit eşlemi maskele etmenin en iyi yolu değildir. Sorun, maskenin çoğunlukla tuvalin arka planıyla eşleşmesi için seçilen beyaz bir renge sahip olmasıdır. Arka plan başka bir renkse (veya belki de gradyanın kendisiyse) eşleşmez. SkiaSharp Porter-Duff karışım modları makalesinde maskeleme için daha iyi bir yaklaşım gösterilmiştir.

Belirtik vurgular için radyal gradyanlar

Bir ışık yuvarlak bir yüzeye vurduğunda, ışığı birçok yönde yansıtır, ancak ışığın bir kısmı doğrudan izleyicinin gözüne sıçrar. Bu genellikle yüzeyde belirli bir vurgu olarak adlandırılan benzer beyaz bir alanın görünümünü oluşturur.

Üç boyutlu grafiklerde, belirtik vurgular genellikle ışık yollarını ve gölgelendirmeyi belirlemek için kullanılan algoritmalardan kaynaklanır. İki boyutlu grafiklerde, 3B bir yüzeyin görünümünü önermek için bazen belirtik vurgular eklenir. Belirtik bir vurgu düz kırmızı daireyi yuvarlak kırmızı bir top haline dönüştürebilir.

Radyal Specular Highlight sayfası, tam olarak bunu yapmak için radyal gradyan kullanır. İşleyici PaintSurface , dairenin yarıçapını ve iki SKPoint değeri ( center a ve dairenin ortası ile sol üst kenarının ortasında yer alan bir offCenter ) hesaplayarak oluşturur:

public class RadialSpecularHighlightPage : ContentPage
{
    public RadialSpecularHighlightPage()
    {
        Title = "Radial Specular Highlight";

        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();

        float radius = 0.4f * Math.Min(info.Width, info.Height);
        SKPoint center = new SKPoint(info.Rect.MidX, info.Rect.MidY);
        SKPoint offCenter = center - new SKPoint(radius / 2, radius / 2);

        using (SKPaint paint = new SKPaint())
        {
            paint.Shader = SKShader.CreateRadialGradient(
                                offCenter,
                                radius / 2,
                                new SKColor[] { SKColors.White, SKColors.Red },
                                null,
                                SKShaderTileMode.Clamp);

            canvas.DrawCircle(center, radius, paint);
        }
    }
}

Çağrı, CreateRadialGradient bu offCenter noktada beyazla başlayan ve yarıçapın yarısı mesafede kırmızıyla biten bir gradyan oluşturur. Şu şekilde görünür:

Bu gradyana yakından bakarsanız kusurlu olduğuna karar vekleyebilirsiniz. Gradyan belirli bir nokta etrafında ortalanır ve yuvarlatılmış yüzeyi yansıtmanın biraz daha az simetrik olmasını isteyebilirsiniz. Bu durumda, belirtik vurgular için konik gradyanlar bölümünde aşağıda gösterilen belirtik vurguyu tercih edebilirsiniz.

Süpürme gradyanı

yöntemi, CreateSweepGradient tüm gradyan oluşturma yöntemlerinin en basit söz dizimine sahiptir:

public static SKShader CreateSweepGradient (SKPoint center,
                                            SKColor[] colors,
                                            Single[] colorPos)

Yalnızca bir merkez, bir renk dizisi ve renk konumları. Gradyan orta noktanın sağında başlar ve merkezin etrafında saat yönünde 360 derece süpürür. Parametre olmadığına SKShaderTileMode dikkat edin.

Matris CreateSweepGradient dönüştürme parametresine sahip bir aşırı yükleme de kullanılabilir. Başlangıç noktasını değiştirmek için gradyan için döndürme dönüşümü uygulayabilirsiniz. Yönü saat yönünden saat yönünün tersine değiştirmek için bir ölçek dönüşümü de uygulayabilirsiniz.

Süpür Gradyan sayfası, 50 piksel vuruş genişliğine sahip bir daireyi renklendirmek için süpürme gradyanı kullanır:

sınıfı, SweepGradientPage farklı ton değerlerine sahip sekiz renkten oluşan bir dizi tanımlar. Dizinin, ekran görüntülerinde en sağda görünen kırmızı (0 veya 360 ton değeri) ile başlayıp bittiğine dikkat edin:

public class SweepGradientPage : ContentPage
{
    bool drawBackground;

    public SweepGradientPage ()
    {
        Title = "Sweep Gradient";

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

        TapGestureRecognizer tap = new TapGestureRecognizer();
        tap.Tapped += (sender, args) =>
        {
            drawBackground ^= true;
            canvasView.InvalidateSurface();
        };
        canvasView.GestureRecognizers.Add(tap);
    }

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

        canvas.Clear();

        using (SKPaint paint = new SKPaint())
        {
            // Define an array of rainbow colors
            SKColor[] colors = new SKColor[8];

            for (int i = 0; i < colors.Length; i++)
            {
                colors[i] = SKColor.FromHsl(i * 360f / 7, 100, 50);
            }

            SKPoint center = new SKPoint(info.Rect.MidX, info.Rect.MidY);

            // Create sweep gradient based on center of canvas
            paint.Shader = SKShader.CreateSweepGradient(center, colors, null);

            // Draw a circle with a wide line
            const int strokeWidth = 50;
            paint.Style = SKPaintStyle.Stroke;
            paint.StrokeWidth = strokeWidth;

            float radius = (Math.Min(info.Width, info.Height) - strokeWidth) / 2;
            canvas.DrawCircle(center, radius, paint);

            if (drawBackground)
            {
                // Draw the gradient on the whole canvas
                paint.Style = SKPaintStyle.Fill;
                canvas.DrawRect(info.Rect, paint);
            }
        }
    }
}

Program ayrıca işleyicinin PaintSurface sonunda bazı kodlar sağlayan bir TapGestureRecognizer uygular. Bu kod tuvali doldurmak için aynı gradyanı kullanır:

Bu ekran görüntüleri, gradyanın hangi alan tarafından renklendirilirse onu doldurduğunu gösterir. Gradyan aynı renkle başlayıp bitmezse, orta noktanın sağ kısmında bir kesinti olur.

İki noktalı konik gradyan

CreateTwoPointConicalGradient yöntemi aşağıdaki söz dizimine sahiptir:

public static SKShader CreateTwoPointConicalGradient (SKPoint startCenter,
                                                      Single startRadius,
                                                      SKPoint endCenter,
                                                      Single endRadius,
                                                      SKColor[] colors,
                                                      Single[] colorPos,
                                                      SKShaderTileMode mode)

Parametreler, başlangıç dairesi ve bitiş dairesi olarak adlandırılan iki dairenin orta noktaları ve yarıçaplarıyla başlar. Kalan üç parametre ve CreateRadialGradientile CreateLinearGradient aynıdır. Aşırı CreateTwoPointConicalGradient yükleme, matris dönüşümü içerir.

Gradyan başlangıç çemberinde başlar ve bitiş çemberinde biter. parametresi, SKShaderTileMode iki dairenin ötesinde ne olacağını yönetir. İki noktalı konik gradyan, bir alanı tamamen doldurmayan tek gradyandır. İki daire aynı yarıçapa sahipse gradyan, dairelerin çapıyla aynı genişlikte bir dikdörtgenle sınırlandırılır. İki dairenin yarıçapı farklıysa gradyan bir koni oluşturur.

İki noktalı konik gradyan ile denemeler yapmak isteyebilirsiniz, bu nedenle Konik Gradyan sayfası iki daire yarıçapı için iki dokunma noktasının taşınmasına izin vermek için sayfasından InteractivePage türetilir:

<local:InteractivePage xmlns="http://xamarin.com/schemas/2014/forms"
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                       xmlns:local="clr-namespace:SkiaSharpFormsDemos"
                       xmlns:skia="clr-namespace:SkiaSharp;assembly=SkiaSharp"
                       xmlns:skiaforms="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
                       xmlns:tt="clr-namespace:TouchTracking"
                       x:Class="SkiaSharpFormsDemos.Effects.ConicalGradientPage"
                       Title="Conical Gradient">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid BackgroundColor="White"
              Grid.Row="0">
            <skiaforms:SKCanvasView x:Name="canvasView"
                                    PaintSurface="OnCanvasViewPaintSurface" />
            <Grid.Effects>
                <tt:TouchEffect Capture="True"
                                TouchAction="OnTouchEffectAction" />
            </Grid.Effects>
        </Grid>

        <Picker x:Name="tileModePicker"
                Grid.Row="1"
                Title="Shader Tile Mode"
                Margin="10"
                SelectedIndexChanged="OnPickerSelectedIndexChanged">
            <Picker.ItemsSource>
                <x:Array Type="{x:Type skia:SKShaderTileMode}">
                    <x:Static Member="skia:SKShaderTileMode.Clamp" />
                    <x:Static Member="skia:SKShaderTileMode.Repeat" />
                    <x:Static Member="skia:SKShaderTileMode.Mirror" />
                </x:Array>
            </Picker.ItemsSource>

            <Picker.SelectedIndex>
                0
            </Picker.SelectedIndex>
        </Picker>
    </Grid>
</local:InteractivePage>

Arka planda kod dosyası, sabit yarıçapı 50 ve 100 olan iki TouchPoint nesneyi tanımlar:

public partial class ConicalGradientPage : InteractivePage
{
    const int RADIUS1 = 50;
    const int RADIUS2 = 100;

    public ConicalGradientPage ()
    {
        touchPoints = new TouchPoint[2];

        touchPoints[0] = new TouchPoint
        {
            Center = new SKPoint(100, 100),
            Radius = RADIUS1
        };

        touchPoints[1] = new TouchPoint
        {
            Center = new SKPoint(300, 300),
            Radius = RADIUS2
        };

        InitializeComponent();
        baseCanvasView = canvasView;
    }

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

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

        canvas.Clear();

        SKColor[] colors = { SKColors.Red, SKColors.Green, SKColors.Blue };
        SKShaderTileMode tileMode =
            (SKShaderTileMode)(tileModePicker.SelectedIndex == -1 ?
                                        0 : tileModePicker.SelectedItem);

        using (SKPaint paint = new SKPaint())
        {
            paint.Shader = SKShader.CreateTwoPointConicalGradient(touchPoints[0].Center,
                                                                  RADIUS1,
                                                                  touchPoints[1].Center,
                                                                  RADIUS2,
                                                                  colors,
                                                                  null,
                                                                  tileMode);
            canvas.DrawRect(info.Rect, paint);
        }

        // Display the touch points here rather than by TouchPoint
        using (SKPaint paint = new SKPaint())
        {
            paint.Style = SKPaintStyle.Stroke;
            paint.Color = SKColors.Black;
            paint.StrokeWidth = 3;

            foreach (TouchPoint touchPoint in touchPoints)
            {
                canvas.DrawCircle(touchPoint.Center, touchPoint.Radius, paint);
            }
        }
    }
}

Dizi colors kırmızı, yeşil ve mavidir. İşleyicinin en altına doğru olan PaintSurface kod, gradyanı engellememeleri için iki dokunmatik noktayı siyah daireler olarak çizer.

Çağrının DrawRect tuvalin tamamını renklendirmek için gradyanı kullandığına dikkat edin. Ancak genel durumda tuvalin büyük bölümü gradyan tarafından renksiz kalır. Üç olası yapılandırmayı gösteren program aşağıdadır:

Soldaki iOS ekranı ayarının SKShaderTileMode Clampetkisini gösterir. Gradyan, ikinci daireye en yakın kenarın karşısındaki küçük dairenin kenarında kırmızı ile başlar. Değer Clamp ayrıca kırmızının koni noktasına kadar devam etmesine de neden olur. Gradyan, ilk daireye en yakın olan büyük dairenin dış kenarında mavi ile biter, ancak bu daire içinde ve ötesinde mavi ile devam eder.

Android ekranı benzerdir, ancak ile SKShaderTileMode aynıdır Repeat. Artık gradyanın ilk daire içinde başlayıp ikinci dairenin dışında bitmesi daha açık. Ayar, Repeat gradyanın büyük dairenin içinde kırmızıyla tekrar tekrarlamasına neden olur.

UWP ekranı, küçük daire tamamen büyük dairenin içine taşındığında ne olduğunu gösterir. Gradyan bir koni olmayı durdurur ve bunun yerine tüm alanı doldurur. Etki radyal gradyanla benzerdir, ancak küçük daire tam olarak büyük daire içinde ortalanmamışsa asimetriktir.

Bir daire başka bir dairenin içine yerleştirildiğinde gradyanın pratik kullanışlılığından şüphe edebilirsiniz, ancak bu, belirtik bir vurgu için idealdir.

Belirtik vurgular için konik gradyanlar

Bu makalenin önceki bölümlerinde, belirli bir vurgu oluşturmak için radyal gradyan kullanmayı gördünüz. Bu amaçla iki noktalı konik gradyan da kullanabilirsiniz ve görünümünü tercih edebilirsiniz:

Asimetrik görünüm, nesnenin yuvarlatılmış yüzeyini daha iyi gösterir.

Konik Belirtik Vurgu sayfasındaki çizim kodu, gölgelendirici dışında Radyal Specular Highlight sayfasıyla aynıdır:

public class ConicalSpecularHighlightPage : ContentPage
{
    ···
    void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        ···
        using (SKPaint paint = new SKPaint())
        {
            paint.Shader = SKShader.CreateTwoPointConicalGradient(
                                offCenter,
                                1,
                                center,
                                radius,
                                new SKColor[] { SKColors.White, SKColors.Red },
                                null,
                                SKShaderTileMode.Clamp);

            canvas.DrawCircle(center, radius, paint);
        }
    }
}

İki dairenin ve centermerkezleri offCenter vardır. Ortalanan center daire, topun tamamını kapsayan bir yarıçapla ilişkilidir, ancak ortalanan offCenter dairenin yarıçapı yalnızca bir pikseldir. Gradyan bu noktada etkili bir şekilde başlar ve topun kenarında biter.

SkiaSharp API'leri

Last updated on 2018-08-23

Aracılığıyla paylaş