Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
Dokunmaya ve Xamarin.Forms öğelere yanıt veren SkiaSharp grafikleri oluşturma
SkiaSharp grafikleri, geri kalanıyla Xamarin.Forms çeşitli yollarla tümleşebilir. SkiaSharp tuvalini ve Xamarin.Forms öğelerini aynı sayfada birleştirebilir ve hatta öğeleri skiaSharp tuvalinin üzerine yerleştirebilirsiniz Xamarin.Forms :
uygulamasında Xamarin.Forms etkileşimli SkiaSharp grafikleri oluşturmaya yönelik bir diğer yaklaşım da dokunma yoluyla yapılır.
Örnek programın ikinci sayfasında Dolguyu Değiştir'e dokunun. Dolgusuz ve dolgulu basit bir daire çizer ve bir dokunuşla geçiş yapar. sınıfı, TapToggleFillPage kullanıcı girişine yanıt olarak SkiaSharp grafiklerini nasıl değiştirebileceğinizi gösterir.
Bu sayfa için sınıfı, SKCanvasView görünümde bir Xamarin.FormsTapGestureRecognizer ayarlayan TapToggleFill.xaml dosyasında örneği oluşturulur:
<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.TapToggleFillPage"
Title="Tap Toggle Fill">
<skia:SKCanvasView PaintSurface="OnCanvasViewPaintSurface">
<skia:SKCanvasView.GestureRecognizers>
<TapGestureRecognizer Tapped="OnCanvasViewTapped" />
</skia:SKCanvasView.GestureRecognizers>
</skia:SKCanvasView>
</ContentPage>
XML ad alanı bildirimine skia dikkat edin.
Tapped Nesnesinin TapGestureRecognizer işleyicisi, boole alanının değerini değiştirir ve yöntemini SKCanvasViewçağırırInvalidateSurface:
bool showFill = true;
...
void OnCanvasViewTapped(object sender, EventArgs args)
{
showFill ^= true;
(sender as SKCanvasView).InvalidateSurface();
}
çağrısı, daireyi InvalidateSurface PaintSurface doldurmak veya doldurmamak için alanını kullanan showFill işleyiciye etkili bir çağrı oluşturur:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
SKPaint paint = new SKPaint
{
Style = SKPaintStyle.Stroke,
Color = Color.Red.ToSKColor(),
StrokeWidth = 50
};
canvas.DrawCircle(info.Width / 2, info.Height / 2, 100, paint);
if (showFill)
{
paint.Style = SKPaintStyle.Fill;
paint.Color = SKColors.Blue;
canvas.DrawCircle(info.Width / 2, info.Height / 2, 100, paint);
}
}
Özelliği StrokeWidth , farkı vurgulamak için 50 olarak ayarlandı. Ayrıca önce iç ve ardından ana hattı çizerek tüm çizgi genişliğini görebilirsiniz. Varsayılan olarak, olay işleyicisinde PaintSurface daha sonra çizilen grafik şekilleri, işleyicide daha önce çizilenleri gizler.
Renk Araştırma sayfası, SkiaSharp grafiklerini diğer Xamarin.Forms öğelerle nasıl tümleştirebileceğinizi gösterir ve ayrıca SkiaSharp'ta renkleri tanımlamak için iki alternatif yöntem arasındaki farkı gösterir. Statik SKColor.FromHsl yöntem Hue-Doygunluk-Hafiflik modelini temel alan bir SKColor değer oluşturur:
public static SKColor FromHsl (Single h, Single s, Single l, Byte a)
Statik SKColor.FromHsv yöntem, benzer Hue-Doygunluk-Değer modelini temel alan bir SKColor değer oluşturur:
public static SKColor FromHsv (Single h, Single s, Single v, Byte a)
Her iki durumda h da bağımsız değişken 0 ile 360 arasında değişir. s, lve v bağımsız değişkenleri 0 ile 100 arasında değişir. a (alfa veya opaklık) bağımsız değişkeni 0 ile 255 arasında değişir.
ColorExplorePage.xaml dosyası, kullanıcının HSL ve HSV renk değerlerini seçmesine olanak sağlayan ve Label görünümleriyle Slider yan yana iki SKCanvasView nesne StackLayout 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.Basics.ColorExplorePage"
Title="Color Explore">
<StackLayout>
<!-- Hue slider -->
<Slider x:Name="hueSlider"
Maximum="360"
Margin="20, 0"
ValueChanged="OnSliderValueChanged" />
<Label HorizontalTextAlignment="Center"
Text="{Binding Source={x:Reference hueSlider},
Path=Value,
StringFormat='Hue = {0:F0}'}" />
<!-- Saturation slider -->
<Slider x:Name="saturationSlider"
Maximum="100"
Margin="20, 0"
ValueChanged="OnSliderValueChanged" />
<Label HorizontalTextAlignment="Center"
Text="{Binding Source={x:Reference saturationSlider},
Path=Value,
StringFormat='Saturation = {0:F0}'}" />
<!-- Lightness slider -->
<Slider x:Name="lightnessSlider"
Maximum="100"
Margin="20, 0"
ValueChanged="OnSliderValueChanged" />
<Label HorizontalTextAlignment="Center"
Text="{Binding Source={x:Reference lightnessSlider},
Path=Value,
StringFormat='Lightness = {0:F0}'}" />
<!-- HSL canvas view -->
<Grid VerticalOptions="FillAndExpand">
<skia:SKCanvasView x:Name="hslCanvasView"
PaintSurface="OnHslCanvasViewPaintSurface" />
<Label x:Name="hslLabel"
HorizontalOptions="Center"
VerticalOptions="Center"
BackgroundColor="Black"
TextColor="White" />
</Grid>
<!-- Value slider -->
<Slider x:Name="valueSlider"
Maximum="100"
Margin="20, 0"
ValueChanged="OnSliderValueChanged" />
<Label HorizontalTextAlignment="Center"
Text="{Binding Source={x:Reference valueSlider},
Path=Value,
StringFormat='Value = {0:F0}'}" />
<!-- HSV canvas view -->
<Grid VerticalOptions="FillAndExpand">
<skia:SKCanvasView x:Name="hsvCanvasView"
PaintSurface="OnHsvCanvasViewPaintSurface" />
<Label x:Name="hsvLabel"
HorizontalOptions="Center"
VerticalOptions="Center"
BackgroundColor="Black"
TextColor="White" />
</Grid>
</StackLayout>
</ContentPage>
SKCanvasView İki öğe, sonuçta elde edilen RGB renk değerini görüntülemek için üstte oturan tek hücreli bir Label hücrededirGrid.
ColorExplorePage.xaml.cs arka planda kod dosyası oldukça basittir. Üç Slider öğe için paylaşılan ValueChanged işleyici her iki SKCanvasView öğeyi de geçersiz kılmış. İşleyiciler PaintSurface tuvali öğeler tarafından Slider belirtilen renkle temizler ve ayrıca öğelerin üzerine oturmayı SKCanvasView ayarlarLabel:
public partial class ColorExplorePage : ContentPage
{
public ColorExplorePage()
{
InitializeComponent();
hueSlider.Value = 0;
saturationSlider.Value = 100;
lightnessSlider.Value = 50;
valueSlider.Value = 100;
}
void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
{
hslCanvasView.InvalidateSurface();
hsvCanvasView.InvalidateSurface();
}
void OnHslCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKColor color = SKColor.FromHsl((float)hueSlider.Value,
(float)saturationSlider.Value,
(float)lightnessSlider.Value);
args.Surface.Canvas.Clear(color);
hslLabel.Text = String.Format(" RGB = {0:X2}-{1:X2}-{2:X2} ",
color.Red, color.Green, color.Blue);
}
void OnHsvCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKColor color = SKColor.FromHsv((float)hueSlider.Value,
(float)saturationSlider.Value,
(float)valueSlider.Value);
args.Surface.Canvas.Clear(color);
hsvLabel.Text = String.Format(" RGB = {0:X2}-{1:X2}-{2:X2} ",
color.Red, color.Green, color.Blue);
}
}
Hem HSL hem de HSV renk modellerinde Hue değeri 0 ile 360 arasında değişir ve rengin baskın tonunu gösterir. Bunlar gökkuşağının geleneksel renkleridir: kırmızı, turuncu, sarı, yeşil, mavi, indigo, mor ve kırmızı daire içinde geri.
HSL modelinde Lightness için 0 değeri her zaman siyahtır ve 100 değer her zaman beyazdır. Doygunluk değeri 0 olduğunda, 0 ile 100 arasındaki Hafiflik değerleri grinin tonlarıdır. Doygunluğu artırmak daha fazla renk ekler. Saf renkler (bir bileşen 255'e eşit, diğeri 0'a eşit ve üçüncüsü 0 ile 255 arasında değişen RGB değerleridir), Doygunluk 100 ve Hafiflik 50 olduğunda oluşur.
HSV modelinde saf renkler hem Doygunluk hem de Değer 100 olduğunda sonuçlanır. Değer 0 olduğunda, diğer ayarlardan bağımsız olarak renk siyahtır. Doygunluk 0 olduğunda ve Değer 0 ile 100 arasında olduğunda gri tonlar oluşur.
Ancak iki model için bir his elde etmenin en iyi yolu, onlarla kendiniz deneme yapmaktır:
