[Android] GraphicsView， The drawn image can also be visible outside the canvas

[sswi]

Description

The drawn image can also be visible outside the canvas

https://github.com/dotnet/maui/assets/39110708/62397ab7-9566-4a96-8c9f-c079de7587b6

https://github.com/dotnet/maui/assets/39110708/f257f907-864c-4835-9f69-9ef7641695c3

Steps to Reproduce

Page.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="Happy.MainPage"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             BackgroundColor="White">

    <Grid>
        <Grid BackgroundColor="#1a2033"
              HeightRequest="300"
              VerticalOptions="Center">
            <GraphicsView x:Name="graphicsView" />
        </Grid>
    </Grid>
</ContentPage>

Page.cs

 public partial class MainPage : ContentPage
 {
     private readonly PDrawable drawable = new();
     public MainPage()
     {
         InitializeComponent();
         graphicsView.Drawable = drawable;
         graphicsView.StartInteraction += GraphicsView_StartInteraction;
         graphicsView.DragInteraction += GraphicsView_DragInteraction;            
     }

     private float oldX, oldY;
     private void GraphicsView_DragInteraction(object? sender, TouchEventArgs e)
     {

         var x = e.Touches[0].X;
         var y = e.Touches[0].Y;
         x -= oldX;
         y -= oldY;
         drawable.X += x;
         drawable.Y += y;
         oldX = e.Touches[0].X;
         oldY = e.Touches[0].Y;
         graphicsView.Invalidate();
     }

     private void GraphicsView_StartInteraction(object? sender, TouchEventArgs e)
     {
         oldX = e.Touches[0].X;
         oldY = e.Touches[0].Y;        
     }

 }

PDrawable.cs

    internal class PDrawable : IDrawable
    {
        public float X { get; set; } = 20f;
        public float Y { get; set; } = 20f;

        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            canvas.SaveState();
            canvas.FillColor = Colors.Coral;
            canvas.FillEllipse(X, Y, 100, 100);

            canvas.ResetState();
        }       
    }

Link to public reproduction project repository

No response

Version with bug

8.0.7 SR2

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android8.0~14.0

Did you find any workaround?

#if ANDROID
            graphicsView.PropertyChanged += (s, e) =>
            {
                if (e.PropertyName == nameof(Width) || e.PropertyName == nameof(Height))
                {
                    if (s is GraphicsView gView)
                    {
                        if (gView.Width > 0 && gView.Height > 0)
                        {
                            gView.Clip = new RectangleGeometry(new Rect()
                            {
                                X = 0,
                                Y = 0,
                                Width = gView.Width,
                                Height = gView.Height
                            });
                        }
                    }
                }
            };
#end

Relevant log output

No response

[jsuarezruiz]

As a workaround you can use the Clip method to clip the Canvas content to the limits.

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[XamlTest]

Verified this on VS 17.10.0 Preview 2.0(8.0.14). Repro on Android 14.0-API34, not repro on Windows 11, iOS 17.2 and MacCatalyst with below Project: 20834.zip