В помощь мобильному разработчику
Skia логотип библиотеки

Кросс-платформенное рисование с помощью SkiaSharp

Александр Алексеев

Миллионы приложений создаются каждый день. Эти приложения выполняют различные функции, но в одном они похожи: все они в той или иной форме отображают информацию для пользователя. Это могут быть графики или таблицы, интерактивный интерфейс, простой текст, мобильные игры.

Каждая мобильная платформа имеет собственный мощный графический API: от iOS CoreGraphics и Android graphics до Windows media и imaging. Также существует большое количество оборудования, увеличивающего возможности графических API с помощью OpenGL, OpenGL ES и DirectX. Но все эти мощные инструменты сильно отличаются друг от друга, что делает обмен логикой и кодом практически невозможным. Даже с помощью продвинутых кроссплатформенных библиотек как Xamarin.Forms возможности графической обработки и рендеринга остаются довольно ограниченными. Поэтому стоит познакомится со SkiaSharp.

 

Знакомство со SkiaSharp

SkiaSharp – это полностью кроссплатформенный 2D графический API,Skia логотип библиотеки поддерживаемый библиотекой 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 платформ. Созданное приложение будет рисовать на экране фигуры, линии и текст:

Пример работы библиотеки Skia

Чтобы начать, нужно создать новое 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):

 

Затем нужно добавить обработчик событий в код для страницы:

 

Примечание: Если запустить приложение сейчас, появится чистый экран и, возможно, какие-то артефакты или непонятные пиксели. Это происходит из-за того, что еще ничего не отрисовано и срабатывает рендеринг последнего, что было в памяти, т.е. случайных данных.

 

Drawing with SkiaSharp

Теперь, когда размещены элементы view, необходимо написать код отрисовки для этих элементов. Отрисовка в SkiaSharp включает три шага:

  1. Получение области отрисовки для размещения графики
  2. Получение канваса, в котором будет происходить отрисовка
  3. Отрисовка в канвасе

Когда используются элементы 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 сначала необходимо получить канвас для отрисовки, затем подготовить канвас, очистив его и закрасив белым:

 

Если запустить этот код, появится белый экран, на котором можно рисовать:

Пример работы библиотеки Skia

 

Отрисовка фигур

Первая фигура – простая окружность – нарисована с помощью метода SKCanvas.DrawCircle(cx, cy, radius, paint).В этом методе есть SKPaint-параметр, который использован для отрисовки заполненной окружности с контуром:

 

Теперь при запуске приложения на экране появляется окружность:

Пример работы библиотеки Skia

 

Отрисовка линий

Можно создать более сложные фигуры, используя SKPath и метод SKCanvas.DrawPath(path, paint):

 

Теперь рядом с окружностью появился крест.
Пример работы библиотеки Skia

 

Отрисовка текста

И последнее – текст. Изобразить текст, используя SkiaSharp, довольно просто. Для этого нужно использовать метод SKCanvas.DrawText(text, x, y, paint):

 

После этого на экране появляется оранжевый текст ниже нарисованных ранее фигур:

Пример работы библиотеки Skia

 

Краткий обзор

Начать работать со 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

Александр Алексеев
Александр Алексеев

Xamarin - разработчик. Работаю с .NET платформой с 2012 года, программирую в основном с использованием C#. За это время успел поработать с ASP.NET, Entity Framework, MSSQL, Git

Android Apple кастомизация
Meetup лого

Написать ответ