Xamarin Forms Bitmap Coordinates on SkiaSharp Canvas

Question

I have a simple Xamarin Forms page that contains a SkiaSharp Canvas. I am allowing the user to load a floor plan bitmap to use as the background for the Canvas, and they can add smaller bitmaps to be dragged around the canvas where they need.

I am following this guidance on the Microsoft page for touch manipulation. https://learn.microsoft.com/en-us/xamarin/xamarin.forms/user-interface/graphics/skiasharp/transforms/touch

Everything works perfectly if I use it on a single device size. When I launch it on a different device size, the resolution and Canvas size are different, and it is causing the smaller bitmaps to be placed inconsistently.

Here is the result I am seeing. The left is an iPhone 13 Pro Max, and the right is a iPhone 13 Pro. As you can see, the result is off when I view it on different size devices.

Here is the Grid that contains the SKCanvas:

<Grid BackgroundColor="White" Grid.Row="1">
  <skia:SKCanvasView x:Name="canvasView" PaintSurface="OnCanvasViewPaintSurface" />
    <Grid.Effects>
      <tt:TouchEffect Capture="True" TouchAction="OnTouchEffectAction" />
    </Grid.Effects>
</Grid>

Here is the PaintSurface handler:

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
  SKImageInfo info = args.Info;
  SKSurface surface = args.Surface;
  SKCanvas canvas = surface.Canvas;

  canvas.Clear();

  //set background
  SKRect dest = new SKRect(0, 0, info.Width, info.Height);
  canvas.DrawBitmap(backgroundBitmap, dest, BitmapStretch.Uniform,
                    BitmapAlignment.Start, BitmapAlignment.Start);

  //Set the coordinates for the pin bitmap
  var transX = 1005;
  var transY = 1189;
  bitmap.Matrix = SKMatrix.CreateTranslation(transX, transY);

  // Display the bitmap
  bitmap.Paint(canvas);

  // Display the matrix in the lower-right corner
  SKSize matrixSize = matrixDisplay.Measure(bitmap.Matrix);

  matrixDisplay.Paint(canvas, bitmap.Matrix,
                      new SKPoint(info.Width - matrixSize.Width,
                            info.Height - matrixSize.Height));
}

I've been through several posts on StackOverflow as well as in MS forums. I can't figure out a way to make this show consistently on different size devices.

Does anyone have a suggestion on how I can keep this smaller bitmap in the same location on the background/SKCanvas regardless of device size?

I appreciate any feedback.

Answer 1

The coordinate of the bitmap is not supposed to be hard-coded, you need to adjust the value (x/y) according to the background canvas's size.

Something like this

 var transX = info.Width - 20;
 var transY = info.Height - 20;