SkiaSharp ConicTo 方法不绘制曲线

Question

我是 SkiaSharp 的新手 canvas，想要实现如下所示的 canvas。

我尝试使用下面的代码来实现 canvas 但失败了。

SKSurface vSurface = args.Surface;
SKCanvas vCanvas = vSurface.Canvas;
vCanvas.Clear(SKColors.White);

var w = args.Info.Width;
var h = args.Info.Height;

var pathStroke3 = new SKPaint
{
    IsAntialias = true,
    Style = SKPaintStyle.StrokeAndFill,
    Color = new SKColor(240, 0, 100, 250),
    StrokeWidth = 5
};
var path3 = new SKPath { FillType = SKPathFillType.EvenOdd };
path3.MoveTo(0, h / 4);
path3.ConicTo(w / 3, h / 2, w, h, 1f);
path3.LineTo(0, h);
path3.Close();

vCanvas.DrawPath(path3, pathStroke3);

结果如下图所示。

Answer 1

您的二次曲线规范存在一些问题，应该予以修复。我试着在下面解释他们的理由。

path3.ConicTo(w / 3, h / 2, w, h, 1f);

从下图可以看出，你把二次曲线的控制点定义在一个很不寻常的地方。

w / 3 第一个参数是你的二次曲线控制点的x坐标。由于您希望曲线的顶部水平位于中间，因此您应该将宽度除以 2 而不是 3。

h / 2 第二个参数是曲线的垂直控制点。您已定义曲线从 y 轴上的 h/4 开始，因此曲线的顶点需要高于该点。我在示例中使用了 h/6，但您可以尝试使用 h/8 甚至 0 或其他绝对值。

w第三个参数是曲线的水平终点，在你的实现中是正确的。
h 第四个参数应该和我们开始画曲线的地方一样。否则它不会是对称的，这就是为什么在你的情况下，终点在 h（= 屏幕右下角）。让它成为 h/4 瞧，曲线现在在正确的点结束。

这将更接近您想要实现的目标：

path3.ConicTo(w / 2, h / 6, w, h/4, 1f);

即使曲线现在没问题，你仍然遇到路径无法关闭的问题。你首先必须在屏幕的右下角和左下角画一条线，这样整个区域就会被很好地填满。像这样：

path3.LineTo(w, h);
path3.LineTo(0, h);

现在您有一条可以填充的路径，看起来应该与您发布的示例图片相似。

编辑： 如果你想修改曲线的强度，你可以做几件事。例如，您可以将曲线从屏幕上的较低位置开始，它会立即变得更加弯曲：

path3.MoveTo(0, h / 3);
path3.ConicTo(w / 2, h / 6, w, h / 3, 1f);

在这里，我将 MoveTo 方法的 y 坐标编辑为在屏幕上较低的位置，以及 ConicTo 方法的结束 y 坐标相同。您甚至可以尝试对两者都使用 h/2。

您可以做的另一件事是尝试使用 ConicTo 方法的最后一个参数。它定义了控制点的权重。值越高，您的曲线就越接近它，从而导致具有高值的非常尖锐的曲线。尝试使其更高或更低以改变曲线的强度。

最后，当前 h/6 的参数标记曲线的顶部。您可以尝试 h/10 或什至 0 之类的绝对坐标来改变曲线。

SkiaSharp ConicTo 方法不绘制曲线

SkiaSharp ConicTo Method does not draw a curve

skia

xamarin

xamarin.forms

skiasharp