SKCanvasView size property contradiction

YasarYucelYesilbag

Hello,

I have a Xamarin.Forms v2.3.3.180 PCL XAML multi-project/platform solution on visual studio 2015/win10, which utilizes SkiaSharp v1.56.1. It seems like there is a contradiction about size info of the SKCanvasView, as I will try to describe below.

XAML structure is ContentPage \ ScrollView \ Grid \ SKCanvasView:
<views:SKCanvasView Grid.Row="8" Grid.Column="0" Grid.ColumnSpan="3" x:Name="canvasview" PaintSurface="OnPaintSchematic" HeightRequest="100" VerticalOptions="Start" HorizontalOptions="Fill" />

I have below code in OnPaintSchematic event handler (e is of type SKPaintSurfaceEventArgs):
canvas.DrawText("Info.ColorType=" + e.Info.ColorType.ToString(), 10, e.Info.Height - 70, paint); canvas.DrawText("Info.WidthxHeight=" + e.Info.Width.ToString() + "x" + e.Info.Height.ToString(), 10, e.Info.Height - 40, paint); canvas.DrawText("SKCanvasView.WidthxHeight=" + canvasview.Width.ToString() + "x" + canvasview.Height.ToString(), 10, e.Info.Height - 10, paint);

This code generates below output:

On UWP (win10 64-bit):
Info.ColorType=Bgra8888
Info.WidthxHeight=1260x100
SKCanvasView.WidthxHeight=1260x100

On Android hardware (HTC One, API 21):
Info.ColorType=Rgba8888
Info.WidthxHeight=1020x300
SKCanvasView.WidthxHeight=340x100

On Android emulator (Galaxy Nexus, API 19):
Info.ColorType=Rgba8888
Info.WidthxHeight=440x200
SKCanvasView.WidthxHeight=220x100

It seems like, on different platforms, two property sets give different sizes. Setting SKCanvasView's HeightRequest at code, rather than or together with setting XAML property, doesn't make any difference. By visual inspection, I can say Info.WidthxHeight is the right one. But I cannot understand the mechanics behind SKCanvasView.WidthxHeight values, which is same or half or one-third of Info.WidthxHeight. Main problem is I cannot set SKCanvasView's real-drawn height (e.Info.Height) by setting HeightRequest property. Any explanation and correction is appreciated.

Thanks,

mattleibow

Ah, this is because although the canvas is say 340x100 (SKCanvasView.WidthxHeight) in device independent units, the actual pixel size is 1020x300 (`Info.WidthxHeight).

If you really want to set the specific height, and ignore device scaling, then you can make use of the IgnorePixelScaling property. The sizes will match, but the image may be blurry on high resolution devices.

If you wish to draw at canvas sizes, but not have blurring, then just scale the canvas up first:

var scale = Info.Width / SKCanvasView.Width;

canvas.Scale(scale);

This will first scale up, and all draw operations will automatically be scaled.

mattleibow

Ah, this is because although the canvas is say 340x100 (SKCanvasView.WidthxHeight) in device independent units, the actual pixel size is 1020x300 (`Info.WidthxHeight).

If you really want to set the specific height, and ignore device scaling, then you can make use of the IgnorePixelScaling property. The sizes will match, but the image may be blurry on high resolution devices.

If you wish to draw at canvas sizes, but not have blurring, then just scale the canvas up first:

var scale = Info.Width / SKCanvasView.Width;

canvas.Scale(scale);

This will first scale up, and all draw operations will automatically be scaled.

YasarYucelYesilbag

OK. So I ended up with below solution since it's simple and adequate for my case.

private void OnPaintSchematic(object sender, SKPaintSurfaceEventArgs e) { // desired height of canvas is 100 pixels, convert it to device independent units double dCanvasHeight = 100.0 * canvasview.Height / e.Info.Height; canvasview.HeightRequest = dCanvasHeight; ... }

Thank you

osamaelhusssiny

@mattleibow any help please same problem
https://forums.xamarin.com/discussion/180615/position-a-circle-skrect-in-the-middle-of-the-screen/p1?new=1