Fix DrawingView ImageSize

samples/CommunityToolkit.Maui.Sample/Pages/Views/DrawingViewPage.xaml

@@ -10,7 +10,7 @@
                 Title="DrawingView">
 
     <ScrollView>
-        <Grid RowDefinitions="40,40,40,40,40,40,40,40,200,200,100" ColumnDefinitions="*,*">
+        <Grid RowDefinitions="40,40,40,40,40,40,40,40,40,200,200,100" ColumnDefinitions="*,*" RowSpacing="12" >
             <Label Grid.Row="0" Grid.Column="0" Text="Clear on Finish" Margin="0,0,5,0" HorizontalOptions="End" HorizontalTextAlignment="End"/>
             <Switch Grid.Row="0" Grid.Column="1" x:Name="ClearOnFinish" HorizontalOptions="Start" />
             <Label Grid.Row="1" Grid.Column="0" Text="Multi-Line Mode" Margin="0,0,5,0" HorizontalOptions="End" HorizontalTextAlignment="End"/>
@@ -51,13 +51,21 @@
                 Clicked="GenerateImageButtonClicked"
                 Text="Generate Image with Random Lines"
                 TextColor="Black" />
+
+            <Button
+                Grid.Row="7" Grid.Column="0"
+                Grid.ColumnSpan="2"
+                BackgroundColor="White"
+                Command="{Binding SaveCommand}"
+                Text="Save image"
+                TextColor="Black" />
 
             <Label Text="DrawingView"
-                   Grid.Row="7" Grid.Column="0"
+                   Grid.Row="8" Grid.Column="0"
                    Grid.ColumnSpan="2"/>
             <mct:DrawingView x:Name="DrawingViewControl"
                              Margin="0,0,0,10"
-                             Grid.Row="8" Grid.Column="0"
+                             Grid.Row="9" Grid.Column="0"
                              Grid.ColumnSpan="2"
                              LineColor="Green"
                              LineWidth="5"
@@ -78,12 +86,12 @@
             </mct:DrawingView>
 
             <Image
-                Grid.Row="9" Grid.Column="0"
+                Grid.Row="10" Grid.Column="0"
                 Grid.ColumnSpan="2"
                 x:Name="GestureImage"
                 Margin="0,0,0,10"/>
 
-            <Label Grid.Row="10" Grid.Column="0"
+            <Label Grid.Row="11" Grid.Column="0"
                     Grid.ColumnSpan="2"
                     BackgroundColor="Gray"
                     TextColor="Black"

samples/CommunityToolkit.Maui.Sample/ViewModels/Views/DrawingViewViewModel.cs

@@ -1,19 +1,26 @@
 using System.Collections.ObjectModel;
 using System.Windows.Input;
+using CommunityToolkit.Maui.Alerts;
 using CommunityToolkit.Maui.Core;
 using CommunityToolkit.Maui.Core.Views;
+using CommunityToolkit.Maui.Storage;
 using CommunityToolkit.Maui.Views;
 using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 
 namespace CommunityToolkit.Maui.Sample.ViewModels.Views;
 
 public partial class DrawingViewViewModel : BaseViewModel
 {
+	readonly IFileSaver fileSaver;
+
 	[ObservableProperty]
 	string logs = string.Empty;
 
-	public DrawingViewViewModel()
+	public DrawingViewViewModel(IFileSaver fileSaver)
 	{
+		this.fileSaver = fileSaver;
+
 		DrawingLineCompletedCommand = new Command<IDrawingLine>(line => Logs = "GestureCompletedCommand executed." + Environment.NewLine + $"Line points count: {line.Points.Count}" + Environment.NewLine + Environment.NewLine + Logs);
 
 		ClearLinesCommand = new Command(Lines.Clear);
@@ -53,4 +60,26 @@ public static IEnumerable<PointF> GeneratePoints(int count, double viewWidth, do
 			yield return new PointF(Random.Shared.Next(1, maxWidthInt), Random.Shared.Next(1, maxHeightInt));
 		}
 	}
+
+	[RelayCommand]
+	public async Task Save(CancellationToken cancellationToken)
+	{
+		try
+		{
+			await using var stream = await DrawingView.GetImageStream(Lines, new Size(1920, 1080), Brush.Blue);
+
+			await Permissions.RequestAsync<Permissions.StorageRead>().WaitAsync(cancellationToken);
+			await Permissions.RequestAsync<Permissions.StorageWrite>().WaitAsync(cancellationToken);
+
+			await fileSaver.SaveAsync("drawing.png", stream, cancellationToken);
+		}
+		catch (PermissionException e)
+		{
+			await Toast.Make($"Save Failed: {e.Message}").Show(cancellationToken);
+		}
+		catch (InvalidOperationException)
+		{
+			await Toast.Make("Save Failed: No Lines Drawn").Show(cancellationToken);
+		}
+	}
 }

src/CommunityToolkit.Maui.Core/Interfaces/IDrawingView.shared.cs

@@ -43,8 +43,8 @@ public interface IDrawingView : IView
 	/// <summary>
 	/// Retrieves a <see cref="Stream"/> containing an image of the <see cref="Lines"/> that are currently drawn on the <see cref="IDrawingView"/>.
 	/// </summary>
