Это часть статьи по опыту создания приложения с использованием C# Xamarin для Android платформы.
Canvas — это общий для разных платформ подход к работе с графикой, он обычно материализуется в специфичном для языка / платформы объекте, который так и называется — Canvas.
В данной статье я покажу пример использования этого объекта на C# Xamarin.
Объект Canvas можно создать динамически или определить его как компонент страницы вашего приложения.
Создаём Canvas динамически
В моём приложении Demo Line была основная страница — MainPage. Заменим её содержимое на canvas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
... using SkiaSharp.Views.Forms; namespace Demo_Line { public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); // создадим объект канвас SKCanvasView canvasView = new SKCanvasView(); // подключим обработчик, вызываемый при необходимости перерисовки canvasView.PaintSurface += OnCanvasViewPaintSurface; // заменим содержимое нашей страницы созданным канвасом Content = canvasView; } ... } } |
Canvas как компонент страницы
Второй подход заключается в редактировании xml шаблона страницы и объявление там компонента Canvas.
Так выглядит шаблон целиком:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?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.Views.Forms;assembly=SkiaSharp.Views.Forms" x:Class="Demo_Line.MainPage" Title="Demo Running Lines" Appearing="OnAppearing"> <Grid BackgroundColor="Black"> <skia:SKCanvasView x:Name="canvasView" EnableTouchEvents="True" PaintSurface="OnCanvasViewPaintSurface" Touch="OnTouch" /> </Grid> </ContentPage> |
Разберем тег skia:SKCanvasView подробнее:
x:Name=»canvasView» — передаёт имя компонента для использования его в коде приложения;
EnableTouchEvents=»True» Touch=»OnTouch» — теги разрешают обработку событий связанных с касаниями и назначают метод OnTouch для обработки этих событий;
PaintSurface=»OnCanvasViewPaintSurface» — подключаем обработчик перерисовки.
Пример обработки OnTouch
При касании вы скорее всего что то меняете на canvas, потому интересно рассмотреть этот обработчик. Нужно узнать, где вы прикоснулись, изменить что то в вашей программе и заставить canvas выполнить перерисовку.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
... namespace Demo_Line { public partial class MainPage : ContentPage { ... private void OnTouch(object sender, SKTouchEventArgs e) { switch (e.ActionType) { case SKTouchAction.Pressed: // координаты можно считать из события // это свойства (e.Location.X, e.Location.Y); // ваш код ... break; case SKTouchAction.Moved: break; case SKTouchAction.Released: break; case SKTouchAction.Cancelled: break; } // запрашиваем перерисовку if (e.InContact) ((SKCanvasView)sender).InvalidateSurface(); // событие обработано e.Handled = true; } |
Вызов метода InvalidateSurface() сигнализирует о том, что картинка изменилась, и её нужно перерисовать. Будет вызван ваш метод OnCanvasViewPaintSurface.
Небольшой пример работы непосредственно с canvas:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
... namespace Demo_Line { public partial class MainPage : ContentPage { ... void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args) { // извлекаем данные события SKImageInfo info = args.Info; SKSurface surface = args.Surface; SKCanvas canvas = surface.Canvas; // большинство операций требуют объекта SKPaint // который описывает стили SKPaint paint = new SKPaint { Style = SKPaintStyle.Fill, Color = SKColors.Black, // цвет фона StrokeWidth = 5, TextSize = 40 }; // заполняем канвас фоновым цветом canvas.DrawRect(new SKRect(0,0, info.Width, info.Height), paint); // меняем цвет на красный перед выводом текста paint.Color = SKColors.Red; canvas.DrawText("Строка текста", new SKPoint(0, 0), paint); } } } |