在Xamarin.Forms上使用SkiaSharp库绘制平滑路径（样条线）？

Question

我正在使用Xamarin Forms制作应用程序。

我想使用SKPath绘制平滑路径（样条曲线），但是我无法找到一个简单的方法来实现它。

目前Skiasharp不支持此功能，除非我自己使路径平滑。

谢谢。

- Bright Lee

Answer 1

SkiaSharp支持三次贝塞尔曲线。因此，您可以将样条分成多个线段（点确定线段端点），并使用三次贝塞尔曲线绘制每个线段。为此，您需要在样条曲线中的每个点之间引入两个控制点。这些点需要选择得当，以便相邻线段中的曲线连接平滑。

我刚刚实现了这个功能。 public static SKPath CreateSpline(params SKPoint[] Points)方法生成一个路径，您可以使用它来在点之间绘制样条曲线。您可以在此处查看实现： https://github.com/PeterWaher/IoTGateway/blob/master/Script/Waher.Script.Graphs/Functions/Plots/Plot2DCurve.cs 示例：

- Peter Waher

---

嗨，Peter，干得好。谢谢你的分享。我很感激。 - Bright Lee

根据IoTGateway的许可证，此处链接的代码不适用于商业用途（需要商业许可证），因此如果复制/粘贴，请小心。 - Victor Chelaru

非常感谢你，Peter。如果SkiaSharp开发人员提供了一个紧凑的解决方案，那将是优雅的。 - Sith2021

@Peter Waher，你能否加入一条免责声明，说明未获得许可时，不能将代码用于商业用途？ - Raid

Answer 2

我不确定你具体在问什么，但是有两个地方需要进行平滑处理：

使用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/

- Matthew

---

嗨，马修，谢谢回复。我正在寻找一种真正让我的路线顺畅的方法。我相信你会理解我的要求。你给出的答案不是我要找的。 - Bright Lee

这是一个更复杂路径的示例：https://github.com/mono/SkiaSharp/blob/master/samples/SkiaSharpSample.Shared/Samples/XamagonSample.cs - Matthew

如果你正在进行手绘，那么你可能需要画很多点。这里没有太多的开销，所以你应该没问题。Xamarin的SignaturePad就是使用路径来实现这一点的。还有一个SKPath.Simplify()方法：https://developer.xamarin.com/api/member/SkiaSharp.SKPath.Simplify()/ - Matthew

嗨，马修，我再次和你联系。刚才的手绘图只是一个例子，可能不太准确。实际上，我正在画一张图表，它有几个点。我想让它变得平滑，而不是因为只有几个点而显得丑陋和粗糙。在其他平台上有许多图形库或框架可以使用少量点使图形平滑。这就是我实际上要做的事情。 - Bright Lee

我将尝试这个解决方案并分享结果。https://www.codeproject.com/Articles/31859/Draw-a-Smooth-Curve-through-a-Set-of-D-Points-wit - Bright Lee