Forum Libraries, Components, and Plugins

How does it works the method to display SVG path at SkiaSharp Canvas?

Within the guide, there are mentioned 3 steps of the method to display SVG path at SkiaSharp Canvas:

  1. move the center of the path to the point (0, 0),
  2. scale the path to the size of the canvas (but also taking the stroke width into account),
  3. and then move the center of the path to the center of the canvas.

    void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
            SKImageInfo info = args.Info;
            SKSurface surface = args.Surface;
            SKCanvas canvas = surface.Canvas;
    
            canvas.Clear();
    
            _myPath.GetTightBounds(out SKRect bounds);
    
            // Step 1
            canvas.Translate(info.Width / 2, info.Height / 2);
    
            // Step 2
            canvas.Scale(info.Width / (bounds.Width + paint.StrokeWidth),
                                 info.Height / (bounds.Height + paint.StrokeWidth));
    
            // Step 3
            canvas.Translate(-bounds.MidX, -bounds.MidY);
    
            canvas.DrawPath(_myPath, paint);
        }
    

Please, can you someone guide me through the steps? I don't understand why in my case, there is info.Width = 320, because (sender as CanvasView).Width = 80.

I would like to introduce a padding inside canvas (not margin outside CanvasView). Therefore I try to understand the steps to find the right one where to add the padding.

Sign In or Register to comment.