Нарисовать сплайн (гладкий путь) с помощью библиотеки SkiaSharp на Xamarin.Forms?

Я делаю приложение с использованием форм Xamarin.

Я хочу нарисовать плавный путь (сплайн) с помощью SKPath, но я не могу найти простой способ добиться этого.

Skiasharp не поддерживает его в настоящее время, если я сам не проложу путь плавно.

Спасибо.


person Bright Lee    schedule 23.01.2017    source источник


Ответы (2)


SkiaSharp поддерживает кубические кривые Безье. Итак, что вы можете сделать, так это разделить сплайн на сегменты (точки определяют конечные точки сегментов) и нарисовать каждый сегмент, используя кубическую кривую Безье. Для этого вам нужно ввести две контрольные точки между каждой точкой вашей сплайновой кривой. Эти точки нужно выбирать так, чтобы кривые в соседних сегментах плавно соединялись.

Я только что сделал реализацию этого. Метод public static SKPath CreateSpline(params SKPoint[] Points) создает путь, который можно использовать для рисования сплайна между точками. Посмотреть реализацию можно здесь:

https://github.com/PeterWaher/IoTGateway/blob/master/Script/Waher.Script.Graphs/Functions/Plots/Plot2DCurve.cs

Пример:

Пример сплайна

person Peter Waher    schedule 18.06.2017
comment
Привет, Питер, отличная работа. Спасибо, что поделились. Я ценю его. - person Bright Lee; 19.06.2017
comment
Согласно лицензии на IoTGateway, приведенный здесь код недоступен для коммерческого использования (требуется коммерческая лицензия), поэтому будьте осторожны при его копировании/вставке. - person Victor Chelaru; 17.05.2019
comment
Большое спасибо, Питер. Было бы элегантно, если бы разработчики SkiaSharp дали компактное решение. - person Sith2021; 30.04.2020

Я не уверен, что именно вы спрашиваете, но есть две области для сглаживания:

Сглаживание с использованием SKPaint.IsAntialias:

var paint = new SKPaint {
    IsAntialias = true
};
canvas.DrawPath (path, paint);

Кривые пути:

Если вам нужны кривые на пути, такие как закругленные углы, вам нужно будет использовать различные методы кривых. К ним относятся, помимо прочего, SKPath.ArcTo() и 'SKPath.CubicTo():

var path = new SKPath();
path.MoveTo(10, 10);
path.ArcTo(SKRect.Create(10, 10, 30, 30), 0, 45);

Документы пути: https://developer.xamarin.com/api/type/SkiaSharp.SKPath/

person Matthew    schedule 23.01.2017
comment
Привет, Мэтью, спасибо за ответ. Я нахожу способ, который на самом деле делает мой путь гладким. Думаю, ты поймешь, о чем я прошу. Ответ, который вы дали, не то, что я ищу. - person Bright Lee; 23.01.2017
comment
Мой путь не имеет много точек, так что это не гладкая линия. Но я не могу использовать ArcTo или CubicTo, чтобы сделать Безье, потому что путь не является статическим. - person Bright Lee; 23.01.2017
comment
Я думаю, что есть много графических библиотек, которые предоставляют эти функции на других платформах. и я ищу то же самое в формах Skiasharp. - person Bright Lee; 23.01.2017
comment
Члены являются методами экземпляра, поэтому просто создайте экземпляр. Я немного обновил ответ, чтобы привести пример. - person Matthew; 23.01.2017
comment
Вот пример более сложного пути: github.com/mono/SkiaSharp/blob/master/samples/ - person Matthew; 23.01.2017
comment
То, что я упомянул, я не могу использовать, означало, что это не подходит для моей ситуации. Пожалуйста, представьте себе рисунок карандашом, и я хочу, чтобы этот SKPath выглядел плавно, лучше, чем он рисовал. В этой ситуации я не могу использовать CubicTo или что-то еще для архивирования, не так ли? - person Bright Lee; 23.01.2017
comment
Решение, которое я нашел, заключается в том, чтобы сделать SKPath более гладким, добавив больше точек с помощью моей жесткой записи. Упомянутая мной функция не предусмотрена, верно? - person Bright Lee; 23.01.2017
comment
и плюс, SKstrokeJoin.Round - это не то, что я ищу. - person Bright Lee; 23.01.2017
comment
Если вы рисуете от руки, вам, вероятно, придется просто сделать большое количество точек. Там не так много накладных расходов, так что вы должны быть в порядке. Xamarin SignaturePad делает именно это, используя пути. Существует также SKPath.Simplify(): developer.xamarin.com/api/member /SkiaSharp.SKPath.Simplify() - person Matthew; 24.01.2017
comment
Также вы всегда можете упростить путь, используя один из множества алгоритмов. Я бы попробовал нарисовать тысячи точек, а затем на ручке упростить и сохранить это. По сути, все пути будут упрощены, кроме того, который рисуется в данный момент. - person Matthew; 24.01.2017
comment
Привет, Мэтью снова, рисунок от руки был просто примером, и, возможно, это был неправильный пример. На самом деле я рисую график, который имеет несколько точек. И я хочу сделать его гладким, а не уродливым и грубым графиком, потому что у них есть несколько точек. Они представляют собой множество графических библиотек или фреймворков на другой платформе, что делает форму графа гладкой с использованием нескольких точек на многих других платформах. Это то, что я пытаюсь сделать на самом деле. - person Bright Lee; 24.01.2017
comment
Я хотел знать, предусмотрена ли эта функция. Ответ будет не так? - person Bright Lee; 24.01.2017
comment
Это прекрасный пример, чтобы объяснить, что я пытаюсь сделать. highcharts.com/demo/spline-inverted - person Bright Lee; 24.01.2017
comment
Я собираюсь попробовать это решение и поделюсь результатом. codeproject. ком/Статьи/31859/ - person Bright Lee; 25.01.2017