-	/// <param name="imageSizeWidth">Desired width of the image that is returned.</param>
-	/// <param name="imageSizeHeight">Desired height of the image that is returned.</param>
+	/// <param name="imageSizeWidth">Desired width of the image that is returned. The image will be resized proportionally.</param>
+	/// <param name="imageSizeHeight">Desired height of the image that is returned. The image will be resized proportionally.</param>
 	/// <returns><see cref="Task{Stream}"/> containing the data of the requested image with data that's currently on the <see cref="IDrawingView"/>.</returns>
 	ValueTask<Stream> GetImageStream(double imageSizeWidth, double imageSizeHeight);
 

src/CommunityToolkit.Maui.Core/Views/DrawingView/Service/DrawingViewService.android.cs

@@ -17,7 +17,7 @@ public static class DrawingViewService
 	/// Get image stream from lines
 	/// </summary>
 	/// <param name="lines">Drawing lines</param>
-	/// <param name="imageSize">Image size</param>
+	/// <param name="imageSize">Maximum image size. The image will be resized proportionally.</param>
 	/// <param name="background">Image background</param>
 	/// <returns>Image stream</returns>
 	public static ValueTask<Stream> GetImageStream(in IList<IDrawingLine> lines,
@@ -33,7 +33,7 @@ public static ValueTask<Stream> GetImageStream(in IList<IDrawingLine> lines,
 	/// Get image stream from points
 	/// </summary>
 	/// <param name="points">Drawing points</param>
-	/// <param name="imageSize">Image size</param>
+	/// <param name="imageSize">Maximum image size. The image will be resized proportionally.</param>
 	/// <param name="lineWidth">Line Width</param>
 	/// <param name="strokeColor">Line color</param>
 	/// <param name="background">Image background</param>
@@ -168,14 +168,10 @@ static void DrawStrokes(Canvas canvas, ICollection<PointF> points, float lineWid
 	static Bitmap GetMaximumBitmap(in Bitmap sourceImage, in float maxWidth, in float maxHeight)
 	{
 		var sourceSize = new Size(sourceImage.Width, sourceImage.Height);
-		var maxResizeFactor = Math.Max(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height);
-		if (maxResizeFactor > 1)
-		{
-			return sourceImage;
-		}
-
-		var width = maxResizeFactor * sourceSize.Width;
-		var height = maxResizeFactor * sourceSize.Height;
+		var maxResizeFactor = Math.Min(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height);
+
+		var width = Math.Max(maxResizeFactor * sourceSize.Width, 1);
+		var height = Math.Max(maxResizeFactor * sourceSize.Height, 1);
 		return Bitmap.CreateScaledBitmap(sourceImage, (int)width, (int)height, false)
 				?? throw new InvalidOperationException("Failed to create Bitmap");
 	}

src/CommunityToolkit.Maui.Core/Views/DrawingView/Service/DrawingViewService.macios.cs

@@ -13,7 +13,7 @@ public static class DrawingViewService
 	/// Get image stream from lines
 	/// </summary>
 	/// <param name="lines">Drawing lines</param>
-	/// <param name="imageSize">Image size</param>
+	/// <param name="imageSize">Maximum image size. The image will be resized proportionally.</param>
 	/// <param name="background">Image background</param>
 	/// <returns>Image stream</returns>
 	public static ValueTask<Stream> GetImageStream(in IList<IDrawingLine> lines, in Size imageSize, in Paint? background)
@@ -120,14 +120,10 @@ static void DrawStrokes(CGContext context, IList<PointF> points, NFloat lineWidt
 	static UIImage GetMaximumUIImage(UIImage sourceImage, double maxWidth, double maxHeight)
 	{
 		var sourceSize = sourceImage.Size;
-		var maxResizeFactor = Math.Max(maxWidth / sourceSize.Width.Value, maxHeight / sourceSize.Height.Value);
-		if (maxResizeFactor > 1)
-		{
-			return sourceImage;
-		}
-
-		var width = maxResizeFactor * sourceSize.Width.Value;
-		var height = maxResizeFactor * sourceSize.Height.Value;
+		var maxResizeFactor = Math.Min(maxWidth / sourceSize.Width.Value, maxHeight / sourceSize.Height.Value);
+
+		var width = Math.Max(maxResizeFactor * sourceSize.Width.Value, 1);
+		var height = Math.Max(maxResizeFactor * sourceSize.Height.Value, 1);
 
 		UIGraphics.BeginImageContext(new CGSize(width, height));
 		sourceImage.Draw(new CGRect(0, 0, width, height));

src/CommunityToolkit.Maui.Core/Views/DrawingView/Service/DrawingViewService.net.cs

@@ -9,7 +9,7 @@ public static class DrawingViewService
 	/// Get image stream from points
 	/// </summary>
 	/// <param name="points">Drawing points</param>
-	/// <param name="imageSize">Image size</param>
+	/// <param name="imageSize">Maximum image size. The image will be resized proportionally.</param>
 	/// <param name="lineWidth">Line Width</param>
 	/// <param name="strokeColor">Line color</param>
 	/// <param name="background">Image background</param>
@@ -21,7 +21,7 @@ public static ValueTask<Stream> GetImageStream(IList<PointF> points, Size imageS
 	/// Get image stream from lines
 	/// </summary>
 	/// <param name="lines">Drawing lines</param>
-	/// <param name="imageSize">Image size</param>
+	/// <param name="imageSize">Maximum image size. The image will be resized proportionally.</param>
 	/// <param name="background">Image background</param>
 	/// <returns>Image stream</returns>
 	public static ValueTask<Stream> GetImageStream(IList<IDrawingLine> lines, Size imageSize, Paint? background)

src/CommunityToolkit.Maui.Core/Views/DrawingView/Service/DrawingViewService.tizen.cs

@@ -12,7 +12,7 @@ public static class DrawingViewService
 	/// Get image stream from points
 	/// </summary>
 	/// <param name="points">Drawing points</param>
-	/// <param name="imageSize">Image size</param>
+	/// <param name="imageSize">Maximum image size. The image will be resized proportionally.</param>
 	/// <param name="lineWidth">Line Width</param>
 	/// <param name="strokeColor">Line color</param>
 	/// <param name="background">Image background</param>
@@ -44,7 +44,7 @@ public static ValueTask<Stream> GetImageStream(IList<PointF> points, Size imageS
 	/// Get image stream from lines
 	/// </summary>
 	/// <param name="lines">Drawing lines</param>
-	/// <param name="imageSize">Image size</param>
+	/// <param name="imageSize">Maximum image size. The image will be resized proportionally.</param>
 	/// <param name="background">Image background</param>
 	/// <returns>Image stream</returns>
 	public static ValueTask<Stream> GetImageStream(IList<IDrawingLine> lines, Size imageSize, Paint? background)

src/CommunityToolkit.Maui.Core/Views/DrawingView/Service/DrawingViewService.windows.cs

@@ -19,7 +19,7 @@ public static class DrawingViewService
 	///     Get image stream from lines
 	/// </summary>
 	/// <param name="lines">Drawing lines</param>
-	/// <param name="imageSize">Image size</param>
+	/// <param name="imageSize">Maximum image size. The image will be resized proportionally.</param>
 	/// <param name="background">Image background</param>
 	/// <returns>Image stream</returns>
 	public static ValueTask<Stream> GetImageStream(IList<IDrawingLine> lines, Size imageSize, Paint? background)
@@ -32,7 +32,7 @@ public static ValueTask<Stream> GetImageStream(IList<IDrawingLine> lines, Size i
 	///     Get image stream from points
 	/// </summary>
 	/// <param name="points">Drawing points</param>
-	/// <param name="imageSize">Image size</param>
+	/// <param name="imageSize">Maximum image size. The image will be resized proportionally.</param>
 	/// <param name="lineWidth">Line Width</param>
 	/// <param name="strokeColor">Line color</param>
 	/// <param name="background">Image background</param>

src/CommunityToolkit.Maui/Views/DrawingView/DrawingView.shared.cs

@@ -146,7 +146,7 @@ public Action<ICanvas, RectF>? DrawAction
 	/// Retrieves a <see cref="Stream"/> containing an image of the collection of <see cref="IDrawingLine"/> that is provided as a parameter.
 	/// </summary>
 	/// <param name="lines">A collection of <see cref="IDrawingLine"/> that a image is generated from.</param>
-	/// <param name="imageSize">The desired dimensions of the generated image.</param>
+	/// <param name="imageSize">The desired dimensions of the generated image. The image will be resized proportionally.</param>
 	/// <param name="background">Background of the generated image. If color is null, default background color is used.</param>
 	/// <returns><see cref="ValueTask{Stream}"/> containing the data of the requested image with data that's provided through the <paramref name="lines"/> parameter.</returns>
 	public static ValueTask<Stream> GetImageStream(IEnumerable<IDrawingLine> lines,
@@ -157,8 +157,8 @@ public static ValueTask<Stream> GetImageStream(IEnumerable<IDrawingLine> lines,
 	/// <summary>
 	/// Retrieves a <see cref="Stream"/> containing an image of the <see cref="Lines"/> that are currently drawn on the <see cref="DrawingView"/>.
 	/// </summary>
-	/// <param name="imageSizeWidth">Desired width of the image that is returned.</param>
-	/// <param name="imageSizeHeight">Desired height of the image that is returned.</param>
+	/// <param name="imageSizeWidth">Desired width of the image that is returned. The image will be resized proportionally.</param>
+	/// <param name="imageSizeHeight">Desired height of the image that is returned. The image will be resized proportionally.</param>
 	/// <returns><see cref="ValueTask{Stream}"/> containing the data of the requested image with data that's currently on the <see cref="DrawingView"/>.</returns>
 	public ValueTask<Stream> GetImageStream(double imageSizeWidth, double imageSizeHeight) => DrawingViewService.GetImageStream(Lines.ToList(), new Size(imageSizeWidth, imageSizeHeight), Background);