Device Independent Drawing

Question

I draw line using SkiaSharp as below, on an <Image>, it works fine. But when I tested in another device with another resolution, the drawing is not on the same location I saw on my first device. How can draw using SkiaSharp in a device-independent manner.

 private void canvasView_PaintSurface(object sender, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs args)
        {

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

            canvas.Clear();

            if (isFromSearchPage)
            {
                SKPaint thickLinePaint = new SKPaint
                {
                    Style = SKPaintStyle.Stroke, //.StrokeAndFill,
                    Color = SKColors.Yellow.WithAlpha(0x60),
                    StrokeWidth = 120//15                
                };


                int startingLine = GetFirstLineNo();//1;//26;
                int lineInPage = 0;

                if (CurrentLine >= startingLine)
                {
                    lineInPage = CurrentLine - startingLine + 1;
                }

                int positionY = (int)SepratorTypeHeight.PageHeader + (lineInPage * (int)SepratorTypeHeight.LineSeparator);

                thickLinePaint.StrokeCap = SKStrokeCap.Square;
                canvas.DrawLine(150, positionY, 1300, positionY, thickLinePaint);

                isFromSearchPage = false;
            }
        }

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

When you draw a line that need to suitable for different resolution, please do not set the specific value when you drawLine.

Specific value should be interpreted as SKImageInfo.Width or Height's proportional.

such as

   float xText = info.Width / 2;  
               float xLine1 = info.Width/ 10;  
               float xLine2 = info.Width - xLine1;  
               float y = thickLinePaint.FontSpacing;  
     
               thickLinePaint.StrokeCap = SKStrokeCap.Square;  
            //   canvas.DrawLine(150, positionY, 1300, positionY, thickLinePaint);  
               canvas.DrawLine(xLine1, y, xLine2, y, thickLinePaint);  

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.