Миллионы приложений создаются каждый день. Эти приложения выполняют различные функции, но в одном они похожи: все они в той или иной форме отображают информацию для пользователя. Это могут быть графики или таблицы, интерактивный интерфейс, простой текст, мобильные игры.
Каждая мобильная платформа имеет собственный мощный графический API: от iOS CoreGraphics и Android graphics до Windows media и imaging. Также существует большое количество оборудования, увеличивающего возможности графических API с помощью OpenGL, OpenGL ES и DirectX. Но все эти мощные инструменты сильно отличаются друг от друга, что делает обмен логикой и кодом практически невозможным. Даже с помощью продвинутых кроссплатформенных библиотек как Xamarin.Forms возможности графической обработки и рендеринга остаются довольно ограниченными. Поэтому стоит познакомится со SkiaSharp.
Знакомство со SkiaSharp
SkiaSharp – это полностью кроссплатформенный 2D графический API,
поддерживаемый библиотекой Skia от Google, которая управляет Google Chrome, Mozilla Firefox и графическим стеком Android. Этот API не только мощный, но и довольно простой в использовании, и все, что необходимо – это установить SkiaSharp NuGet.
SkiaSharp можно использовать для рендеринга изображений на разных платформах, включая iOS, macOS, tvOS, Android, и Universal Windows Platform (UWP). SkiaSharp поддерживает не только нативные мобильные приложения, но и .NET Standard 1.3 and .NET Core в macOS и Windows, также как и классические десктопные Windows и WPF приложения.
Установка SkiaSharp
Создадим простое мобильное приложение, которое продемонстрирует несколько из множества возможностей SkiaSharp. Исходный код для этого приложения взят с GitHub: mattleibow/SkiaSharpDemo.
Для создания данного приложения был использован XAML в Xamarin.Forms, но можно использовать любую из нативных Xamarin или Windows платформ. Созданное приложение будет рисовать на экране фигуры, линии и текст:
Чтобы начать, нужно создать новое Xamarin.Forms приложение в Xamarin Studio или Visual Studio. После создания приложения необходимо установить SkiaSharp NuGet и SkiaSharp.Views.Forms NuGet во все проекты.
SkiaSharp NuGet содержит нативные движки рендеринга для всех платформ. Но это только для внутреннего рендеринга. Чтобы отобразить отрендеренные изображения нужно использовать SkiaSharp.Views.Forms NuGet.
Если используется не Xamarin.Forms, а нативную платформу, необходимо установить SkiaSharp.Views NuGet. Этот пакет предоставляет возможность отображения для всех платформ, поддерживаемых SkiaSharp.
Добавление SkiaSharp Views
Установив нужные пакеты NuGet, следует добавить the SkiaSharp view в XAML-файл. В этот файл необходимо добавить класс SKCanvasView (область отрисовки на базе CPU), либо SKGLView (область отрисовки на базе GPU):
1 2 3 4 5 | <ContentPage ... xmlns:views="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"> <Grid> <views:SKCanvasView PaintSurface="OnPainting" /> </Grid> </ContentPage> |
Затем нужно добавить обработчик событий в код для страницы:
1 2 3 4 5 6 7 | using SkiaSharp; using SkiaSharp.Views.Forms; private void OnPainting(object sender, SKPaintSurfaceEventArgs e) { //Здесь можно рисовать } |
Примечание: Если запустить приложение сейчас, появится чистый экран и, возможно, какие-то артефакты или непонятные пиксели. Это происходит из-за того, что еще ничего не отрисовано и срабатывает рендеринг последнего, что было в памяти, т.е. случайных данных.
Drawing with SkiaSharp
Теперь, когда размещены элементы view, необходимо написать код отрисовки для этих элементов. Отрисовка в SkiaSharp включает три шага:
- Получение области отрисовки для размещения графики
- Получение канваса, в котором будет происходить отрисовка
- Отрисовка в канвасе
Когда используются элементы view в SkiaSharp, первый пункт (получение области отрисовки) выполняется автоматически, и можно просто запросить у области отрисовки канвас. Вот три соответствующих этим шагам компонента: SKSurface, SKCanvas и SKPaint.
SKSurface – это уровень, который направляет команды отрисовки из SkiaSharp в нативную область отрисовки. Эта область может быть участком памяти для программ рисования, ID буфера кадров для OpenGL- объекта буфера кадров или объекта текстуры. Есть несколько вариантов создания этой области отрисовки: создание новой области или использование существующего участка памяти или буфера кадров. Больше информации можно найти в SKSurface.Create(…) API.
Следующий компонент — SKCanvas . Этот уровень транслирует команды отрисовки DrawRect и DrawPath в соответствующие команды для отрисовки в текущей области. Получить канвас можно, используя свойство SKSurface.Canvas. У канваса есть методы отрисовки фигур (DrawRect, DrawOval, и DrawPath), текста (DrawText) и изображений (DrawBitmap и DrawBitmapLattice) и управления графикой и обрезки (RotateDegrees, Skew, и ClipRect).
Наконец SKPaint. На этом уровне контролируется сама отрисовка. Можно вызвать метод DrawRect несколько раз и, меняя только краску, получить разные треугольники. Есть свойства SKPaint, которые управляют способом отображения объектов (IsAntialias, Color, Style и StrokeWidth) и текста (Typeface, UnderlineText, TextSize и TextAlign), а также имеются шейдеры, фильтры масок, фильтры цветов, фильтры изображений и blend-режимы/
Очистка канваса
В методе OnPainting сначала необходимо получить канвас для отрисовки, затем подготовить канвас, очистив его и закрасив белым:
1 2 3 4 5 6 7 8 9 | private void OnPainting(object sender, SKPaintSurfaceEventArgs e) { // получаем текущую поверхность из аргументов var surface = e.Surface; // Получаем холст на котором будет рисовать var canvas = surface.Canvas; // Очищаем холст canvas.Clear(SKColors.White); } |
Если запустить этот код, появится белый экран, на котором можно рисовать:
Отрисовка фигур
Первая фигура – простая окружность – нарисована с помощью метода SKCanvas.DrawCircle(cx, cy, radius, paint).В этом методе есть SKPaint-параметр, который использован для отрисовки заполненной окружности с контуром:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // Создаем заполненный круг var circleFill = new SKPaint { IsAntialias = true, Style = SKPaintStyle.Fill, Color = SKColors.Blue }; // Рисуем заполненный круг canvas.DrawCircle(100, 100, 40, circleFill); // Создаем границу для круга var circleBorder = new SKPaint { IsAntialias = true, Style = SKPaintStyle.Stroke, Color = SKColors.Red, StrokeWidth = 5 }; // Рисуем границу круга canvas.DrawCircle(100, 100, 40, circleBorder); |
Теперь при запуске приложения на экране появляется окружность:
Отрисовка линий
Можно создать более сложные фигуры, используя SKPath и метод SKCanvas.DrawPath(path, paint):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // Создаем основу пути var pathStroke = new SKPaint { IsAntialias = true, Style = SKPaintStyle.Stroke, Color = SKColors.Green, StrokeWidth = 5 }; // Создаем путь var path = new SKPath(); path.MoveTo(160, 60); path.LineTo(240, 140); path.MoveTo(240, 60); path.LineTo(160, 140); // Рисуем путь canvas.DrawPath(path, pathStroke); |
Теперь рядом с окружностью появился крест.
Отрисовка текста
И последнее – текст. Изобразить текст, используя SkiaSharp, довольно просто. Для этого нужно использовать метод SKCanvas.DrawText(text, x, y, paint):
1 2 3 4 5 6 7 8 9 10 11 | // Создаем текст var textPaint = new SKPaint { IsAntialias = true, Style = SKPaintStyle.Fill, Color = SKColors.Orange, TextSize = 80 }; // Рисуем текст canvas.DrawText("SkiaSharp", 60, 160 + 80, textPaint); |
После этого на экране появляется оранжевый текст ниже нарисованных ранее фигур:
Краткий обзор
Начать работать со SkiaSharp просто. Для этого нужен один пакет NuGet: SkiaSharp. Этот пакет обеспечит все необходимое для создания и управления графикой на любой платформе.
Если нужно отображать собственную графику на экране, можно попробовать NuGet-пакет SkiaSharp.Views. В этом пакете есть набор представлений, уровней и настроек, который поможет справиться с этой задачей. Если используется Xamarin.Forms-приложение, то необходимо установить NuGet-пакет SkiaSharp.Views.Forms, который обеспечит такую же функциональность для Xamarin.Forms.
Наконец имеется облегченная загружаемая SVG библиотека, которую можно использовать для подгрузки SVG в SKPicture: SkiaSharp.Svg.
Документация и форумы
Все SkiaSharp API описаны на сайте Xamarin developer наряду с гайдами разработки, которые представляют даже больше информации по использованию SkiaSharp.
Также можно задавать вопросы на форумах Xamarin SkiaSharp. На StackOverflow тоже есть необходимая информация.
Есть секция на Gitter.im: xamarin/XamarinComponents.
Код, проблемы и предложения
База кода SkiaSharp постоянно растет и совершенствуется. Если есть желание поучаствовать в этом процессе, это можно сделать на GitHub: mono/SkiaSharp.
Если есть любые вопросы, баги или предложения, можно обратиться сюда: issues.
Автор: Matthew Soucoup
Источник: Официальный блог Xamarin
Написать ответ