xamarin - SkiaSharp ArcTo Method does not draw curve

Question

I am trying to draw an arc on a SkiaSharp canvas view using following code.

path3.ArcTo(new SKPoint(0, h/2), 1.57f, SKPathArcSize.Large,
            SKPathDirection.Clockwise, new SKPoint(w/2, h));

But instead of a curve, it is drawing a straight line. How to make it as a curve?

Complete Code

 private void OnPainting(object sender, SKPaintSurfaceEventArgs e)
 {

     var surface = e.Surface;
     var canvas = surface.Canvas;
     canvas.Clear(SKColors.White);

        var w = e.Info.Width;
        var h = e.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/2);
        path3.ArcTo(new SKPoint(0, h/2), 1.57f, SKPathArcSize.Large, SKPathDirection.Clockwise, new SKPoint(w/2, h));
        path3.LineTo(0, h);
        path3.Close();
        canvas.DrawPath(path3, pathStroke3);


 }

XAML

 <Grid x:Name="controlGrid" ColumnSpacing="0" RowSpacing="0" Padding="0" BackgroundColor="White" >
    <Grid.RowDefinitions>
        <RowDefinition Height="4*" />
        <RowDefinition Height="6*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <views:SKCanvasView PaintSurface="OnPainting" EnableTouchEvents="True" 
     Touch="OnTouch" HeightRequest="300" Grid.Row="0"/>
 </Grid>

Answer 1

您的x半径为零，因此ArcTo在从当前点到出口点的路径中添加了一条线。

如果任一半径为零或最后一个路径点等于 (x, y)，则 arcTo 将 Line 附加到 xy。如果两者都大于零但太小，则 arcTo 缩放半径以适应最后一个路径点和 xy。

您可以执行以下操作：

path3.ArcTo(new SKPoint(100, 100), 0, SKPathArcSize.Large, SKPathDirection.Clockwise, new SKPoint(w / 2, h));

但我不知道你的绘画意图是什么；凹的，凸的，有界的，无界的，等等......但其他一些使用ConicTo它的例子可能更接近我认为你的意图可能是：

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

path3.ConicTo(0, h - (h / 5), w / 2, h, 0.50f);

您可能想查看官方文档以了解如何ArcTo解析为弧线、圆锥曲线和移动：

• https://skia.org/user/api/bmh_SkPath?cl=9919#arcTo

Answer 2

ConicTo根据@SushiHangover 的回复，我正在使用以下内容

参考：

1. 三种类型的贝塞尔曲线 - developer.xamarin
2. 绘制圆弧的三种方法 - developer.xamarin
3. 实验性 SkPath -skia.org

代码

private void OnPainting(object sender, SKPaintSurfaceEventArgs e)
{

     var surface = e.Surface;
     var canvas = surface.Canvas;
     canvas.Clear(SKColors.White);

        var w = e.Info.Width;
        var h = e.Info.Height;
        var h12 = h - (h / 8);
        var h8 = h - (h / 6);
        var h4 = h - (h / 3);


        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, h4);
        path3.ConicTo(0, h8, w/2, h12, 0.50f);
        path3.LineTo(w/2, h);
        path3.LineTo(0, h);
        path3.Close();
        canvas.DrawPath(path3, pathStroke3);

        var pathStroke6 = new SKPaint
        {
            IsAntialias = true,
            Style = SKPaintStyle.StrokeAndFill,
            Color = new SKColor(100,0, 240,  250),
            StrokeWidth = 5
        };
        var path6 = new SKPath { FillType = SKPathFillType.EvenOdd };
        path6.MoveTo(w, h4);
        path6.ConicTo(w, h8, w / 2, h12, 0.50f);
        path6.LineTo(w / 2, h);
        path6.LineTo(w, h);
        path6.Close();
        canvas.DrawPath(path6, pathStroke6);


        var pathStroke4 = new SKPaint
        {
            IsAntialias = true,
            Style = SKPaintStyle.Stroke,
            Color = new SKColor(0, 0, 255),
            StrokeWidth = 5
        };

        var path4 = new SKPath { FillType = SKPathFillType.EvenOdd };
        path4.MoveTo(0, h4);
        path4.LineTo(w / 2, h4);
        canvas.DrawPath(path4, pathStroke4);


        var pathStroke5 = new SKPaint
        {
            IsAntialias = true,
            Style = SKPaintStyle.Stroke,
            Color = new SKColor(0, 255, 0),
            StrokeWidth = 5
        };
        var path5 = new SKPath { FillType = SKPathFillType.EvenOdd };
        path5.MoveTo(0, h8);
        path5.LineTo(w / 2, h8);
        canvas.DrawPath(path5, pathStroke5);

        var path7 = new SKPath { FillType = SKPathFillType.EvenOdd };
        path5.MoveTo(w/4, h8);
        path5.LineTo(w /4, h);
        canvas.DrawPath(path5, pathStroke5);

  }