dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.01k stars 1.72k forks source link

[iOS] Canvas.DrawImage and Canvas.Rotate cut Image #19410

Open ptittof57 opened 9 months ago

ptittof57 commented 9 months ago

Description

The following code have a strange behavior when rotation value is animated on iOS device only. Image seems to move inside a rectangle of image initial width and height and it's cut and not rendered like expected. On iOS and Net-7.0, image get out of red border only for the reproduction project. But in my personal project this is the same behavior, canvas.DrawImage + canvas.Rotation cut image for both Net-7.0 and Net-8.0. Everything works like expected in Android physical device and simulator. Check print screens to see the results. I added a testing project with rotation bind into a value that change every 200ms to a better view.

public class ImageDrawable : IDrawable
 {
     private IImage _image;

     public void Draw(ICanvas canvas, RectF dirtyRect)
     {
         if (this._image == null)
         {
             Assembly assembly = this.GetType().GetTypeInfo().Assembly;
             using (Stream stream = assembly.GetManifestResourceStream("ImageRotate.Resources.Images.dotnet_bot.png"))
             {
                 this._image = PlatformImage.FromStream(stream);
             }
         }

         canvas.DrawImage(this._image, 0, 0, this._image.Width, this._image.Height);
     }
 }
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:drawables="clr-namespace:ImageRotate.Drawable"
             x:Class="ImageRotate.MainPage">
    <ContentPage.Resources>
        <drawables:ImageDrawable x:Key="imageDrawable" />
    </ContentPage.Resources>

    <ScrollView>
        <VerticalStackLayout>
            <Grid Margin="10,50">
                <Grid.RowDefinitions>
                    <RowDefinition Height="500" />
                </Grid.RowDefinitions>
                <Border Stroke="Red"
                        StrokeThickness="1">
                    <GraphicsView Drawable="{StaticResource imageDrawable}"
                              Rotation="{Binding Value}" />
                </Border>
            </Grid>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace ImageRotate
{
    public partial class MainPage : ContentPage, INotifyPropertyChanged
    {
        double value = 0;
        public event PropertyChangedEventHandler PropertyChanged;

        public MainPage()
        {
            this.InitializeComponent();
            this.BindingContext = this;

            Task.Run(this.Test);
        }

        public double Value
        {
            get { return this.value; }
            set
            {
                this.value = value;
                this.OnPropertyChanged();
            }
        }

        protected void OnPropertyChanged([CallerMemberName] string name = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }

        private async Task Test()
        {
            while (true)
            {
                if (this.value >= 360)
                {
                    this.Value = 0;
                }

                this.Value++;

                await Task.Delay(200);
            }
        }
    }
}

Android is OK

1

iOS Simulator Net-7.0 (out of red border)

4

iOS Physical device image is cut Net-8.0

3

Steps to Reproduce

Run the reproduction project on iOS 17 device or simulator

Link to public reproduction project repository

https://github.com/ptittof57/MAUI-ImageRotate

Version with bug

8.0.3

Is this a regression from previous behavior?

Seems it was better with Net-7.0 but it was running out of red border.

Last version that worked well

Net-7.0 image was not cut

Affected platforms

iOS

Affected platform versions

iOS 17, Net 7 and Net 8

Did you find any workaround?

I used Image.Rotation on iOS and this worked and both iOS and Android

Relevant log output

No response

ghost commented 9 months ago

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 commented 8 months ago

Verified this on Visual Studio Enterprise 17.9.0 Preview 2(8.0.3). Repro on iOS 17.0, not repro on Android 14.0-API34 with below Project: ImageRotate.zip