Search code examples
c#ios.netxamlmaui

How to set background Image to GraphicsView Canvas in .NET MAUI


I am developing a feature for both android and ios, where I have to draw on top of a big image.

Right now i am using this code to first draw image using canvas and then draw objects.

 public void Draw(ICanvas canvas, RectF dirtyRect)
 {
     //Draw Image
     try
     {
         canvas.DrawImage(_image, 0, 0, (float)_drawing.ImageWidth, (float)_drawing.ImageHeight);
     }
     catch (Exception)
     {
         _image = GetDrawableImage(20000000);
         canvas.DrawImage(_image, 0, 0, (float)_drawing.ImageWidth,    (float)_drawing.ImageHeight);
     }
   
    //Draw other objects

 }

The issue is the image is being drawn everytime user makes a change, on android devices its fast but on IOS it takes time to redraw image everytime.

Is there a way to only draw image single time or set the image as background to canvas?


Solution

  • As discussed in the comments, we can mash up multiple view elements with Grid, e.g.

    <Grid>
        <Image />
        <GraphicsView />
    </Grid>
    

    This takes into advantage that elements in the same Grid row/column will be drawn together, in this case, all the elements above are implicitly Grid.Row="0" and Grid.Column="0".