Точки и дефисы в SkiaSharp
Мастер тонкостей рисования пунктирных и дефисированных линий в SkiaSharp
SkiaSharp позволяет нарисовать линии, которые не являются твердыми, но вместо этого состоят из точек и дефисов:
Это можно сделать с эффектом пути, который является экземпляром класса, заданного SKPathEffect свойством PathEffectSKPaint. Вы можете создать эффект пути (или объединить эффекты пути) с помощью одного из методов статического создания, определенных SKPathEffect. (SKPathEffect является одним из шести эффектов, поддерживаемых SkiaSharp; другие описаны в разделе SkiaSharp Effect.)
Чтобы нарисовать пунктирные или пунктирные линии, используйте статический SKPathEffect.CreateDash метод. Существует два аргумента: первый — это массив значений float , указывающий длину точек и дефисов и длину пробелов между ними. Этот массив должен иметь четное число элементов, и должно быть не менее двух элементов. (В массиве могут быть нулевые элементы, но это приводит к сплошной линии.) Если есть два элемента, первая — длина точки или тире, а вторая — длина пробела до следующей точки или тире. Если существует более двух элементов, то они находятся в этом порядке: длина тире, длина пробела, длина тире, длина пробела и т. д.
Как правило, вы хотите сделать тире и разрыв длиной кратной ширины штриха. Если ширина штриха равна 10 пикселям, например массив {10, 10 } нарисует пунктирную линию, где точки и пробелы совпадают с толщиной штриха.
StrokeCap Однако параметр SKPaint объекта также влияет на эти точки и дефисы. Как вы увидите вскоре, это влияет на элементы этого массива.
На странице "Точки и дефисы" показаны пунктирные и пунктирные линии. Файл DotsAndDashesPage.xaml создает экземпляры двух Picker представлений, один для выбора крышки штриха, а второй — для выбора массива дефисов:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:skia="clr-namespace:SkiaSharp;assembly=SkiaSharp"
xmlns:skiaforms="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
x:Class="SkiaSharpFormsDemos.Paths.DotsAndDashesPage"
Title="Dots and Dashes">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Picker x:Name="strokeCapPicker"
Title="Stroke Cap"
Grid.Row="0"
Grid.Column="0"
SelectedIndexChanged="OnPickerSelectedIndexChanged">
<Picker.ItemsSource>
<x:Array Type="{x:Type skia:SKStrokeCap}">
<x:Static Member="skia:SKStrokeCap.Butt" />
<x:Static Member="skia:SKStrokeCap.Round" />
<x:Static Member="skia:SKStrokeCap.Square" />
</x:Array>
</Picker.ItemsSource>
<Picker.SelectedIndex>
0
</Picker.SelectedIndex>
</Picker>
<Picker x:Name="dashArrayPicker"
Title="Dash Array"
Grid.Row="0"
Grid.Column="1"
SelectedIndexChanged="OnPickerSelectedIndexChanged">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>10, 10</x:String>
<x:String>30, 10</x:String>
<x:String>10, 10, 30, 10</x:String>
<x:String>0, 20</x:String>
<x:String>20, 20</x:String>
<x:String>0, 20, 20, 20</x:String>
</x:Array>
</Picker.ItemsSource>
<Picker.SelectedIndex>
0
</Picker.SelectedIndex>
</Picker>
<skiaforms:SKCanvasView x:Name="canvasView"
PaintSurface="OnCanvasViewPaintSurface"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2" />
</Grid>
</ContentPage>
Первые три элемента в предположим dashArrayPicker , что ширина штриха составляет 10 пикселей. Массив {10, 10 } предназначен для точечной линии, { 30, 10 } для дефисной линии, а { 10, 10, 30, 10 } предназначен для линии dot-and-dash. (Остальные три будут обсуждаться в ближайшее время.)
Файл DotsAndDashesPage программной части содержит PaintSurface обработчик событий и несколько вспомогательных подпрограмм для доступа к Picker представлениям:
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 = SKColors.Blue,
StrokeWidth = 10,
StrokeCap = (SKStrokeCap)strokeCapPicker.SelectedItem,
PathEffect = SKPathEffect.CreateDash(GetPickerArray(dashArrayPicker), 20)
};
SKPath path = new SKPath();
path.MoveTo(0.2f * info.Width, 0.2f * info.Height);
path.LineTo(0.8f * info.Width, 0.8f * info.Height);
path.LineTo(0.2f * info.Width, 0.8f * info.Height);
path.LineTo(0.8f * info.Width, 0.2f * info.Height);
canvas.DrawPath(path, paint);
}
float[] GetPickerArray(Picker picker)
{
if (picker.SelectedIndex == -1)
{
return new float[0];
}
string str = (string)picker.SelectedItem;
string[] strs = str.Split(new char[] { ' ', ',' }, StringSplitOptions.RemoveEmptyEntries);
float[] array = new float[strs.Length];
for (int i = 0; i < strs.Length; i++)
{
array[i] = Convert.ToSingle(strs[i]);
}
return array;
}
На следующих снимках экрана экран iOS в левом углу отображает пунктирную линию:
Однако экран Android также должен показать пунктирную линию с помощью массива { 10, 10 } но вместо этого линия является твердой. Что произошло? Проблема заключается в том, что экран Android также имеет параметр Squareзаголовков штрихов. Это расширяет все дефисы на половину ширины штриха, что приводит к их заполнению пробелов.
Чтобы обойти эту проблему при использовании штриховой крышки Square или Round, необходимо уменьшить длину тире в массиве на длину штриха (иногда в результате тире длиной 0), а также увеличить длину разрывов на длину штриха. Вот как вычислялись последние три массива дефисов в Picker XAML-файле:
- { 10, 10 } становится { 0, 20 } для пунктирной линии
- { 30, 10 } становится { 20, 20 } для тире линии
- { 10, 10, 30, 10 } становится { 0, 20, 20, 20} для пунктирной и пунктирной линии
На экране UWP показано, что точка и пунктирная линия для штриховой крышки Round. Крышка Round штриха часто дает лучший вид точек и тире в толстых линиях.
До сих пор упоминание не было сделано из второго параметра методаSKPathEffect.CreateDash. Этот параметр называется phase и ссылается на смещение в шаблоне dot-and-dash для начала строки. Например, если массив тире равен {10, 10 } и phase равен 10, то строка начинается с пробела, а не точки.
Одним из интересных приложений phase параметра является анимация. Страница анимированной спирали похожа на страницу Archimedean Spiral, за исключением того, что AnimatedSpiralPage класс анимирует phase параметр с помощью Xamarin.FormsDevice.Timer метода:
public class AnimatedSpiralPage : ContentPage
{
const double cycleTime = 250; // in milliseconds
SKCanvasView canvasView;
Stopwatch stopwatch = new Stopwatch();
bool pageIsActive;
float dashPhase;
public AnimatedSpiralPage()
{
Title = "Animated Spiral";
canvasView = new SKCanvasView();
canvasView.PaintSurface += OnCanvasViewPaintSurface;
Content = canvasView;
}
protected override void OnAppearing()
{
base.OnAppearing();
pageIsActive = true;
stopwatch.Start();
Device.StartTimer(TimeSpan.FromMilliseconds(33), () =>
{
double t = stopwatch.Elapsed.TotalMilliseconds % cycleTime / cycleTime;
dashPhase = (float)(10 * t);
canvasView.InvalidateSurface();
if (!pageIsActive)
{
stopwatch.Stop();
}
return pageIsActive;
});
}
···
}
Конечно, вам придется на самом деле запустить программу, чтобы увидеть анимацию:
