diff --git a/docs/maui/views/DrawingView.md b/docs/maui/views/DrawingView.md index 0d033b428..27fe99295 100644 --- a/docs/maui/views/DrawingView.md +++ b/docs/maui/views/DrawingView.md @@ -52,7 +52,7 @@ By default `DrawingView` supports only 1 line. To enable `MultiLine` set `IsMult ### XAML -```xml +```xaml [!NOTE] +> By default the `GetImageStream` method will return an image that contains the lines drawn, this will not match the full surface that user sees. In order to generate an image that directly matches the surface displayed in the application the `GetImageStream` method with the `DrawingViewOutputOption` parameter must be used. + +The following example shows how to generate an image that directly matches the DrawingView surface displayed in an application: + +```csharp +await drawingView.GetImageStream(desiredWidth: 400, desiredHeight: 300, imageOutputOption: DrawingViewOutputOption.FullCanvas); +``` + +### Saving from the `DrawingViewService` + +Using the `DrawingView` methods can make it difficult to build an application using the MVVM pattern, to help deal with this the .NET MAUI Community Toolkit also provides the `DrawingViewService` class that will also allow the ability to generate an image stream. + +#### `ImageLineOptions.JustLines` + +The following example shows how to generate an image stream of a desired width of 1920 and height of 1080 and a blue background. Developers can use the `ImageLineOptions.JustLines` method to provide suitable options to only export the lines drawn. To export the entire canvas see [`ImageLineOptions.FullCanvas`](./DrawingView.md#imagelineoptionsfullcanvas) + +```csharp +await using var stream = await DrawingViewService.GetImageStream( + ImageLineOptions.JustLines(Lines, new Size(1920, 1080), Brush.Blue)); +``` + +#### `ImageLineOptions.FullCanvas` + +In order to generate an image that directly matches the DrawingView surface the `ImageLineOptions.FullCanvas` method can be used as follows. + +```csharp +await using var stream = await DrawingViewService.GetImageStream( + ImageLineOptions.FullCanvas(Lines, new Size(1920, 1080), Brush.Blue, new Size(CanvasWidth, CanvasHeight))); +``` + +For the purpose of this example the `CanvasWidth` and `CanvasHeight` properties have been data bound to the `Width` and `Height` properties of the `DrawingView` respectively. For the full solution please refer to the [.NET MAUI Community Toolkit Sample Application](https://github.com/CommunityToolkit/Maui/blob/main/samples/CommunityToolkit.Maui.Sample/Pages/Views/DrawingViewPage.xaml). + ## Handle event when Drawing Line Completed `DrawingView` allows to subscribe to the events like `OnDrawingLineCompleted`. The corresponding command `DrawingLineCompletedCommand` is also available. ### XAML -```xml + +```xaml