question

RaufMuhammed-3752 avatar image
0 Votes"
RaufMuhammed-3752 asked RaufMuhammed-3752 commented

Device Independent Drawing



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;
             }
         }
dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

LeonLu-MSFT avatar image
1 Vote"
LeonLu-MSFT answered RaufMuhammed-3752 commented

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.


· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@LeonLu-MSFT

Hi Leon Lu,

Thank you very much.

I just need to clarify something regarding the y position, which the one very important to me.
My image will contain list of items as follows,
1 - item 1
2 - item 2
3 - item 3
4 - item 4
5 - item 5
6 - item 6
7 - item 7
8 - item 8
9 - item 9

Now, suppose if I say 200, in my phone it will draw a marker on exactly on the first line and so on.
As you suggested, I hope I should find the height of the SKImage and and calculate y accordingly.
In the code mentioned, can you help me to understand the line float y = thickLinePaint.FontSpacing;


0 Votes 0 ·