Question

我正在尝试使用以下代码在SkiaSharp画布视图上绘制弧。

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

但它不是曲线，而是绘制一条直线。如何将其作为曲线？

完整代码

 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

您的line 424, in <module> menu() line 50, in menu main1v1() line 396, in main1v1 showPoints(playerTile, opponentTile) line 307, in showPoints scores = getScoreOfBoard(mainBoard) NameError: name 'mainBoard' is not defined半径为零，因此x会在从当前点到退出点的路径中添加一条线。

如果半径为零，或者最后一个路径点等于（x，y），则将线附加到xy。 arcTo缩放半径r以适合最后的路径点和xy，如果两者都大于零但是太小。

您可以执行以下操作：

ArcTo

但我不知道你的绘画意图是什么;凹，凸，有界，无界等...但使用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);如何解决弧形，圆锥曲线和移动：

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

Answer 2

根据@SushiHangover

的回复，我使用ConicTo作为以下内容

参考文献：

Three Types of Bézier Curves - developer.xamarin
Three Ways to Draw an Arc - developer.xamarin
Experimental 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);

  }

SkiaSharp ArcTo方法不绘制曲线

2 个答案: