Forum Xamarin.Forms

How to draw using real sizes on Xamarin.Forms using SkiaSharp?

Hi. My goal is to draw a line in a fixed size in millimeters
I have tried to achieve this by converting from mm to dp. I'm using this formula:

private void canvasView_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
    SKSurface surface = e.Surface;
    SKCanvas canvas = surface.Canvas;
    canvas.Clear(SKColors.CornflowerBlue);

    int width = e.Info.Width;

    //Set transforms
    canvas.Translate(width / 2, 30);




    // In milimeters
    float heightInMilimeters = 10f;

    // In pixels. 
    // Constants.PIXELS_IN_MILIMETER = 3.779527559f
    var heightInPixels = heightInMilimeters * Constants.PIXELS_IN_MILIMETER;

    // In dp
    //dp = px / (dpi / 160)

    // heightInPixels = 37.79527559
    var heightInDeviceUnit = heightInPixels / 1.5   // Device with hdpi

    // heightInDeviceUnit = 25.19685039333333
    var rect = SKRect.Create(widthInDeviceUnit, heightInDeviceUnit);
    canvas.DrawRect(rect, blackFillPAint);
}

But when I measure the rectangle with a ruler it is not 10mm height.

I'm not sure if the way I went is the right way and if I missing something at the road.
Any help will be apreciated.
Thanks

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    I don't think you can make that work.
    If you have a screen of 1920wide at 92px per inch, for example - You don't know if that is a 6" phone or a 24" monitor.
    You'd have to track a database of device models to get the physical dimensions and use that as part of your calculations.

    You would also have to take OS level magnification factor into account. Does the user have poor eyesight and so set the OS to magnify by 125%?

  • AlexPAlexP Member ✭✭

    Actually, this should be pretty simple.
    Have a look at the official Xamarin guide: Dealing with sizes.

    Regarding the comment from @ClintStLaurent, I believe you can have more information regarding your device, sizes and scales in by using DeviceInfo class which has pixel sizes and scale of the current device running your app.

    Hope you'll be able to make it happen.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @AlexP said:
    Actually, this should be pretty simple.
    Have a look at the official Xamarin guide: Dealing with sizes.

    Regarding the comment from @ClintStLaurent, I believe you can have more information regarding your device, sizes and scales in by using DeviceInfo class which has pixel sizes and scale of the current device running your app.

    Hope you'll be able to make it happen.

    Oh - Very cool - I love finding out new things as much as the next guy - Great example of being happy to be wrong.

  • GonzalezGonzalez BRMember

    @ClintStLaurent said:
    I don't think you can make that work.
    If you have a screen of 1920wide at 92px per inch, for example - You don't know if that is a 6" phone or a 24" monitor.
    You'd have to track a database of device models to get the physical dimensions and use that as part of your calculations.

    You would also have to take OS level magnification factor into account. Does the user have poor eyesight and so set the OS to magnify by 125%?

    Ok, I got that. Let's supose that I have a device models database. Using a device with a screen of 5", how should I calculate the real height?

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Math.

    If you can get the resolution of the screen in dpi (dots per inch):
    If the screen had a resolution of 100dpi, and you need a 1 inch line... then its 100 pixels. 1/2" line, 50 pixels etc.

    If you don't know the resolution in dpi, but you know the physical size of the screen in inches then carve that up.
    5" screen and you need a 1" line then you need to draw 1/5 the real estate of the window.

    Then you have to get the magnification factor the user set at device preferences level (125% for example) then take that into account in your calculations.

  • TalahamutTalahamut Member

    I ran the MetricalBoxView sample from the Xamarin guide on a few different Android devices, and the 64x160 box it creates is somewhat close to the specified dimensions (1cm x 1in), but nowhere near as close as it should be, especially for an object that needs ruler-style precision.

    LG G5: 1.15cm x 1.15in
    Moto E4: 1.1cm x 1.075in
    Samsung Galaxy Tab A: ~1cm x .975in

    Is there a better way to draw precisely measured objects/text (within the limits of each device's pixel resolution)?

Sign In or Register to comment.