Xamarin在Skiasharp帆布上形成位图坐标

Question

我有一个简单的Xamarin表单页面，其中包含Skiasharp画布。我允许用户加载一个平面图作为画布的背景，并且可以添加较小的位图以在需要的地方拖动帆布。

我正在Microsoft页面上遵循此指南，以进行触摸操作。 https：https：//学习。 microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/transforms/touch

如果我在单个设备大小上使用它，一切都可以很好地工作。当我以不同的设备尺寸启动时，分辨率和画布大小不同，并且导致较小的位图不一致。

这是我看到的结果。左侧是iPhone 13 Pro Max，右边是iPhone 13 Pro。如您所见，当我在不同尺寸的设备上查看它时，结果已经关闭。

这是包含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>

这是PaintSurface处理程序：

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));
}

我在Stackoverflow以及MS论坛上都曾经浏览过几篇文章。我不知道在不同尺寸设备上始终如一地使该节目始终如一的方法。

是否有人建议如何将这个较小的位图保持在背景/SKCanvas的同一位置，而不管设备尺寸如何？

感谢任何反馈。

Answer 1

位图的坐标不应该是硬编码，您需要根据背景画布的大小来调整值（x/y）。

这样的东西

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