와 통합 Xamarin.Forms
터치 및 Xamarin.Forms 요소에 응답하는 SkiaSharp 그래픽 만들기
SkiaSharp 그래픽은 여러 가지 방법으로 나머지 Xamarin.Forms 그래픽과 통합할 수 있습니다. SkiaSharp 캔버스와 Xamarin.Forms 요소를 동일한 페이지에 결합하고 SkiaSharp 캔버스 위에 요소를 배치 Xamarin.Forms 할 수도 있습니다.
대화형 SkiaSharp 그래픽을 Xamarin.Forms 만드는 또 다른 방법은 터치입니다.
샘플 프로그램의 두 번째 페이지에는 탭 토글 채우기라는 제목이 있습니다. 채우기 없이 채우기를 사용하여 탭으로 전환되는 두 가지 방법으로 간단한 원을 그립니다. 클래스는 TapToggleFillPage 사용자 입력에 대한 응답으로 SkiaSharp 그래픽을 변경하는 방법을 보여 줍니다.
이 페이지의 SKCanvasView 경우 이 클래스는 TapToggleFill.xaml 파일에서 인스턴스화되며, 보기에서도 설정합니다Xamarin.FormsTapGestureRecognizer.
<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 네임스페이스 선언을 skia 확인합니다.
Tapped 개체의 TapGestureRecognizer 처리기는 단순히 부울 필드의 값을 토글하고 다음 메서드SKCanvasView를 InvalidateSurface 호출합니다.
bool showFill = true;
...
void OnCanvasViewTapped(object sender, EventArgs args)
{
showFill ^= true;
(sender as SKCanvasView).InvalidateSurface();
}
호출 InvalidateSurface 은 필드를 사용하여 showFill 원을 PaintSurface 채우거나 채우지 않는 처리기에 대한 호출을 효과적으로 생성합니다.
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);
}
}
이 StrokeWidth 속성은 차이를 강조하기 위해 50으로 설정되었습니다. 내부를 먼저 그린 다음 윤곽선을 그려 전체 선 너비를 볼 수도 있습니다. 기본적으로 이벤트 처리기에서 나중에 그려진 그래픽 그림은 처리기 앞부분에서 PaintSurface 그린 그림을 가립니다.
색 탐색 페이지에서는 SkiaSharp 그래픽을 다른 Xamarin.Forms 요소와 통합하는 방법을 보여 줍니다. 또한 SkiaSharp에서 색을 정의하기 위한 두 가지 대체 방법 간의 차이점을 보여 줍니다. 정적 SKColor.FromHsl 메서드는 Hue-Saturation-Lightness 모델을 기반으로 값을 만듭니다 SKColor .
public static SKColor FromHsl (Single h, Single s, Single l, Byte a)
정적 SKColor.FromHsv 메서드는 유사한 Hue-Saturation-Value 모델을 기반으로 값을 만듭니다 SKColor .
public static SKColor FromHsv (Single h, Single s, Single v, Byte a)
두 경우 모두 인수 범위는 h 0에서 360까지입니다. , l및 v 인수 범위는 s0에서 100까지입니다. (알파 또는 불투명도) 인수의 범위는 a 0에서 255까지입니다.
ColorExplorePage.xaml 파일은 사용자가 HSL 및 HSV 색 값을 선택할 수 있는 뷰와 Label 나란히 Slider 두 개의 SKCanvasView 개체 StackLayout 를 만듭니다.
<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 요소는 결과 RGB 색 값을 표시하기 위해 맨 위에 앉아 있는 단일 셀 Grid Label 에 있습니다.
ColorExplorePage.xaml.cs 코드 숨김 파일은 비교적 간단합니다. 세 Slider 요소에 대한 공유 ValueChanged 처리기는 두 요소를 모두 SKCanvasView 무효화합니다. PaintSurface 처리기는 요소가 나타내는 색으로 캔버스를 Slider 지우고 요소의 SKCanvasView 맨 위에 있는 항목도 설정합니다Label.
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);
}
}
HSL 및 HSV 색 모델 모두에서 Hue 값의 범위는 0에서 360까지이며 색의 주된 색조를 나타냅니다. 이들은 무지개의 전통적인 색상입니다 : 빨간색, 주황색, 노란색, 녹색, 파란색, 인디고, 바이올렛, 그리고 다시 원에서 빨간색으로.
HSL 모델에서 가벼움에 대한 0 값은 항상 검은색이고 100 값은 항상 흰색입니다. 채도 값이 0이면 0에서 100 사이의 가벼움 값은 회색 음영입니다. 채도를 늘리면 더 많은 색이 추가됩니다. 채도가 100이고 가벼움이 50이면 순수 색(한 구성 요소가 255, 다른 구성 요소가 0과 같고 세 번째 값이 0에서 255까지)인 RGB 값이 발생합니다.
HSV 모델에서 채도와 값이 모두 100이면 순수 색이 발생합니다. 값이 0이면 다른 설정에 관계없이 색은 검은색입니다. 채도가 0이고 값 범위가 0에서 100까지인 경우 회색 음영이 발생합니다.
그러나 두 모델에 대한 느낌을 얻는 가장 좋은 방법은 직접 실험하는 것입니다.
