Can I scale the size of a canvas？

[chinadyz]

When I zoomed a GraphicsView, I found that the Canvas in the Drawable contained in it also changed in size. But strangely, the Canvas is simply stretched, so the resulting graphics are blurry. After my test, this phenomenon is because the Canvas is simply stretched, and the pixel size in it does not change. This way, the 1px line I draw in the Canvas will be stretched to 3px .
Excuse me, is there any way I can individually scale the canvas size so that it can still draw clearly after the GraphicsView is scaled?

The GraphicsView scaling code is as follows:

<GraphicsView Drawable="Drawable1"
                              StartInteraction="OnStartInteraction"
                              DragInteraction="OnDragInteraction"
                              EndInteraction="OnEndInteraction"
                              CancelInteraction="OnCancelInteraction"
                              Scale="3">
                </GraphicsView>

The Canvas drawing code is as follows:

void DrawSelectRectangle(ICanvas canvas, RectF dirtyRect)
   {
       float RecWidth_Pixel = 300;
       float RecHeight_Pixel =300;

       canvas.ResetState();

       canvas.FillColor = Color.FromRgba(0, 0, 255, 0.1);      
       canvas.FillRectangle((float)StartTouchX_Pixel,
                            (float)StartTouchY_Pixel,
                            RecWidth_Pixel,
                            RecHeight_Pixel);

       canvas.StrokeColor = Color.FromRgb(0, 0, 255);
       canvas.StrokeSize = 1.0f;        
    
       canvas.DrawRectangle((float)StartTouchX_Pixel,
                           (float)StartTouchY_Pixel,
                           RecWidth_Pixel,
                           RecHeight_Pixel);
      
   }

The box drawn before the GraphicsView is zoomed is very clear.

The box drawn after the GraphicsView is zoomed, blurred.

After my testing, the following code does not work.

Size DirtyRectSize_Original = dirtyRect.Size;

        dirtyRect.Size =new Size( (float)(DirtyRectSize_Original.Width*3),
                                  (float)(DirtyRectSize_Original.Height *3));

        dirtyRect.Left = 0;
        dirtyRect.Top = 0;
        dirtyRect.Right = (float)DirtyRectSize_Original.Width;
        dirtyRect.Bottom = (float)DirtyRectSize_Original.Height;

Thanks!

[chinadyz]

It have already been solved. Only need removed GraphicsView's Transparent.

[mplessis]

Hello,

i have the same problems, but how have you remove graphicsview's transparancy ? When if a set a backgroundcolor, the color doesn't appear

Thanks

[chinadyz]

PreviousCode

<GraphicsView x:Name="CanvasLayer_WinDoor" 
                          Drawable="aa"
                          Scale="3"
                          Opacity="0.2"/>

canvas.StrokeSize = 1f;

CurrentCode

<GraphicsView x:Name="CanvasLayer_WinDoor" 
                          Scale="3"
                          Drawable="aa">

canvas.StrokeSize = 1/3;

[chinadyz]

PreviousCode

<GraphicsView x:Name="CanvasLayer_WinDoor" 
                          Drawable="aa"
                          Scale="3"
                          Opacity="0.2"/>

canvas.StrokeSize = 1f;

CurrentCode

<GraphicsView x:Name="CanvasLayer_WinDoor" 
                          Scale="3"
                          Drawable="aa">

canvas.StrokeSize = 1/3;

[mplessis]

thank you for this answer, i will try it

[mplessis]

Good morning,

sorry to come back to this, but I still can't make a clean scale. Even if I don't set the opacity on my GraphicsView and change the size of my stroke, the rendering is blurred after the scale. either on the rectangle or on the text.

Do you have the same problem on text ?

Before scaling :

After scaling x6 :

My code :

public class MyFirstDrawing : IDrawable
{
    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        float squareSize = 100;

        canvas.ResetState();

        canvas.StrokeColor = Color.FromRgb(0, 0, 255);
        canvas.StrokeSize = (float)1 / 6;

        canvas.DrawRectangle(0,
            20,
            squareSize,
            squareSize);

        canvas.DrawString("Text", 20, 50, HorizontalAlignment.Left);
    }
}

<ContentPage.Resources>
        <drawable:MyFirstDrawing x:Key="MyDrawable" />
</ContentPage.Resources>

<Grid RowSpacing="20"
      RowDefinitions="Auto,*"
      Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">

    <Button Clicked="onScale" Grid.Row="0" Text="Scale" WidthRequest="80" />

    <GraphicsView
        x:Name="canvasDraw"
        HorizontalOptions="Fill"
        Drawable="{StaticResource MyDrawable}"
        HeightRequest="200"
        WidthRequest="200"
        Grid.Row="1">
    </GraphicsView>
</Grid>

Thanks

[chinadyz]

In actual, I didnot find better way to resolve this problem. I found if I scaled a GraphicsView, the Icanvas actual size doesnot changed, 1px always 1px, and 1px display as 2px, so it was blurred.
I have 2 methods to replace Graphicsview, one is SkiImage, it can draw in memory and then show in Image Control, and two is Ski.Svg.
I think canvas' displayScale is the best way to resove this problem,but it doesnt work.
Maybe it have a solution, but we don't know！

[mplessis]

Ok thanks you for your answer. I worked a lot with WPF and I am afraid that MAUI is not yet up to date with the drawings

[stevebrooke3000]

I am having the same issues only using DrawImage. From what I observe, the problem is that the scale is applied after the graphics view has been drawn. So fuzziness will naturally occur. Two work arounds that I am trying are:

1. have the drawable be zoom factor aware and simply draw the items at the zoomed size. I haven't tried this yet. The drawable will also need to be panning aware.

2. work with inverse zooms. If I normally want to zoom from 1 to a max of 4, instead I use 0.25 to 1. This way for max zoom, I draw at the best resolution and allow the 0.25 scale factor in resize down the images. This happens anyway when the zoom factor is 1 but I set the image size smaller in DrawImage. So the Graphics View needs to be 4 times larger, so I see my full image at 0.25 zoom.

number 2) should be a better solution, but I have not been able to pull it all together yet.