Search code examples
xamarinxamarin.formsskiasharpskia

Xamarin forms Dotted Cirlce using Skia Sharp


How can we create a dotted circle in xamarin forms using Skia Sharp, i had tried many but i could not make it happen can some one help me with this.

        SKImageInfo info = args.Info;
        SKSurface surface = args.Surface;
        SKCanvas canvas = surface.Canvas;

        canvas.Clear();

        SKPaint paint = new SKPaint
        {
            Style = SKPaintStyle.Stroke,
            Color = Color.Red.ToSKColor(),
            StrokeWidth = 10
        };
        canvas.DrawCircle(info.Width / 3, info.Height / 2, 100, paint);

Solution

  • You are pretty close. You just need to understand what you are doing. Are you setting the Constructor of your page correctly? You have to

    1. Create an instance of SKCanvasView and add it to the Content of your page.
    2. So assuming that the name of your class or page is SimpleCirclePage.cs, you need to add this inside it, along with other items.
    3. Add an event handler to the PaintSurface event of your SKCanvasView instance.

    The constructor

    public SimpleCirclePage()
    {
            SKCanvasView canvasView = new SKCanvasView();
            canvasView.PaintSurface += OnCanvasViewPaintSurface;
            Content = canvasView;
    }
    

    The Event Handler

    void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
            SKImageInfo info = args.Info;
            SKSurface surface = args.Surface;
            SKCanvas canvas = surface.Canvas;
    
            canvas.Clear();
    
            // Creating the Outline of the circle with Black
            SKPaint paint = new SKPaint
            {
                    Style = SKPaintStyle.Stroke,
                    Color = Color.Black.ToSKColor(),
                    StrokeWidth = 22
            };
            canvas.DrawCircle(info.Width / 2, info.Height / 2, 100, paint);
    
            // Filling the circle with red
            paint.Style = SKPaintStyle.Fill;
            paint.Color = SKColors.Red;
            canvas.DrawCircle(info.Width / 2, info.Height / 2, 100, paint);
    }