Nuta
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować zalogować się lub zmienić katalogi.
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować zmienić katalogi.
Jak już wiesz, SKPaint klasa zawiera Color właściwość typu SKColor. SKColor zawiera kanał alfa, dzięki czemu wszystko, co kolor z wartością SKColor może być częściowo przezroczyste.
Niektóre przezroczystości przedstawiono w artykule Basic Animation in SkiaSharp (Podstawowa animacja w skiaSharp). Ten artykuł jest nieco bardziej bardziej przejrzysty, aby połączyć wiele obiektów w jednej scenie, technikę czasami znaną jako mieszanie. Bardziej zaawansowane techniki łączenia zostały omówione w artykułach w sekcji cieniowania SkiaSharp.
Poziom przezroczystości można ustawić podczas pierwszego tworzenia koloru przy użyciu konstruktora czteroparametrowego SKColor :
SKColor (byte red, byte green, byte blue, byte alpha);
Wartość alfa 0 jest w pełni przezroczysta, a wartość alfa 0xFF jest w pełni nieprzezroczysta. Wartości między tymi dwoma skrajnymi tworzą kolory, które są częściowo przezroczyste.
Ponadto definiuje przydatną WithAlpha metodę, która tworzy nowy kolor na podstawie istniejącego koloru, SKColor ale z określonym poziomem alfa:
SKColor halfTransparentBlue = SKColors.Blue.WithAlpha(0x80);
Użycie częściowo przezroczystego tekstu jest pokazane na stronie Kod więcej kodu w przykładzie. Ta strona zanika dwa ciągi tekstowe w i na wyjęcie, włączając przezroczystość w wartościach SKColor :
public class CodeMoreCodePage : ContentPage
{
SKCanvasView canvasView;
bool isAnimating;
Stopwatch stopwatch = new Stopwatch();
double transparency;
public CodeMoreCodePage ()
{
Title = "Code More Code";
canvasView = new SKCanvasView();
canvasView.PaintSurface += OnCanvasViewPaintSurface;
Content = canvasView;
}
protected override void OnAppearing()
{
base.OnAppearing();
isAnimating = true;
stopwatch.Start();
Device.StartTimer(TimeSpan.FromMilliseconds(16), OnTimerTick);
}
protected override void OnDisappearing()
{
base.OnDisappearing();
stopwatch.Stop();
isAnimating = false;
}
bool OnTimerTick()
{
const int duration = 5; // seconds
double progress = stopwatch.Elapsed.TotalSeconds % duration / duration;
transparency = 0.5 * (1 + Math.Sin(progress * 2 * Math.PI));
canvasView.InvalidateSurface();
return isAnimating;
}
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
const string TEXT1 = "CODE";
const string TEXT2 = "MORE";
using (SKPaint paint = new SKPaint())
{
// Set text width to fit in width of canvas
paint.TextSize = 100;
float textWidth = paint.MeasureText(TEXT1);
paint.TextSize *= 0.9f * info.Width / textWidth;
// Center first text string
SKRect textBounds = new SKRect();
paint.MeasureText(TEXT1, ref textBounds);
float xText = info.Width / 2 - textBounds.MidX;
float yText = info.Height / 2 - textBounds.MidY;
paint.Color = SKColors.Blue.WithAlpha((byte)(0xFF * (1 - transparency)));
canvas.DrawText(TEXT1, xText, yText, paint);
// Center second text string
textBounds = new SKRect();
paint.MeasureText(TEXT2, ref textBounds);
xText = info.Width / 2 - textBounds.MidX;
yText = info.Height / 2 - textBounds.MidY;
paint.Color = SKColors.Blue.WithAlpha((byte)(0xFF * transparency));
canvas.DrawText(TEXT2, xText, yText, paint);
}
}
}
Pole transparency jest animowane, aby różnić się od 0 do 1 i z powrotem w rytm sinusoidalny. Pierwszy ciąg tekstowy jest wyświetlany z wartością alfa obliczaną przez odejmowanie transparency wartości z 1:
paint.Color = SKColors.Blue.WithAlpha((byte)(0xFF * (1 - transparency)));
Metoda WithAlpha ustawia składnik alfa na istniejącym kolorze, czyli SKColors.Blue. Drugi ciąg tekstowy używa wartości alfa obliczanej na transparency podstawie samej wartości:
paint.Color = SKColors.Blue.WithAlpha((byte)(0xFF * transparency));
Animacja zmienia się między dwoma wyrazami, wzywając użytkownika do "kodu więcej" (lub może żądać "więcej kodu"):
W poprzednim artykule dotyczącym podstaw mapy bitowej w SkiaSharp pokazano, jak wyświetlać mapy bitowe przy użyciu jednej z DrawBitmap metod .SKCanvas DrawBitmap Wszystkie metody obejmują SKPaint obiekt jako ostatni parametr. Domyślnie ten parametr jest ustawiony na null i można go zignorować.
Alternatywnie można ustawić Color właściwość tego SKPaint obiektu, aby wyświetlić mapę bitową z pewnym poziomem przezroczystości. Ustawienie poziomu przezroczystości we Color właściwości SKPaint elementu umożliwia zanikanie map bitowych w i na wejściu lub rozpuszczeniu jednej mapy bitowej na drugą.
Przezroczystość mapy bitowej jest pokazana na stronie Rozpuszczone mapy bitowej. Plik XAML tworzy wystąpienie elementu SKCanvasView i :Slider
<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.BitmapDissolvePage"
Title="Bitmap Dissolve">
<StackLayout>
<skia:SKCanvasView x:Name="canvasView"
VerticalOptions="FillAndExpand"
PaintSurface="OnCanvasViewPaintSurface" />
<Slider x:Name="progressSlider"
Margin="10"
ValueChanged="OnSliderValueChanged" />
</StackLayout>
</ContentPage>
Plik związany z kodem ładuje dwa zasoby mapy bitowej. Te mapy bitowe nie mają tego samego rozmiaru, ale są takie same współczynniki proporcji:
public partial class BitmapDissolvePage : ContentPage
{
SKBitmap bitmap1;
SKBitmap bitmap2;
public BitmapDissolvePage()
{
InitializeComponent();
// Load two bitmaps
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream(
"SkiaSharpFormsDemos.Media.SeatedMonkey.jpg"))
{
bitmap1 = SKBitmap.Decode(stream);
}
using (Stream stream = assembly.GetManifestResourceStream(
"SkiaSharpFormsDemos.Media.FacePalm.jpg"))
{
bitmap2 = SKBitmap.Decode(stream);
}
}
void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
{
canvasView.InvalidateSurface();
}
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
// Find rectangle to fit bitmap
float scale = Math.Min((float)info.Width / bitmap1.Width,
(float)info.Height / bitmap1.Height);
SKRect rect = SKRect.Create(scale * bitmap1.Width,
scale * bitmap1.Height);
float x = (info.Width - rect.Width) / 2;
float y = (info.Height - rect.Height) / 2;
rect.Offset(x, y);
// Get progress value from Slider
float progress = (float)progressSlider.Value;
// Display two bitmaps with transparency
using (SKPaint paint = new SKPaint())
{
paint.Color = paint.Color.WithAlpha((byte)(0xFF * (1 - progress)));
canvas.DrawBitmap(bitmap1, rect, paint);
paint.Color = paint.Color.WithAlpha((byte)(0xFF * progress));
canvas.DrawBitmap(bitmap2, rect, paint);
}
}
}
Właściwość Color SKPaint obiektu jest ustawiona na dwa uzupełniające poziomy alfa dla dwóch map bitowych. W przypadku używania z SKPaint mapami bitowymi nie ma znaczenia, jaka jest reszta Color wartości. Wszystko, co ma znaczenie, to kanał alfa. Kod w tym miejscu po prostu wywołuje metodę WithAlpha dla wartości domyślnej Color właściwości.
Przeniesienie rozpuszczonego Slider między jedną mapą bitową a drugą:
W ostatnich kilku artykułach pokazano, jak rysować tekst, okręgi, wielokropek, zaokrąglone prostokąty i mapy bitowe za pomocą skiasharpów. Następnym krokiem jest SkiaSharp Lines and Path , w którym dowiesz się, jak rysować połączone linie w ścieżce grafiki.