diff --git a/docs/docs/basics/animation.md b/docs/docs/basics/animation.md index e03bd43686..cf4208d72e 100644 --- a/docs/docs/basics/animation.md +++ b/docs/docs/basics/animation.md @@ -1,29 +1,29 @@ --- title: "Basic Animation in SkiaSharp" -description: "This article explains how to animate your SkiaSharp graphics in Xamarin.Forms applications, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +description: "This article explains how to animate your SkiaSharp graphics in .NET MAUI applications, and demonstrates this with sample code." +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 31C96FD6-07E4-4473-A551-24753A5118C3 author: davidbritch ms.author: dabritch ms.date: 03/10/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Basic Animation in SkiaSharp _Discover how to animate your SkiaSharp graphics_ -You can animate SkiaSharp graphics in Xamarin.Forms by causing the `PaintSurface` method to be called periodically, each time drawing the graphics a little differently. Here's an animation shown later in this article with concentric circles that seemingly expand from the center: +You can animate SkiaSharp graphics in .NET MAUI by causing the `PaintSurface` method to be called periodically, each time drawing the graphics a little differently. Here's an animation shown later in this article with concentric circles that seemingly expand from the center: ![Several concentric circles seemingly expanding from the center](animation-images/animationexample.png) -The **Pulsating Ellipse** page in the sample program animates the two axes of an ellipse so that it appears to be pulsating, and you can even control the rate of this pulsation. The [**PulsatingEllipsePage.xaml**](https://github.com/xamarin/xamarin-forms-samples/blob/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Basics/PulsatingEllipsePage.xaml) file instantiates a Xamarin.Forms `Slider` and a `Label` to display the current value of the slider. This is a common way to integrate an `SKCanvasView` with other Xamarin.Forms views: +The **Pulsating Ellipse** page in the sample program animates the two axes of an ellipse so that it appears to be pulsating, and you can even control the rate of this pulsation. The [**PulsatingEllipsePage.xaml**](https://github.com/xamarin/xamarin-forms-samples/blob/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Basics/PulsatingEllipsePage.xaml) file instantiates a .NET MAUI `Slider` and a `Label` to display the current value of the slider. This is a common way to integrate an `SKCanvasView` with other .NET MAUI views: ```xaml @@ -171,7 +171,7 @@ public class ExpandingCirclesPage : ContentPage } ``` -This program uses a different approach to animation based on the Xamarin.Forms `Device.StartTimer` method. The `t` field is animated from 0 to 1 every `cycleTime` milliseconds: +This program uses a different approach to animation based on the .NET MAUI `Device.StartTimer` method. The `t` field is animated from 0 to 1 every `cycleTime` milliseconds: ```csharp public class ExpandingCirclesPage : ContentPage diff --git a/docs/docs/basics/bitmaps.md b/docs/docs/basics/bitmaps.md index fc9412b0e4..bf1ef000af 100644 --- a/docs/docs/basics/bitmaps.md +++ b/docs/docs/basics/bitmaps.md @@ -1,13 +1,13 @@ --- title: "Bitmap Basics in SkiaSharp" -description: "This article explains how to load bitmaps in SkiaSharp from various sources and display them in Xamarin.Forms applications, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +description: "This article explains how to load bitmaps in SkiaSharp from various sources and display them in .NET MAUI applications, and demonstrates this with sample code." +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 32C95DFF-9065-42D7-966C-D3DBD16906B3 author: davidbritch ms.author: dabritch ms.date: 07/17/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Bitmap Basics in SkiaSharp @@ -113,7 +113,7 @@ This `Stream` object can be passed directly to the `SKBitmap.Decode` method. ## Loading a Bitmap from the Photo Library -It's also possible for the user to load a photo from the device's picture library. This facility is not provided by Xamarin.Forms itself. The job requires a dependency service, such as the one described in the article [Picking a Photo from the Picture Library](~/xamarin-forms/app-fundamentals/dependency-service/photo-picker.md). +It's also possible for the user to load a photo from the device's picture library. This facility is not provided by .NET MAUI itself. The job requires platform-specific code or a community library. The **IPhotoLibrary.cs** file in the **SkiaSharpFormsDemos** project and the three **PhotoLibrary.cs** files in the platform projects have been adapted from that article. In addition, the Android **MainActivity.cs** file has been modified as described in the article, and the iOS project has been given permission to access the photo library with two lines towards the bottom of the **info.plist** file. diff --git a/docs/docs/basics/circle.md b/docs/docs/basics/circle.md index 18e0ba49f0..dd045011a2 100644 --- a/docs/docs/basics/circle.md +++ b/docs/docs/basics/circle.md @@ -1,20 +1,20 @@ --- title: "Drawing a Simple Circle in SkiaSharp" -description: "This article explains the basics of SkiaSharp drawing, including canvases and paint objects, in Xamarin.Forms applications, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +description: "This article explains the basics of SkiaSharp drawing, including canvases and paint objects, in .NET MAUI applications, and demonstrates this with sample code." +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: E3A4E373-F65D-45C8-8E77-577A804AC3F8 author: davidbritch ms.author: dabritch ms.date: 03/10/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Drawing a Simple Circle in SkiaSharp _Learn the basics of SkiaSharp drawing, including canvases and paint objects_ -This article introduces the concepts of drawing graphics in Xamarin.Forms using SkiaSharp, including creating an `SKCanvasView` object to host the graphics, handling the `PaintSurface` event, and using a `SKPaint` object to specify color and other drawing attributes. +This article introduces the concepts of drawing graphics in .NET MAUI using SkiaSharp, including creating an `SKCanvasView` object to host the graphics, handling the `PaintSurface` event, and using a `SKPaint` object to specify color and other drawing attributes. The sample program contains all the sample code for this series of SkiaSharp articles. The first page is entitled **Simple Circle** and invokes the page class [`SimpleCirclePage`](https://github.com/xamarin/xamarin-forms-samples/blob/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Basics/SimpleCirclePage.cs). This code shows how to draw a circle in the center of the page with a radius of 100 pixels. The outline of the circle is red, and the interior of the circle is blue. @@ -24,10 +24,10 @@ The [`SimpleCircle`](https://github.com/xamarin/xamarin-forms-samples/blob/maste ```csharp using SkiaSharp; -using SkiaSharp.Views.Forms; +using SkiaSharp.Views.Maui.Controls; ``` -The following constructor of the class creates an [`SKCanvasView`](xref:SkiaSharp.Views.Forms.SKCanvasView) object, attaches a handler for the [`PaintSurface`](xref:SkiaSharp.Views.Forms.SKCanvasView.PaintSurface) event, and sets the `SKCanvasView` object as the content of the page: +The following constructor of the class creates an [`SKCanvasView`](xref:SkiaSharp.Views.Maui.Controls.SKCanvasView) object, attaches a handler for the [`PaintSurface`](xref:SkiaSharp.Views.Maui.Controls.SKCanvasView.PaintSurface) event, and sets the `SKCanvasView` object as the content of the page: ```csharp public SimpleCirclePage() @@ -40,7 +40,7 @@ public SimpleCirclePage() } ``` -The `SKCanvasView` occupies the entire content area of the page. You can alternatively combine an `SKCanvasView` with other Xamarin.Forms `View` derivatives, as you'll see in other examples. +The `SKCanvasView` occupies the entire content area of the page. You can alternatively combine an `SKCanvasView` with other .NET MAUI `View` derivatives, as you'll see in other examples. The `PaintSurface` event handler is where you do all your drawing. This method can be called multiple times while your program is running, so it should maintain all the information necessary to recreate the graphics display: @@ -52,10 +52,10 @@ void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args) ``` -The [`SKPaintSurfaceEventArgs`](xref:SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs) object that accompanies the event has two properties: +The [`SKPaintSurfaceEventArgs`](xref:SkiaSharp.Views.Maui.Controls.SKPaintSurfaceEventArgs) object that accompanies the event has two properties: -- [`Info`](xref:SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs.Info) of type [`SKImageInfo`](xref:SkiaSharp.SKImageInfo) -- [`Surface`](xref:SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs.Surface) of type [`SKSurface`](xref:SkiaSharp.SKSurface) +- [`Info`](xref:SkiaSharp.Views.Maui.Controls.SKPaintSurfaceEventArgs.Info) of type [`SKImageInfo`](xref:SkiaSharp.SKImageInfo) +- [`Surface`](xref:SkiaSharp.Views.Maui.Controls.SKPaintSurfaceEventArgs.Surface) of type [`SKSurface`](xref:SkiaSharp.SKSurface) The `SKImageInfo` structure contains information about the drawing surface, most importantly, its width and height in pixels. The `SKSurface` object represents the drawing surface itself. In this program, the drawing surface is a video display, but in other programs an `SKSurface` object can also represent a bitmap that you use SkiaSharp to draw on. @@ -102,7 +102,7 @@ The [`Style`](xref:SkiaSharp.SKPaint.Style) property indicates that you want to The default is `Fill`. Use the third option to stroke the line and fill the interior with the same color. -Set the [`Color`](xref:SkiaSharp.SKPaint.Color) property to a value of type [`SKColor`](xref:SkiaSharp.SKColor). One way to get an `SKColor` value is by converting a Xamarin.Forms `Color` value to an `SKColor` value using the extension method [`ToSKColor`](xref:SkiaSharp.Views.Forms.Extensions.ToSKColor*). The [`Extensions`](xref:SkiaSharp.Views.Forms.Extensions) class in the `SkiaSharp.Views.Forms` namespace includes other methods that convert between Xamarin.Forms values and SkiaSharp values. +Set the [`Color`](xref:SkiaSharp.SKPaint.Color) property to a value of type [`SKColor`](xref:SkiaSharp.SKColor). One way to get an `SKColor` value is by converting a .NET MAUI `Color` value to an `SKColor` value using the extension method [`ToSKColor`](xref:SkiaSharp.Views.Maui.Controls.Extensions.ToSKColor*). The [`Extensions`](xref:SkiaSharp.Views.Maui.Controls.Extensions) class in the `SkiaSharp.Views.Maui.Controls` namespace includes other methods that convert between .NET MAUI values and SkiaSharp values. The [`StrokeWidth`](xref:SkiaSharp.SKPaint.StrokeWidth) property indicates the thickness of the line. Here it's set to 25 pixels. @@ -150,7 +150,7 @@ An `SKPaint` object is little more than a collection of graphics drawing propert Although the width of the circle's outline is specified as 25 pixels — or one-quarter of the radius of the circle — it appears to be thinner, and there's a good reason for that: Half the width of the line is obscured by the blue circle. The arguments to the `DrawCircle` method define the abstract geometric coordinates of a circle. The blue interior is sized to that dimension to the nearest pixel, but the 25-pixel-wide outline straddles the geometric circle — half on the inside and half on the outside. -The next sample in the [Integrating with Xamarin.Forms](~/xamarin-forms/user-interface/graphics/skiasharp/basics/integration.md) article demonstrates this visually. +The next sample in the [Integrating with .NET MAUI](~/xamarin-forms/user-interface/graphics/skiasharp/basics/integration.md) article demonstrates this visually. ## Related Links diff --git a/docs/docs/basics/index.md b/docs/docs/basics/index.md index 6081e69641..c0691eff5a 100644 --- a/docs/docs/basics/index.md +++ b/docs/docs/basics/index.md @@ -1,20 +1,20 @@ --- title: "SkiaSharp Drawing Basics" -description: "This guide explains the basics of SkiaSharp graphics concepts and coordinates in Xamarin.Forms applications." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +description: "This guide explains the basics of SkiaSharp graphics concepts and coordinates in .NET MAUI applications." +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 25141E3E-D22E-44B1-A647-7E6FA0C9737B author: davidbritch ms.author: dabritch ms.date: 03/10/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp Drawing Basics _Learn the basics of SkiaSharp graphics concepts and coordinates_ -After you have added the SkiaSharp NuGet package to your Xamarin.Forms application, you can begin using SkiaSharp graphics. The sample solution includes numerous pages that demonstrate SkiaSharp programming techniques in progressively more advanced lessons. +After you have added the SkiaSharp NuGet package to your .NET MAUI application, you can begin using SkiaSharp graphics. The sample solution includes numerous pages that demonstrate SkiaSharp programming techniques in progressively more advanced lessons. All the sample programs in this section appear under the heading **SkiaSharp Drawing Basics** in the home page of the sample program, and in the [**Basics**](https://github.com/xamarin/xamarin-forms-samples/tree/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Basics) folder of the solution. @@ -22,13 +22,13 @@ All the sample programs in this section appear under the heading **SkiaSharp Dra Learn the basics of SkiaSharp drawing, including canvases and paint objects. -## [Integrating with Xamarin.Forms](integration.md) +## [Integrating with .NET MAUI](integration.md) -Create interactive SkiaSharp graphics by responding to touch input and integrating with Xamarin.Forms elements. +Create interactive SkiaSharp graphics by responding to touch input and integrating with .NET MAUI elements. ## [Pixels and Device-Independent Units](pixels.md) -Explore the differences between SkiaSharp coordinates and Xamarin.Forms coordinates. +Explore the differences between SkiaSharp coordinates and .NET MAUI coordinates. ## [Basic Animation](animation.md) diff --git a/docs/docs/basics/integration.md b/docs/docs/basics/integration.md index 8bafd0ee25..2a0ca01430 100644 --- a/docs/docs/basics/integration.md +++ b/docs/docs/basics/integration.md @@ -1,33 +1,33 @@ --- -title: "Integrating with Xamarin.Forms" -description: "This article explains how to create SkiaSharp graphics that respond to touch and Xamarin.Forms elements, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +title: "Integrating with .NET MAUI" +description: "This article explains how to create SkiaSharp graphics that respond to touch and .NET MAUI elements, and demonstrates this with sample code." +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 288224F1-7AEE-4148-A88D-A70C03F83D7A author: davidbritch ms.author: dabritch ms.date: 02/09/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- -# Integrating with Xamarin.Forms +# Integrating with .NET MAUI -_Create SkiaSharp graphics that respond to touch and Xamarin.Forms elements_ +_Create SkiaSharp graphics that respond to touch and .NET MAUI elements_ -SkiaSharp graphics can integrate with the rest of Xamarin.Forms in several ways. You can combine a SkiaSharp canvas and Xamarin.Forms elements on the same page, and even position Xamarin.Forms elements on top of a SkiaSharp canvas: +SkiaSharp graphics can integrate with the rest of .NET MAUI in several ways. You can combine a SkiaSharp canvas and .NET MAUI elements on the same page, and even position .NET MAUI elements on top of a SkiaSharp canvas: ![Selecting a color with sliders](integration-images/integrationexample.png) -Another approach to creating interactive SkiaSharp graphics in Xamarin.Forms is through touch. +Another approach to creating interactive SkiaSharp graphics in .NET MAUI is through touch. The second page in the sample program is entitled **Tap Toggle Fill**. It draws a simple circle two ways — without a fill and with a fill — toggled by a tap. The [`TapToggleFillPage`](https://github.com/xamarin/xamarin-forms-samples/blob/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Basics/TapToggleFillPage.xaml.cs) class shows how you can alter SkiaSharp graphics in response to user input. -For this page, the `SKCanvasView` class is instantiated in the [TapToggleFill.xaml](https://github.com/xamarin/xamarin-forms-samples/blob/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Basics/TapToggleFillPage.xaml) file, which also sets a Xamarin.Forms [`TapGestureRecognizer`](xref:Xamarin.Forms.TapGestureRecognizer) on the view: +For this page, the `SKCanvasView` class is instantiated in the [TapToggleFill.xaml](https://github.com/xamarin/xamarin-forms-samples/blob/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Basics/TapToggleFillPage.xaml) file, which also sets a .NET MAUI [`TapGestureRecognizer`](xref:Microsoft.Maui.Controls.TapGestureRecognizer) on the view: ```xaml - @@ -41,7 +41,7 @@ For this page, the `SKCanvasView` class is instantiated in the [TapToggleFill.xa Notice the `skia` XML namespace declaration. -The `Tapped` handler for the `TapGestureRecognizer` object simply toggles the value of a Boolean field and calls the [`InvalidateSurface`](xref:SkiaSharp.Views.Forms.SKCanvasView.InvalidateSurface) method of `SKCanvasView`: +The `Tapped` handler for the `TapGestureRecognizer` object simply toggles the value of a Boolean field and calls the [`InvalidateSurface`](xref:SkiaSharp.Views.Maui.Controls.SKCanvasView.InvalidateSurface) method of `SKCanvasView`: ```csharp bool showFill = true; @@ -67,7 +67,7 @@ void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args) SKPaint paint = new SKPaint { Style = SKPaintStyle.Stroke, - Color = Color.Red.ToSKColor(), + Color = Microsoft.Maui.Graphics.Color.FromArgb("#FF0000").ToSKColor(), StrokeWidth = 50 }; canvas.DrawCircle(info.Width / 2, info.Height / 2, 100, paint); @@ -83,7 +83,7 @@ void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args) The `StrokeWidth` property has been set to 50 to accentuate the difference. You can also see the whole line width by drawing the interior first and then the outline. By default, graphics figures that are drawn later in the `PaintSurface` event handler obscure those drawn earlier in the handler. -The **Color Explore** page demonstrates how you can also integrate SkiaSharp graphics with other Xamarin.Forms elements, and also demonstrates the difference between two alternative methods for defining colors in SkiaSharp. The static [`SKColor.FromHsl`](xref:SkiaSharp.SKColor.FromHsl(System.Single,System.Single,System.Single,System.Byte)) method creates an `SKColor` value based on the Hue-Saturation-Lightness model: +The **Color Explore** page demonstrates how you can also integrate SkiaSharp graphics with other .NET MAUI elements, and also demonstrates the difference between two alternative methods for defining colors in SkiaSharp. The static [`SKColor.FromHsl`](xref:SkiaSharp.SKColor.FromHsl(System.Single,System.Single,System.Single,System.Byte)) method creates an `SKColor` value based on the Hue-Saturation-Lightness model: ```csharp public static SKColor FromHsl (Single h, Single s, Single l, Byte a) @@ -100,9 +100,9 @@ In both cases, the `h` argument ranges from 0 to 360. The `s`, `l`, and `v` argu The [**ColorExplorePage.xaml**](https://github.com/xamarin/xamarin-forms-samples/blob/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Basics/ColorExplorePage.xaml) file creates two `SKCanvasView` objects in a `StackLayout` side by side with `Slider` and `Label` views that allow the user to select HSL and HSV color values: ```xaml - diff --git a/docs/docs/basics/pixels.md b/docs/docs/basics/pixels.md index 44f94a0ea9..6771aaa015 100644 --- a/docs/docs/basics/pixels.md +++ b/docs/docs/basics/pixels.md @@ -1,31 +1,31 @@ --- title: "Pixels and Device-Independent Units" -description: "This article explores the differences between SkiaSharp coordinates and Xamarin.Forms coordinates, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +description: "This article explores the differences between SkiaSharp coordinates and .NET MAUI coordinates, and demonstrates this with sample code." +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 26C25BB8-FBE8-4B77-B01D-16A163A16890 author: davidbritch ms.author: dabritch ms.date: 02/09/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Pixels and Device-Independent Units -_Explore the differences between SkiaSharp coordinates and Xamarin.Forms coordinates_ +_Explore the differences between SkiaSharp coordinates and .NET MAUI coordinates_ -This article explores the differences in the coordinate system used in SkiaSharp and Xamarin.Forms. You can obtain information to convert between the two coordinate systems and also draw graphics that fill a particular area: +This article explores the differences in the coordinate system used in SkiaSharp and .NET MAUI. You can obtain information to convert between the two coordinate systems and also draw graphics that fill a particular area: ![An oval that fills the screen](pixels-images/screenfillexample.png) -If you've been programming in Xamarin.Forms for a while, you might have a feel for Xamarin.Forms coordinates and sizes. The circles drawn in the two previous articles might seem a little small to you. +If you've been programming in .NET MAUI for a while, you might have a feel for .NET MAUI coordinates and sizes. The circles drawn in the two previous articles might seem a little small to you. -Those circles *are* small in comparison with Xamarin.Forms sizes. By default, SkiaSharp draws in units of pixels while Xamarin.Forms bases coordinates and sizes on a device-independent unit established by the underlying platform. (More information on the Xamarin.Forms coordinate system can be found in [Chapter 5. Dealing with Sizes](~/xamarin-forms/creating-mobile-apps-xamarin-forms/summaries/chapter05.md) of the book *Creating Mobile Apps with Xamarin.Forms*.) +Those circles *are* small in comparison with .NET MAUI sizes. By default, SkiaSharp draws in units of pixels while .NET MAUI bases coordinates and sizes on a device-independent unit established by the underlying platform. (More information on the .NET MAUI coordinate system can be found in the .NET MAUI documentation.) The page in the sample program entitled **Surface Size** uses SkiaSharp text output to show the size of the display surface from three different sources: -- The normal Xamarin.Forms [`Width`](xref:Xamarin.Forms.VisualElement.Width) and [`Height`](xref:Xamarin.Forms.VisualElement.Height) properties of the `SKCanvasView` object. -- The [`CanvasSize`](xref:SkiaSharp.Views.Forms.SKCanvasView.CanvasSize) property of the `SKCanvasView` object. +- The normal .NET MAUI [`Width`](xref:Microsoft.Maui.Controls.VisualElement.Width) and [`Height`](xref:Microsoft.Maui.Controls.VisualElement.Height) properties of the `SKCanvasView` object. +- The [`CanvasSize`](xref:SkiaSharp.Views.Maui.Controls.SKCanvasView.CanvasSize) property of the `SKCanvasView` object. - The [`Size`](xref:SkiaSharp.SKImageInfo.Size) property of the `SKImageInfo` value, which is consistent with the `Width` and `Height` properties used in the two previous pages. The [`SurfaceSizePage`](https://github.com/xamarin/xamarin-forms-samples/blob/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Basics/SurfaceSizePage.cs) class shows how to display these values. The constructor saves the `SKCanvasView` object as a field, so it can be accessed in the `PaintSurface` event handler: @@ -97,7 +97,7 @@ Here's the program running: [![Screenshots show the Surface Size app running on two mobile devices.](pixels-images/surfacesize-small.png)](pixels-images/surfacesize-large.png#lightbox "Triple screenshot of the Surface Size page") -As you can see, the `CanvasSize` property of the `SKCanvasView` and the `Size` property of the `SKImageInfo` value are consistent in reporting the pixel dimensions. The `Height` and `Width` properties of the `SKCanvasView` are Xamarin.Forms properties, and report the size of the view in the device-independent units defined by the platform. +As you can see, the `CanvasSize` property of the `SKCanvasView` and the `Size` property of the `SKImageInfo` value are consistent in reporting the pixel dimensions. The `Height` and `Width` properties of the `SKCanvasView` are .NET MAUI properties, and report the size of the view in the device-independent units defined by the platform. The iOS seven simulator on the left has two pixels per device-independent unit, and the Android Nexus 5 in the center has three pixels per unit. That's why the simple circle shown earlier has different sizes on different platforms. diff --git a/docs/docs/basics/text.md b/docs/docs/basics/text.md index ad969246b8..01978cb98c 100644 --- a/docs/docs/basics/text.md +++ b/docs/docs/basics/text.md @@ -1,13 +1,13 @@ --- title: "Integrating Text and Graphics" -description: "This article explains how to determine the size of rendered text string to integrate text with SkiaSharp graphics into Xamarin.Forms applications, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +description: "This article explains how to determine the size of rendered text string to integrate text with SkiaSharp graphics into .NET MAUI applications, and demonstrates this with sample code." +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: A0B5AC82-7736-4AD8-AA16-FE43E18D203C author: davidbritch ms.author: dabritch ms.date: 03/10/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Integrating Text and Graphics diff --git a/docs/docs/basics/transparency.md b/docs/docs/basics/transparency.md index 6c65837340..408838c682 100644 --- a/docs/docs/basics/transparency.md +++ b/docs/docs/basics/transparency.md @@ -1,13 +1,13 @@ --- title: "SkiaSharp Transparency" description: "Use transparency to combine multiple objects in a single scene." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: B62F9487-C30E-4C63-BAB1-4C091FF50378 author: davidbritch ms.author: dabritch ms.date: 08/23/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp transparency @@ -143,7 +143,7 @@ Bitmap transparency is demonstrated in the **Bitmap Dissolve** page. The XAML fi ```xaml diff --git a/docs/docs/bitmaps/animating.md b/docs/docs/bitmaps/animating.md index 47d3cbf90c..991f138894 100644 --- a/docs/docs/bitmaps/animating.md +++ b/docs/docs/bitmaps/animating.md @@ -1,13 +1,13 @@ --- title: "Animating SkiaSharp bitmaps" description: "Learn how to perform bitmap animation by sequentially displaying a series of bitmaps, and rendering animated GIF files." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 97142ADC-E2FD-418C-8A09-9C561AEE5BFD author: davidbritch ms.author: dabritch ms.date: 07/12/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Animating SkiaSharp bitmaps @@ -126,7 +126,7 @@ The **Mandelbrot Animation** XAML file includes two `Label` views, a `ProgressBa ```csharp @@ -468,7 +468,7 @@ The sample includes an animated GIF resource named **Newtons_cradle_animation_bo ```xaml diff --git a/docs/docs/bitmaps/cropping.md b/docs/docs/bitmaps/cropping.md index ebc3400b6b..13d7dafbd4 100644 --- a/docs/docs/bitmaps/cropping.md +++ b/docs/docs/bitmaps/cropping.md @@ -1,13 +1,13 @@ --- title: "Cropping SkiaSharp bitmaps" description: "Learn how to use SkiaSharp to design a user interface for interactively desribing a cropping rectangle." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 0A79AB27-C69F-4376-8FFE-FF46E4783F30 author: davidbritch ms.author: dabritch ms.date: 07/17/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Cropping SkiaSharp bitmaps @@ -391,7 +391,7 @@ class PhotoCropperCanvasView : SKCanvasView } } - SKPoint ConvertToPixel(Xamarin.Forms.Point pt) + SKPoint ConvertToPixel(Microsoft.Maui.Graphics.Point pt) { return new SKPoint((float)(CanvasSize.Width * pt.X / Width), (float)(CanvasSize.Height * pt.Y / Height)); @@ -730,21 +730,21 @@ public partial class PhotoPuzzlePage3 : ContentPage The **Done** button handler obtains the width and height of the cropped bitmap (these two values should be the same) and then divides it into 15 separate bitmaps, each of which is 1/4 the width and height of the original. (The last of the possible 16 bitmaps is not created.) The `DrawBitmap` method with source and destination rectangle allows a bitmap to be created based on subset of a larger bitmap. -## Converting to Xamarin.Forms bitmaps +## Converting to .NET MAUI bitmaps -In the `OnDoneButtonClicked` method, the array created for the 15 bitmaps is of type [`ImageSource`](xref:Xamarin.Forms.ImageSource): +In the `OnDoneButtonClicked` method, the array created for the 15 bitmaps is of type [`ImageSource`](xref:Microsoft.Maui.Controls.ImageSource): ```csharp ImageSource[] imgSources = new ImageSource[15]; ``` -`ImageSource` is the Xamarin.Forms base type that encapsulates a bitmap. Fortunately, SkiaSharp allows converting from SkiaSharp bitmaps to Xamarin.Forms bitmaps. The **SkiaSharp.Views.Forms** assembly defines an [`SKBitmapImageSource`](xref:SkiaSharp.Views.Forms.SKBitmapImageSource) class that derives from `ImageSource` but can be created based on a SkiaSharp `SKBitmap` object. `SKBitmapImageSource` even defines conversions between `SKBitmapImageSource` and `SKBitmap`, and that's how `SKBitmap` objects are stored in an array as Xamarin.Forms bitmaps: +`ImageSource` is the .NET MAUI base type that encapsulates a bitmap. Fortunately, SkiaSharp allows converting from SkiaSharp bitmaps to .NET MAUI bitmaps. The **SkiaSharp.Views.Maui.Controls** assembly defines an [`SKBitmapImageSource`](xref:SkiaSharp.Views.Maui.Controls.SKBitmapImageSource) class that derives from `ImageSource` but can be created based on a SkiaSharp `SKBitmap` object. `SKBitmapImageSource` even defines conversions between `SKBitmapImageSource` and `SKBitmap`, and that's how `SKBitmap` objects are stored in an array as .NET MAUI bitmaps: ```csharp imgSources[4 * row + col] = (SKBitmapImageSource)bitmap; ``` -This array of bitmaps is passed as a constructor to `PhotoPuzzlePage4`. That page is entirely Xamarin.Forms and doesn't use any SkiaSharp. It is very similar to [**XamagonXuzzle**](https://github.com/xamarin/xamarin-forms-book-samples/tree/master/Chapter22/XamagonXuzzle), so it won't be described here, but it displays your selected photo divided into 15 square tiles: +This array of bitmaps is passed as a constructor to `PhotoPuzzlePage4`. That page is entirely .NET MAUI and doesn't use any SkiaSharp. It is very similar to [**XamagonXuzzle**](https://github.com/xamarin/xamarin-forms-book-samples/tree/master/Chapter22/XamagonXuzzle), so it won't be described here, but it displays your selected photo divided into 15 square tiles: [![Photo Puzzle 1](cropping-images/PhotoPuzzle1.png "Photo Puzzle 1")](cropping-images/PhotoPuzzle1-Large.png#lightbox) diff --git a/docs/docs/bitmaps/displaying.md b/docs/docs/bitmaps/displaying.md index d1156dd139..8faedfe80d 100644 --- a/docs/docs/bitmaps/displaying.md +++ b/docs/docs/bitmaps/displaying.md @@ -1,13 +1,13 @@ --- title: "Displaying SkiaSharp bitmaps" description: "Learn how to display SkiaSharp bitmaps in pixel sizes and expanded to fill rectangles while preserving the aspect ratio." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 8E074F8D-4715-4146-8CC0-FD7A8290EDE9 author: davidbritch ms.author: dabritch ms.date: 07/17/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Displaying SkiaSharp bitmaps @@ -313,7 +313,7 @@ The bitmap's aspect ratio is preserved but areas on the left and right of the bi ## A versatile bitmap display function -XAML-based programming environments (such as UWP and Xamarin.Forms) have a facility to expand or shrink the size of bitmaps while preserving their aspect ratios. Although SkiaSharp does not include this feature, you can implement it yourself. +XAML-based programming environments (such as WinUI and .NET MAUI) have a facility to expand or shrink the size of bitmaps while preserving their aspect ratios. Although SkiaSharp does not include this feature, you can implement it yourself. The `BitmapExtensions` class included in the sample application shows how. The class defines two new `DrawBitmap` methods that perform the aspect ratio calculation. These new methods are extension methods of `SKCanvas`. @@ -331,7 +331,7 @@ public enum BitmapStretch } ``` -The `None`, `Fill`, `Uniform`, and `UniformToFill` members are the same as those in the UWP [`Stretch`](/uwp/api/Windows.UI.Xaml.Media.Stretch) enumeration. The similar Xamarin.Forms [`Aspect`](xref:Xamarin.Forms.Aspect) enumeration defines members `Fill`, `AspectFit`, and `AspectFill`. +The `None`, `Fill`, `Uniform`, and `UniformToFill` members are the same as those in the WinUI [`Stretch`](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.stretch) enumeration. The similar .NET MAUI [`Aspect`](xref:Microsoft.Maui.Aspect) enumeration defines members `Fill`, `AspectFit`, and `AspectFill`. The **Uniform Scaling** page shown above centers the bitmap within the rectangle, but you might want other options, such as positioning the bitmap at the left or right side of the rectangle, or the top or bottom. That's the purpose of the `BitmapAlignment` enumeration: @@ -489,7 +489,7 @@ The first of these two new `DrawBitmap` methods is demonstrated in the **Scaling diff --git a/docs/docs/bitmaps/drawing.md b/docs/docs/bitmaps/drawing.md index 0d9c94249e..76941f9d15 100644 --- a/docs/docs/bitmaps/drawing.md +++ b/docs/docs/bitmaps/drawing.md @@ -1,13 +1,13 @@ --- title: "Creating and drawing on SkiaSharp bitmaps" description: "Learn how to create SkiaSharp bitmaps and then draw on these bitmaps by creating a canvas based on them." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 79BD3266-D457-4E50-BDDF-33450035FA0F author: davidbritch ms.author: dabritch ms.date: 07/17/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Creating and drawing on SkiaSharp bitmaps @@ -165,7 +165,7 @@ The two formats where each pixel is 32 pixels (4 bytes) are often called _full-c These days, programmers almost always use full-color bitmaps and don't bother with other formats. The exception is the `RgbaF16` format, which allows greater color resolution than even the full-color formats. However, this format is used for specialized purposes, such as medical imaging, and doesn't make much sense when used with standard full-color displays. -This series of articles will restrict itself to the `SKBitmap` color formats used by default when no `SKColorType` member is specified. This default format is based on the underlying platform. For the platforms supported by Xamarin.Forms, the default color type is: +This series of articles will restrict itself to the `SKBitmap` color formats used by default when no `SKColorType` member is specified. This default format is based on the underlying platform. For the platforms supported by .NET MAUI, the default color type is: - `Rgba8888` for iOS and Android - `Bgra8888` for the UWP @@ -401,7 +401,7 @@ This trigonometry is shown in the **Bitmap Rotator** page. The XAML file instant ```xaml @@ -493,7 +493,7 @@ The **Bitmap Flipper** page in the sample application demonstrates these process ```xaml diff --git a/docs/docs/bitmaps/index.md b/docs/docs/bitmaps/index.md index 46335caa3d..0c894bc2af 100644 --- a/docs/docs/bitmaps/index.md +++ b/docs/docs/bitmaps/index.md @@ -1,13 +1,13 @@ --- title: "SkiaSharp bitmaps" description: "Learn how to load, save, display, create, draw on, animate, and access the bits of SkiaSharp bitmaps." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 70C19370-157A-4B1B-9532-F77E32AC21BC author: davidbritch ms.author: dabritch ms.date: 07/17/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp bitmaps diff --git a/docs/docs/bitmaps/pixel-bits.md b/docs/docs/bitmaps/pixel-bits.md index c62b24ca18..2e608d24bc 100644 --- a/docs/docs/bitmaps/pixel-bits.md +++ b/docs/docs/bitmaps/pixel-bits.md @@ -1,13 +1,13 @@ --- title: "Accessing SkiaSharp bitmap pixel bits" description: "Discover the various techniques for accessing and modifying the pixel bits of SkiaSharp bitmaps." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: DBB58522-F816-4A8C-96A5-E0236F16A5C6 author: davidbritch ms.author: dabritch ms.date: 07/11/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Accessing SkiaSharp bitmap pixel bits diff --git a/docs/docs/bitmaps/saving.md b/docs/docs/bitmaps/saving.md index 595556a6bd..96984097e9 100644 --- a/docs/docs/bitmaps/saving.md +++ b/docs/docs/bitmaps/saving.md @@ -1,13 +1,13 @@ --- title: "Saving SkiaSharp bitmaps to files" description: "Explore the various file formats supported by SkiaSharp for saving bitmaps in the user's photo library." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 2D696CB6-B31B-42BC-8D3B-11D63B1E7D9C author: davidbritch ms.author: dabritch ms.date: 07/10/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Saving SkiaSharp bitmaps to files @@ -60,7 +60,7 @@ When you encode an `SKBitmap` object into a particular file format, generally yo Saving to a file in application local storage is quite easy because you can use standard `System.IO` classes and methods for this task. This technique is demonstrated in the article [**Animating SkiaSharp Bitmaps**](animating.md#bitmap-animation) in connection with animating a series of bitmaps of the Mandelbrot set. -If you want the file to be shared by other applications, it must be saved to the user's photo library. This task requires platform-specific code and the use of the Xamarin.Forms [`DependencyService`](xref:Xamarin.Forms.DependencyService). +If you want the file to be shared by other applications, it must be saved to the user's photo library. This task requires platform-specific code and the use of the .NET MAUI dependency injection. The **SkiaSharpFormsDemo** project in the sample application defines an `IPhotoLibrary` interface used with the `DependencyService` class. This defines the syntax of a `SavePhotoAsync` method: @@ -282,7 +282,7 @@ The XAML file contains an `SKCanvasView` that displays a bitmap, while the rest @@ -473,7 +473,7 @@ Much of this program is similar to the original **Finger Paint** program. One en diff --git a/docs/docs/bitmaps/segmented.md b/docs/docs/bitmaps/segmented.md index 56dc50b60d..ac23c0f0a1 100644 --- a/docs/docs/bitmaps/segmented.md +++ b/docs/docs/bitmaps/segmented.md @@ -1,13 +1,13 @@ --- title: "Segmented display of SkiaSharp bitmaps" description: "Display a SkiaSharp bitmap so that some area are stretched and some areas are not." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 79AE2033-C41C-4447-95A6-76D22E913D19 author: davidbritch ms.author: dabritch ms.date: 07/17/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Segmented display of SkiaSharp bitmaps diff --git a/docs/docs/curves/arcs.md b/docs/docs/curves/arcs.md index e2f17ec8c3..8bcf6041e8 100644 --- a/docs/docs/curves/arcs.md +++ b/docs/docs/curves/arcs.md @@ -1,13 +1,13 @@ --- title: "Three Ways to Draw an Arc" description: "This article explains how to use SkiaSharp to define arcs in three different ways, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: F1DA55E4-0182-4388-863C-5C340213BF3C author: davidbritch ms.author: dabritch ms.date: 05/10/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Three Ways to Draw an Arc diff --git a/docs/docs/curves/beziers.md b/docs/docs/curves/beziers.md index 6e6840d481..427ef43dd3 100644 --- a/docs/docs/curves/beziers.md +++ b/docs/docs/curves/beziers.md @@ -1,13 +1,13 @@ --- title: "Three Types of Bézier Curves" -description: "This article explains how to use SkiaSharp to render cubic, quadratic, and conic Bézier curves in Xamarin.Forms applications, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +description: "This article explains how to use SkiaSharp to render cubic, quadratic, and conic Bézier curves in .NET MAUI applications, and demonstrates this with sample code." +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 8FE0F6DC-16BC-435F-9626-DD1790C0145A author: davidbritch ms.author: dabritch ms.date: 05/25/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Three Types of Bézier Curves diff --git a/docs/docs/curves/clipping.md b/docs/docs/curves/clipping.md index 900121f040..22235ab528 100644 --- a/docs/docs/curves/clipping.md +++ b/docs/docs/curves/clipping.md @@ -1,13 +1,13 @@ --- title: "Clipping with Paths and Regions" description: "This article explains how to use SkiaSharp paths to clip graphics to specific areas, and to create regions, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 8022FBF9-2208-43DB-94D8-0A4E9A5DA07F author: davidbritch ms.author: dabritch ms.date: 06/16/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Clipping with Paths and Regions diff --git a/docs/docs/curves/effects.md b/docs/docs/curves/effects.md index 9e8905350a..edada21fc2 100644 --- a/docs/docs/curves/effects.md +++ b/docs/docs/curves/effects.md @@ -1,13 +1,13 @@ --- title: "Path Effects in SkiaSharp" description: "This article explains the various SkiaSharp path effects that allow paths to be used for stroking and filling, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 95167D1F-A718-405A-AFCC-90E596D422F3 author: davidbritch ms.author: dabritch ms.date: 07/29/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Path Effects in SkiaSharp @@ -287,7 +287,7 @@ The **1D Path Effect** page demonstrates these three options. The [**OneDimensio @@ -946,7 +946,7 @@ The program is straightforward. The [**JitterExperimentPage.xaml**](https://gith ```xaml diff --git a/docs/docs/curves/index.md b/docs/docs/curves/index.md index 5570ed7f19..306ad8d078 100644 --- a/docs/docs/curves/index.md +++ b/docs/docs/curves/index.md @@ -1,13 +1,13 @@ --- title: "SkiaSharp Curves and Paths" -description: "This article explains how to use SkiaSharp to draw curves and use path features in Xamarin.Forms applications, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +description: "This article explains how to use SkiaSharp to draw curves and use path features in .NET MAUI applications, and demonstrates this with sample code." +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 781937AA-AA1C-469C-AA92-D42D08B58635 author: davidbritch ms.author: dabritch ms.date: 05/24/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp Curves and Paths diff --git a/docs/docs/curves/information.md b/docs/docs/curves/information.md index 9073362df9..fdf569c2ab 100644 --- a/docs/docs/curves/information.md +++ b/docs/docs/curves/information.md @@ -1,13 +1,13 @@ --- title: "Path Information and Enumeration" description: "This article explains how to get information about SkiaSharp paths and enumerate the contents, and demonstrates this with sample code." -ms.service: xamarin +ms.service: dotnet-maui ms.assetid: 8E8C5C6A-F324-4155-8652-7A77D231B3E5 -ms.subservice: xamarin-skiasharp +ms.subservice: skiasharp author: davidbritch ms.author: dabritch ms.date: 09/12/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Path Information and Enumeration @@ -34,7 +34,7 @@ This class is demonstrated in the **Path Length** sample, which is based on the diff --git a/docs/docs/curves/path-data.md b/docs/docs/curves/path-data.md index 70f6665992..5093fddfa6 100644 --- a/docs/docs/curves/path-data.md +++ b/docs/docs/curves/path-data.md @@ -1,13 +1,13 @@ --- title: "SVG Path Data in SkiaSharp" description: "This article explains how to define SkiaSharp paths using text strings in the Scalable Vector Graphics format, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 1D53067B-3502-4D74-B89D-7EC496901AE2 author: davidbritch ms.author: dabritch ms.date: 05/24/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SVG Path Data in SkiaSharp @@ -419,7 +419,7 @@ public class PrettyAnalogClockPage : ContentPage } ``` -Something special is done with the second hand, however. Because the clock is updated every 16 milliseconds, the `Millisecond` property of the `DateTime` value can potentially be used to animate a sweep second hand instead of one that moves in discrete jumps from second to second. But this code does not allow the movement to be smooth. Instead, it uses the Xamarin.Forms [`SpringIn`](xref:Xamarin.Forms.Easing.SpringIn) and [`SpringOut`](xref:Xamarin.Forms.Easing.SpringOut) animation easing functions for a different kind of movement. These easing functions cause the second hand to move in a jerkier manner — pulling back a little before it moves, and then slightly over-shooting its destination, an effect that unfortunately can't be reproduced in these static screenshots: +Something special is done with the second hand, however. Because the clock is updated every 16 milliseconds, the `Millisecond` property of the `DateTime` value can potentially be used to animate a sweep second hand instead of one that moves in discrete jumps from second to second. But this code does not allow the movement to be smooth. Instead, it uses the .NET MAUI [`SpringIn`](xref:Microsoft.Maui.Easing.SpringIn) and [`SpringOut`](xref:Microsoft.Maui.Easing.SpringOut) animation easing functions for a different kind of movement. These easing functions cause the second hand to move in a jerkier manner — pulling back a little before it moves, and then slightly over-shooting its destination, an effect that unfortunately can't be reproduced in these static screenshots: [![Triple screenshot of the Pretty Analog Clock page](path-data-images/prettyanalogclock-small.png)](path-data-images/prettyanalogclock-large.png#lightbox "Triple screenshot of the Pretty Analog Clock page") diff --git a/docs/docs/curves/text-paths.md b/docs/docs/curves/text-paths.md index 67f5bf79a9..9742fc4534 100644 --- a/docs/docs/curves/text-paths.md +++ b/docs/docs/curves/text-paths.md @@ -1,13 +1,13 @@ --- title: "Paths and Text in SkiaSharp" description: "This article explores the intersection of SkiaSharp paths and text, and demonstrates this with sample code." -ms.service: xamarin +ms.service: dotnet-maui ms.assetid: C14C07F6-4A84-4A8C-BDB4-CD61FBF0F79B -ms.subservice: xamarin-skiasharp +ms.subservice: skiasharp author: davidbritch ms.author: dabritch ms.date: 08/01/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Paths and Text in SkiaSharp diff --git a/docs/docs/effects/blend-modes/index.md b/docs/docs/effects/blend-modes/index.md index 56eee11309..a6fd93c2b6 100644 --- a/docs/docs/effects/blend-modes/index.md +++ b/docs/docs/effects/blend-modes/index.md @@ -1,13 +1,13 @@ --- title: "SkiaSharp blend modes" description: "Use blend modes to define what happens when graphical objects are stacked on one another." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: CE1B222E-A2D0-4016-A532-EC1E59EE3D6B author: davidbritch ms.author: dabritch ms.date: 08/23/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp blend modes @@ -56,7 +56,7 @@ canvas.Clear(); This method replaces all the pixels of the canvas with transparent black pixels, equivalent to `new SKColor(0, 0, 0, 0)` or the integer 0x00000000. All the bytes of all the pixels are initialized to zero. -The drawing surface of an `SKCanvas` that is obtained in a `PaintSurface` handler might appear to have a white background, but that's only because the `SKCanvasView` itself has a transparent background, and the page has a white background. You can demonstrate this fact to yourself by setting the Xamarin.Forms `BackgroundColor` property of `SKCanvasView` to a Xamarin.Forms color: +The drawing surface of an `SKCanvas` that is obtained in a `PaintSurface` handler might appear to have a white background, but that's only because the `SKCanvasView` itself has a transparent background, and the page has a white background. You can demonstrate this fact to yourself by setting the .NET MAUI `BackgroundColor` property of `SKCanvasView` to a .NET MAUI color: ```csharp canvasView.BackgroundColor = Color.Red; diff --git a/docs/docs/effects/blend-modes/non-separable.md b/docs/docs/effects/blend-modes/non-separable.md index 5e1f3cf032..a91b4680a9 100644 --- a/docs/docs/effects/blend-modes/non-separable.md +++ b/docs/docs/effects/blend-modes/non-separable.md @@ -1,13 +1,13 @@ --- title: "The non-separable blend modes" description: "Use the non-separable blend modes to alter hue, saturation, or luminosity." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 97FA2730-87C0-4914-8C9F-C64A02CF9EEF author: davidbritch ms.author: dabritch ms.date: 08/23/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # The non-separable blend modes @@ -20,7 +20,7 @@ As you saw in the article [**SkiaSharp separable blend modes**](separable.md), t To understand the non-separable blend modes, it is necessary to treat the destination and source pixels as colors in the Hue-Saturation-Luminosity model. (Luminosity is also referred to as Lightness.) -The HSL color model was discussed in the article [**Integrating with Xamarin.Forms**](../../basics/integration.md) and a sample program in that article allows experimentation with HSL colors. You can create an `SKColor` value using Hue, Saturation, and Luminosity values with the static [`SKColor.FromHsl`](xref:SkiaSharp.SKColor.FromHsl*) method. +The HSL color model was discussed in the article [**Integrating with .NET MAUI**](../../basics/integration.md) and a sample program in that article allows experimentation with HSL colors. You can create an `SKColor` value using Hue, Saturation, and Luminosity values with the static [`SKColor.FromHsl`](xref:SkiaSharp.SKColor.FromHsl*) method. The Hue represents the dominant wavelength of the color. Hue values range from 0 to 360 and cycle through the additive and subtractive primaries: Red is the value 0, yellow is 60, green is 120, cyan is 180, blue is 240, magenta is 300, and the cycle goes back to red at 360. @@ -51,7 +51,7 @@ The **Non-Separable Blend Modes** page contains a `Picker` to select one of thes diff --git a/docs/docs/effects/blend-modes/porter-duff.md b/docs/docs/effects/blend-modes/porter-duff.md index 5d404db945..565c97fbb0 100644 --- a/docs/docs/effects/blend-modes/porter-duff.md +++ b/docs/docs/effects/blend-modes/porter-duff.md @@ -1,13 +1,13 @@ --- title: "Porter-Duff blend modes" description: "Use the Porter-Duff blend modes to compose scenes based on source and destination images." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 57F172F8-BA03-43EC-A215-ED6B78696BB5 author: davidbritch ms.author: dabritch ms.date: 08/23/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Porter-Duff blend modes @@ -288,7 +288,7 @@ The XAML file for the **Brick-Wall Compositing** page instantiates an `SKCanvasV ```xaml @@ -532,7 +532,7 @@ The **Porter-Duff Transparency** page allows you to examine how the Porter-Duff @@ -736,7 +736,7 @@ You can also use Porter-Duff modes and partially transparent gradients for trans ```xaml diff --git a/docs/docs/effects/blend-modes/separable.md b/docs/docs/effects/blend-modes/separable.md index 8252ed56cb..2f7affebb1 100644 --- a/docs/docs/effects/blend-modes/separable.md +++ b/docs/docs/effects/blend-modes/separable.md @@ -1,13 +1,13 @@ --- title: "The separable blend modes" description: "Use the separable blend modes to alter red, green, and blue colors." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 66D1A537-A247-484E-B5B9-FBCB7838FBE9 author: davidbritch ms.author: dabritch ms.date: 08/23/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # The separable blend modes @@ -25,7 +25,7 @@ These two modes are demonstrated in the **Lighten and Darken** page. The XAML fi ```xaml @@ -184,7 +184,7 @@ The XAML file defines a `Picker` (to select the blend mode) and four sliders. Th diff --git a/docs/docs/effects/color-filters.md b/docs/docs/effects/color-filters.md index 1c3baedc84..04175eee80 100644 --- a/docs/docs/effects/color-filters.md +++ b/docs/docs/effects/color-filters.md @@ -1,13 +1,13 @@ --- title: "SkiaSharp color filters" description: "Use color filters to convert colors with transforms or tables." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 774E7B55-AEC8-4F12-B657-1C0CEE01AD63 author: davidbritch ms.author: dabritch ms.date: 08/28/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp color filters diff --git a/docs/docs/effects/image-filters.md b/docs/docs/effects/image-filters.md index ccfdcbf6d6..dc9a5a6728 100644 --- a/docs/docs/effects/image-filters.md +++ b/docs/docs/effects/image-filters.md @@ -1,13 +1,13 @@ --- title: "SkiaSharp image filters" description: "Learn how to use the image filter to create blurs and drop shadows." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 173E7B22-AEC8-4F12-B657-1C0CEE01AD63 author: davidbritch ms.author: dabritch ms.date: 08/27/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp image filters @@ -37,7 +37,7 @@ The **Image Blur Experiment** page in the sample includes two `Slider` views tha ```xaml @@ -163,7 +163,7 @@ The **Drop Shadow Experiment** program lets you experiment with values of `dx`, ```xaml @@ -316,7 +316,7 @@ Three `Slider` views in the XAML file let you select the `Z` coordinate of the ` ```xaml diff --git a/docs/docs/effects/index.md b/docs/docs/effects/index.md index 6552af76f3..299290705c 100644 --- a/docs/docs/effects/index.md +++ b/docs/docs/effects/index.md @@ -1,13 +1,13 @@ --- title: "SkiaSharp effects" description: "Learn how to alter the normal display of graphics with gradients, bitmap tiling, blend modes, blur and other effects." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: B3E06572-8E2A-49FA-90D1-444C394CD516 author: davidbritch ms.author: dabritch ms.date: 08/22/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp effects diff --git a/docs/docs/effects/mask-filters.md b/docs/docs/effects/mask-filters.md index 76d150d8b2..6cf1757a51 100644 --- a/docs/docs/effects/mask-filters.md +++ b/docs/docs/effects/mask-filters.md @@ -1,13 +1,13 @@ --- title: "SkiaSharp mask filters" description: "Learn how to use the mask filter to create blurs and other alpha effects." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 940422A1-8BC0-4039-8AD7-26C61320F858 author: davidbritch ms.author: dabritch ms.date: 08/27/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp mask filters @@ -43,7 +43,7 @@ The **Mask Blur Experiment** page in the sample allows you to experiment with th diff --git a/docs/docs/effects/shaders/bitmap-tiling.md b/docs/docs/effects/shaders/bitmap-tiling.md index acca99ec60..c74f57fb31 100644 --- a/docs/docs/effects/shaders/bitmap-tiling.md +++ b/docs/docs/effects/shaders/bitmap-tiling.md @@ -1,13 +1,13 @@ --- title: "SkiaSharp bitmap tiling" description: "Tile an area using bitmaps repeated horizontally and vertically." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 9ED14E07-4DC8-4B03-8A33-772838BF51EA author: davidbritch ms.author: dabritch ms.date: 08/23/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp bitmap tiling @@ -41,7 +41,7 @@ The first program in the **Bitmap Tiling** section of the **Shaders and other Ef diff --git a/docs/docs/effects/shaders/circular-gradients.md b/docs/docs/effects/shaders/circular-gradients.md index 2046f71c90..65af72e254 100644 --- a/docs/docs/effects/shaders/circular-gradients.md +++ b/docs/docs/effects/shaders/circular-gradients.md @@ -1,13 +1,13 @@ --- title: "The SkiaSharp circular gradients" description: "Learn about the different types of gradients based on circles." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 400AE23A-6A0B-4FA8-BD6B-DE4146B04732 author: davidbritch ms.author: dabritch ms.date: 08/23/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # The SkiaSharp circular gradients @@ -54,7 +54,7 @@ The effect of `SKShaderMode` is demonstrated in the **Radial Gradient** page in @@ -446,7 +446,7 @@ It's likely you'll want to experiment with the two-point conical gradient, so th xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SkiaSharpFormsDemos" xmlns:skia="clr-namespace:SkiaSharp;assembly=SkiaSharp" - xmlns:skiaforms="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms" + xmlns:skiaforms="clr-namespace:SkiaSharp.Views.Maui.Controls;assembly=SkiaSharp.Views.Maui.Controls" xmlns:tt="clr-namespace:TouchTracking" x:Class="SkiaSharpFormsDemos.Effects.ConicalGradientPage" Title="Conical Gradient"> diff --git a/docs/docs/effects/shaders/index.md b/docs/docs/effects/shaders/index.md index 5b9f5b0816..07d439236e 100644 --- a/docs/docs/effects/shaders/index.md +++ b/docs/docs/effects/shaders/index.md @@ -1,13 +1,13 @@ --- title: "SkiaSharp shaders" description: "Use shaders to create gradients, bitmap tiles, and Perlin noise." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 272B1BEB-0CBC-4E81-A3B9-A9C69AEE3722 author: davidbritch ms.author: dabritch ms.date: 08/23/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp shaders diff --git a/docs/docs/effects/shaders/linear-gradient.md b/docs/docs/effects/shaders/linear-gradient.md index e264f63cb1..5050e8e62a 100644 --- a/docs/docs/effects/shaders/linear-gradient.md +++ b/docs/docs/effects/shaders/linear-gradient.md @@ -1,13 +1,13 @@ --- title: "The SkiaSharp linear gradient" description: "Discover how to stroke lines or fill areas with gradients composed of a gradual blend of two colors." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 20A2A8C4-FEB7-478D-BF57-C92E26117B6A author: davidbritch ms.author: dabritch ms.date: 08/23/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # The SkiaSharp linear gradient @@ -164,7 +164,7 @@ The XAML file attaches the `TouchEffect` to a parent of the `SKCanvasView` and a xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SkiaSharpFormsDemos" xmlns:skia="clr-namespace:SkiaSharp;assembly=SkiaSharp" - xmlns:skiaforms="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms" + xmlns:skiaforms="clr-namespace:SkiaSharp.Views.Maui.Controls;assembly=SkiaSharp.Views.Maui.Controls" xmlns:tt="clr-namespace:TouchTracking" x:Class="SkiaSharpFormsDemos.Effects.InteractiveLinearGradientPage" Title="Interactive Linear Gradient"> diff --git a/docs/docs/effects/shaders/noise.md b/docs/docs/effects/shaders/noise.md index 1f2af64da4..986d01f193 100644 --- a/docs/docs/effects/shaders/noise.md +++ b/docs/docs/effects/shaders/noise.md @@ -1,13 +1,13 @@ --- title: "SkiaSharp noise and composing" description: "Generate Perlin noise shaders and combine with other shaders." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 90C2D00A-2876-43EA-A836-538C3318CF93 author: davidbritch ms.author: dabritch ms.date: 08/23/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp noise and composing @@ -44,7 +44,7 @@ The **Perlin Noise** page in the sample allows you experiment with various value @@ -186,7 +186,7 @@ These methods create a repeating pattern of the specified size. In each tile, th ```xaml diff --git a/docs/docs/paths/dots.md b/docs/docs/paths/dots.md index 2f8ecf1c01..131bbd8cbf 100644 --- a/docs/docs/paths/dots.md +++ b/docs/docs/paths/dots.md @@ -1,13 +1,13 @@ --- title: "Dots and Dashes in SkiaSharp" description: "This article explores how to master the intricacies of drawing dotted and dashed lines in SkiaSharp, and demonstrates this with sample code." -ms.service: xamarin +ms.service: dotnet-maui ms.assetid: 8E9BCC13-830C-458C-9FC8-ECB4EAE66078 -ms.subservice: xamarin-skiasharp +ms.subservice: skiasharp author: davidbritch ms.author: dabritch ms.date: 03/10/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Dots and Dashes in SkiaSharp @@ -32,7 +32,7 @@ Dotted and dashed lines are demonstrated on the **Dots and Dashes** page. The [* @@ -158,7 +158,7 @@ The UWP screen shows that dotted and dashed line for a stroke cap of `Round`. Th So far no mention has been made of the second parameter to the `SKPathEffect.CreateDash` method. This parameter is named `phase` and it refers to an offset within the dot-and-dash pattern for the beginning of the line. For example, if the dash array is { 10, 10 } and the `phase` is 10, then the line begins with a gap rather than a dot. -One interesting application of the `phase` parameter is in an animation. The **Animated Spiral** page is similar to the **Archimedean Spiral** page, except that the [`AnimatedSpiralPage`](https://github.com/xamarin/xamarin-forms-samples/blob/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Paths/AnimatedSpiralPage.cs) class animates the `phase` parameter using the Xamarin.Forms `Device.Timer` method: +One interesting application of the `phase` parameter is in an animation. The **Animated Spiral** page is similar to the **Archimedean Spiral** page, except that the [`AnimatedSpiralPage`](https://github.com/xamarin/xamarin-forms-samples/blob/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Paths/AnimatedSpiralPage.cs) class animates the `phase` parameter using the .NET MAUI `Device.Timer` method: ```csharp public class AnimatedSpiralPage : ContentPage diff --git a/docs/docs/paths/fill-types.md b/docs/docs/paths/fill-types.md index ecade29d5e..a78217b060 100644 --- a/docs/docs/paths/fill-types.md +++ b/docs/docs/paths/fill-types.md @@ -1,13 +1,13 @@ --- title: "The Path Fill Types" description: "This article examines the different effects possible with SkiaSharp path fill types, and demonstrates this with sample code." -ms.service: xamarin +ms.service: dotnet-maui ms.assetid: 57103A7A-49A2-46AE-894C-7C2664682644 -ms.subservice: xamarin-skiasharp +ms.subservice: skiasharp author: davidbritch ms.author: dabritch ms.date: 03/10/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # The Path Fill Types @@ -35,7 +35,7 @@ The classic example is a five-pointed star, as demonstrated in the **Five-Pointe diff --git a/docs/docs/paths/finger-paint.md b/docs/docs/paths/finger-paint.md index 08a3c068a3..7e33dd5829 100644 --- a/docs/docs/paths/finger-paint.md +++ b/docs/docs/paths/finger-paint.md @@ -1,13 +1,13 @@ --- title: "Finger Painting in SkiaSharp" -description: "This article explains how to use your fingers to paint on the SkiaSharp canvas in a Xamarin.Forms application, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +description: "This article explains how to use your fingers to paint on the SkiaSharp canvas in a .NET MAUI application, and demonstrates this with sample code." +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 56929D74-8F2C-44C6-90E6-3FBABCDC0A4B author: davidbritch ms.author: dabritch ms.date: 04/05/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Finger Painting in SkiaSharp @@ -18,7 +18,7 @@ An `SKPath` object can be continually updated and displayed. This feature allows ![An exercise in finger painting](finger-paint-images/fingerpaintsample.png) -The touch support in Xamarin.Forms does not allow tracking individual fingers on the screen, so a Xamarin.Forms touch-tracking effect has been developed to provide additional touch support. This effect is described in the article [**Invoking Events from Effects**](~/xamarin-forms/app-fundamentals/effects/touch-tracking.md). The sample program includes two pages that use SkiaSharp, including a finger-painting program. +The touch support in .NET MAUI does not allow tracking individual fingers on the screen, so a .NET MAUI touch-tracking effect has been developed to provide additional touch support. This effect can provide additional touch support for advanced scenarios. The sample program includes two pages that use SkiaSharp, including a finger-painting program. The sample solution includes this touch-tracking event. The .NET Standard library project includes the `TouchEffect` class, the `TouchActionType` enumeration, the `TouchActionEventHandler` delegate, and the `TouchActionEventArgs` class. Each of the platform projects includes a `TouchEffect` class for that platform; the iOS project also contains a `TouchRecognizer` class. @@ -29,7 +29,7 @@ The [**FingerPaintPage.xaml**](https://github.com/xamarin/xamarin-forms-samples/ ```xaml @@ -130,7 +130,7 @@ public partial class FingerPaintPage : ContentPage } ``` -The points accompanying the touch-tracking events are Xamarin.Forms coordinates; these must be converted to SkiaSharp coordinates, which are pixels. That's the purpose of the `ConvertToPixel` method. +The points accompanying the touch-tracking events are .NET MAUI coordinates; these must be converted to SkiaSharp coordinates, which are pixels. That's the purpose of the `ConvertToPixel` method. The `PaintSurface` handler then simply renders both collections of paths. The earlier completed paths appear underneath the paths in progress: diff --git a/docs/docs/paths/index.md b/docs/docs/paths/index.md index 248bfb7429..f99ee2656b 100644 --- a/docs/docs/paths/index.md +++ b/docs/docs/paths/index.md @@ -1,13 +1,13 @@ --- title: "SkiaSharp Lines and Paths" -description: "This article explains how to use SkiaSharp to draw lines and graphics paths in Xamarin.Forms applications, and demonstrates this with sample code." -ms.service: xamarin +description: "This article explains how to use SkiaSharp to draw lines and graphics paths in .NET MAUI applications, and demonstrates this with sample code." +ms.service: dotnet-maui ms.assetid: 316A15FE-383D-4D06-8641-BAC7EE7474CA -ms.subservice: xamarin-skiasharp +ms.subservice: skiasharp author: davidbritch ms.author: dabritch ms.date: 03/10/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp Lines and Paths diff --git a/docs/docs/paths/lines.md b/docs/docs/paths/lines.md index cdc5281d3f..74381e5e51 100644 --- a/docs/docs/paths/lines.md +++ b/docs/docs/paths/lines.md @@ -1,13 +1,13 @@ --- title: "Lines and Stroke Caps" -description: "This article explains how to use SkiaSharp to draw lines with different stroke caps in Xamarin.Forms applications, and demonstrates this with sample code." -ms.service: xamarin +description: "This article explains how to use SkiaSharp to draw lines with different stroke caps in .NET MAUI applications, and demonstrates this with sample code." +ms.service: dotnet-maui ms.assetid: 1F854DDD-5D1B-4DE4-BD2D-584439429FDB -ms.subservice: xamarin-skiasharp +ms.subservice: skiasharp author: davidbritch ms.author: dabritch ms.date: 03/10/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Lines and Stroke Caps @@ -110,7 +110,7 @@ The **Multiple Lines** page demonstrates this method. The [**MultipleLinesPage.x diff --git a/docs/docs/paths/paths.md b/docs/docs/paths/paths.md index 16b5e1c88f..22fe99a780 100644 --- a/docs/docs/paths/paths.md +++ b/docs/docs/paths/paths.md @@ -1,13 +1,13 @@ --- title: "Path Basics in SkiaSharp" description: "This article explores the SkiaSharp SKPath object for combining connected lines and curves, and demonstrates this with sample code." -ms.service: xamarin +ms.service: dotnet-maui ms.assetid: A7EDA6C2-3921-4021-89F3-211551E430F1 -ms.subservice: xamarin-skiasharp +ms.subservice: skiasharp author: davidbritch ms.author: dabritch ms.date: 03/10/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Path Basics in SkiaSharp diff --git a/docs/docs/paths/polylines.md b/docs/docs/paths/polylines.md index 5d4018c53c..bb40d2e3bf 100644 --- a/docs/docs/paths/polylines.md +++ b/docs/docs/paths/polylines.md @@ -1,13 +1,13 @@ --- title: "Polylines and Parametric Equations" description: "This article explains how to Use SkiaSharp to render any line that you can define with parametric equations, and demonstrates this with sample code." -ms.service: xamarin +ms.service: dotnet-maui ms.assetid: 85AEBB33-E954-4364-A6E1-808FAB197BEE -ms.subservice: xamarin-skiasharp +ms.subservice: skiasharp author: davidbritch ms.author: dabritch ms.date: 03/10/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Polylines and Parametric Equations diff --git a/docs/docs/transforms/3d-rotation.md b/docs/docs/transforms/3d-rotation.md index ba9b636ad4..ceb987a90d 100644 --- a/docs/docs/transforms/3d-rotation.md +++ b/docs/docs/transforms/3d-rotation.md @@ -1,13 +1,13 @@ --- title: "3D Rotations in SkiaSharp" description: "This article explains how to use non-affine transforms to rotate 2D objects in 3D space, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: B5894EA0-C415-41F9-93A4-BBF6EC72AFB9 author: davidbritch ms.author: dabritch ms.date: 04/14/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # 3D Rotations in SkiaSharp @@ -223,7 +223,7 @@ The **Rotation 3D** page lets you experiment with 3D rotation. The [**Rotation3D ```xaml @@ -437,7 +437,7 @@ public class AnimatedRotation3DPage : ContentPage } ``` -The `OnAppearing` override defines three Xamarin.Forms `Animation` objects to animate the `xRotationDegrees`, `yRotationDegrees`, and `zRotationDegrees` fields at different rates. Notice that the periods of these animations are set to prime numbers (5 seconds, 7 seconds, and 11 seconds) so the overall combination only repeats every 385 seconds, or more than 10 minutes: +The `OnAppearing` override defines three .NET MAUI `Animation` objects to animate the `xRotationDegrees`, `yRotationDegrees`, and `zRotationDegrees` fields at different rates. Notice that the periods of these animations are set to prime numbers (5 seconds, 7 seconds, and 11 seconds) so the overall combination only repeats every 385 seconds, or more than 10 minutes: ```csharp public class AnimatedRotation3DPage : ContentPage diff --git a/docs/docs/transforms/index.md b/docs/docs/transforms/index.md index 13324f40f0..50ccef2273 100644 --- a/docs/docs/transforms/index.md +++ b/docs/docs/transforms/index.md @@ -1,13 +1,13 @@ --- title: "SkiaSharp Transforms" -description: "This article explores transforms for displaying SkiaSharp graphics in Xamarin.Forms applications, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +description: "This article explores transforms for displaying SkiaSharp graphics in .NET MAUI applications, and demonstrates this with sample code." +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: E9BE322E-ECB3-4395-AFE4-4474A0F25551 author: davidbritch ms.author: dabritch ms.date: 03/10/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # SkiaSharp Transforms @@ -27,23 +27,23 @@ These are known as *affine* transforms. Affine transforms always preserve parall SkiaSharp also supports non-affine transforms (also called *projective* or *perspective* transforms) based on a standard 3-by-3 transform matrix. A non-affine transform allows a square to be transformed into any convex quadrilateral, which is a four-sided figure with all interior angles less than 180 degrees. Non-affine transforms can cause coordinates or sizes to become infinite, but they are vital for 3D effects. -## Differences between SkiaSharp and Xamarin.Forms Transforms +## Differences between SkiaSharp and .NET MAUI Transforms -Xamarin.Forms also supports transforms that are similar to those in SkiaSharp. The Xamarin.Forms [`VisualElement`](xref:Xamarin.Forms.VisualElement) class defines the following transform properties: +.NET MAUI also supports transforms that are similar to those in SkiaSharp. The .NET MAUI [`VisualElement`](xref:Microsoft.Maui.Controls.VisualElement) class defines the following transform properties: -- [`TranslationX`](xref:Xamarin.Forms.VisualElement.TranslationX) and [`TranslationY`](xref:Xamarin.Forms.VisualElement.TranslationY) -- [`Scale`](xref:Xamarin.Forms.VisualElement.Scale) -- [`Rotation`](xref:Xamarin.Forms.VisualElement.Rotation), [`RotationX`](xref:Xamarin.Forms.VisualElement.RotationX), and [`RotationY`](xref:Xamarin.Forms.VisualElement.RotationY) +- [`TranslationX`](xref:Microsoft.Maui.Controls.VisualElement.TranslationX) and [`TranslationY`](xref:Microsoft.Maui.Controls.VisualElement.TranslationY) +- [`Scale`](xref:Microsoft.Maui.Controls.VisualElement.Scale) +- [`Rotation`](xref:Microsoft.Maui.Controls.VisualElement.Rotation), [`RotationX`](xref:Microsoft.Maui.Controls.VisualElement.RotationX), and [`RotationY`](xref:Microsoft.Maui.Controls.VisualElement.RotationY) The `RotationX` and `RotationY` properties are perspective transforms that create quasi-3D effects. -There are several crucial differences between SkiaSharp transforms and Xamarin.Forms transforms: +There are several crucial differences between SkiaSharp transforms and .NET MAUI transforms: -The first difference is that SkiaSharp transforms are applied to the entire `SKCanvas` object while the Xamarin.Forms transforms are applied to individual `VisualElement` derivatives. (You can apply the Xamarin.Forms transforms to the `SKCanvasView` object itself, because `SKCanvasView` derives from `VisualElement`, but within that `SKCanvasView`, the SkiaSkarp transforms apply.) +The first difference is that SkiaSharp transforms are applied to the entire `SKCanvas` object while the .NET MAUI transforms are applied to individual `VisualElement` derivatives. (You can apply the .NET MAUI transforms to the `SKCanvasView` object itself, because `SKCanvasView` derives from `VisualElement`, but within that `SKCanvasView`, the SkiaSkarp transforms apply.) -The SkiaSharp transforms are relative to the upper-left corner of the `SKCanvas` while Xamarin.Forms transforms are relative to the upper-left corner of the `VisualElement` to which they are applied. This difference is important when applying scaling and rotation transforms because these transforms are always relative to a particular point. +The SkiaSharp transforms are relative to the upper-left corner of the `SKCanvas` while .NET MAUI transforms are relative to the upper-left corner of the `VisualElement` to which they are applied. This difference is important when applying scaling and rotation transforms because these transforms are always relative to a particular point. -The really big difference is that SKiaSharp transforms are *methods* while the Xamarin.Forms transforms are *properties*. This is a semantic difference beyond the syntactical difference: SkiaSharp transforms perform an operation while Xamarin.Forms transforms set a state. SkiaSharp transforms apply to subsequently drawn graphics objects, but not to graphics objects that are drawn before the transform is applied. In contrast, a Xamarin.Forms transform applies to a previously rendered element as soon as the property is set. SkiaSharp transforms are cumulative as the methods are called; Xamarin.Forms transforms are replaced when the property is set with another value. +The really big difference is that SKiaSharp transforms are *methods* while the .NET MAUI transforms are *properties*. This is a semantic difference beyond the syntactical difference: SkiaSharp transforms perform an operation while .NET MAUI transforms set a state. SkiaSharp transforms apply to subsequently drawn graphics objects, but not to graphics objects that are drawn before the transform is applied. In contrast, a .NET MAUI transform applies to a previously rendered element as soon as the property is set. SkiaSharp transforms are cumulative as the methods are called; .NET MAUI transforms are replaced when the property is set with another value. All the sample programs in this section appear in the **SkiaSharp Transforms** section of the sample program. Source code can be found in the [**Transforms**](https://github.com/xamarin/xamarin-forms-samples/tree/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Transforms) folder of the solution. diff --git a/docs/docs/transforms/matrix.md b/docs/docs/transforms/matrix.md index 53204d0293..c727503ba2 100644 --- a/docs/docs/transforms/matrix.md +++ b/docs/docs/transforms/matrix.md @@ -1,13 +1,13 @@ --- title: "Matrix Transforms in SkiaSharp" description: "This article dives deeper into SkiaSharp transforms with the versatile transform matrix, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 9EDED6A0-F0BF-4471-A9EF-E0D6C5954AE4 author: davidbritch ms.author: dabritch ms.date: 04/12/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Matrix Transforms in SkiaSharp @@ -484,7 +484,7 @@ public partial class ShowAffineMatrixPage : ContentPage An affine matrix is uniquely defined by three points. The three `TouchPoint` objects correspond to the upper-left, upper-right, and lower-left corners of the bitmap. Because an affine matrix is only capable of transforming a rectangle into a parallelogram, the fourth point is implied by the other three. The constructor concludes with a call to `ComputeMatrix`, which calculates the cells of an `SKMatrix` object from these three points. -The `TouchAction` handler calls the `ProcessTouchEvent` method of each `TouchPoint`. The `scale` value converts from Xamarin.Forms coordinates to pixels: +The `TouchAction` handler calls the `ProcessTouchEvent` method of each `TouchPoint`. The `scale` value converts from .NET MAUI coordinates to pixels: ```csharp public partial class ShowAffineMatrixPage : ContentPage diff --git a/docs/docs/transforms/non-affine.md b/docs/docs/transforms/non-affine.md index 39cc31572e..896fc19d50 100644 --- a/docs/docs/transforms/non-affine.md +++ b/docs/docs/transforms/non-affine.md @@ -1,13 +1,13 @@ --- title: "Non-Affine Transforms" description: "This article explains how to create perspective and taper effects with the third column of the transform matrix, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 785F4D13-7430-492E-B24E-3B45C560E9F1 author: davidbritch ms.author: dabritch ms.date: 04/14/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Non-Affine Transforms @@ -99,7 +99,7 @@ The **Test Perspective** page allows you to experiment with values of `Persp0` a ```xaml diff --git a/docs/docs/transforms/rotate.md b/docs/docs/transforms/rotate.md index 71ef53196a..7e83a3044d 100644 --- a/docs/docs/transforms/rotate.md +++ b/docs/docs/transforms/rotate.md @@ -1,13 +1,13 @@ --- title: "The Rotate Transform" description: "This article explores the effects and animations possible with the SkiaSharp rotate transform, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: CBB3CD72-4377-4EA3-A768-0C4228229FC2 author: davidbritch ms.author: dabritch ms.date: 03/23/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # The Rotate Transform @@ -249,7 +249,7 @@ void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args) } ``` -The `revolveDegrees` and `rotateDegrees` fields are animated. This program uses a different animation technique based on the Xamarin.Forms [`Animation`](xref:Xamarin.Forms.Animation) class. (This class is described in Chapter 22 of [Free PDF download of *Creating Mobile Apps with Xamarin.Forms*](https://aka.ms/xamformsebook)) The `OnAppearing` override creates two `Animation` objects with callback methods and then calls `Commit` on them for an animation duration: +The `revolveDegrees` and `rotateDegrees` fields are animated. This program uses a different animation technique based on the .NET MAUI [`Animation`](xref:Microsoft.Maui.Controls.Animation) class. The `OnAppearing` override creates two `Animation` objects with callback methods and then calls `Commit` on them for an animation duration: ```csharp protected override void OnAppearing() diff --git a/docs/docs/transforms/scale.md b/docs/docs/transforms/scale.md index 4f47601640..9ce67e8b05 100644 --- a/docs/docs/transforms/scale.md +++ b/docs/docs/transforms/scale.md @@ -1,13 +1,13 @@ --- title: "The Scale Transform" description: "Thhis article explores the SkiaSharp scale transform for scaling objects to various sizes, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: 54A43F3D-9DA8-44A7-9AE4-7E3025129A0B author: davidbritch ms.author: dabritch ms.date: 03/23/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # The Scale Transform diff --git a/docs/docs/transforms/skew.md b/docs/docs/transforms/skew.md index dd107454af..d731067345 100644 --- a/docs/docs/transforms/skew.md +++ b/docs/docs/transforms/skew.md @@ -1,13 +1,13 @@ --- title: "The Skew Transform" description: "This article explains how the skew transform can create tilted graphical objects in SkiaSharp, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: FDD16186-E3B7-4FF6-9BC2-8A2974BFF616 author: davidbritch ms.author: dabritch ms.date: 03/20/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # The Skew Transform @@ -20,7 +20,7 @@ In SkiaSharp, the skew transform tilts graphical objects, such as the shadow in The skew turns a rectangle into a parallelogram, but a skewed ellipse is still an ellipse. -Although Xamarin.Forms defines properties for translation, scaling, and rotations, there is no corresponding property in Xamarin.Forms for skew. +Although .NET MAUI defines properties for translation, scaling, and rotations, there is no corresponding property in .NET MAUI for skew. The [`Skew`](xref:SkiaSharp.SKCanvas.Skew(System.Single,System.Single)) method of `SKCanvas` accepts two arguments for horizontal skew and vertical skew: diff --git a/docs/docs/transforms/touch.md b/docs/docs/transforms/touch.md index 0d81397095..8100805a19 100644 --- a/docs/docs/transforms/touch.md +++ b/docs/docs/transforms/touch.md @@ -1,13 +1,13 @@ --- title: "Touch Manipulations" description: "This article explains how to use matrix transforms to implement touch dragging, pinching, and rotation, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: A0B8DD2D-7392-4EC5-BFB0-6209407AD650 author: davidbritch ms.author: dabritch ms.date: 09/14/2018 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # Touch Manipulations @@ -18,18 +18,18 @@ In multi-touch environments such as those on mobile devices, users often use the ![A bitmap subjected to translation, scaling, and rotation](touch-images/touchmanipulationsexample.png) -All the samples shown here use the Xamarin.Forms touch-tracking effect presented in the article [**Invoking Events from Effects**](~/xamarin-forms/app-fundamentals/effects/touch-tracking.md). +All the samples shown here use the .NET MAUI touch-tracking effect presented in the article [**Invoking Events from Effects**](~/xamarin-forms/app-fundamentals/effects/touch-tracking.md). ## Dragging and Translation One of the most important applications of matrix transforms is touch processing. A single [`SKMatrix`](xref:SkiaSharp.SKMatrix) value can consolidate a series of touch operations. -For single-finger dragging, the `SKMatrix` value performs translation. This is demonstrated in the **Bitmap Dragging** page. The XAML file instantiates an `SKCanvasView` in a Xamarin.Forms `Grid`. A `TouchEffect` object has been added to the `Effects` collection of that `Grid`: +For single-finger dragging, the `SKMatrix` value performs translation. This is demonstrated in the **Bitmap Dragging** page. The XAML file instantiates an `SKCanvasView` in a .NET MAUI `Grid`. A `TouchEffect` object has been added to the `Effects` collection of that `Grid`: ```xaml @@ -87,7 +87,7 @@ public partial class BitmapDraggingPage : ContentPage Without any further code, the `SKMatrix` value is always the identify matrix, and it would have no effect on the display of the bitmap. The goal of the `OnTouchEffectAction` handler set in the XAML file is to alter the matrix value to reflect touch manipulations. -The `OnTouchEffectAction` handler begins by converting the Xamarin.Forms `Point` value into a SkiaSharp `SKPoint` value. This is a simple matter of scaling based on the `Width` and `Height` properties of `SKCanvasView` (which are device-independent units) and the `CanvasSize` property, which is in units of pixels: +The `OnTouchEffectAction` handler begins by converting the .NET MAUI `Point` value into a SkiaSharp `SKPoint` value. This is a simple matter of scaling based on the `Width` and `Height` properties of `SKCanvasView` (which are device-independent units) and the `CanvasSize` property, which is in units of pixels: ```csharp public partial class BitmapDraggingPage : ContentPage @@ -99,7 +99,7 @@ public partial class BitmapDraggingPage : ContentPage ··· void OnTouchEffectAction(object sender, TouchActionEventArgs args) { - // Convert Xamarin.Forms point to pixels + // Convert .NET MAUI point to pixels Point pt = args.Location; SKPoint point = new SKPoint((float)(canvasView.CanvasSize.Width * pt.X / canvasView.Width), @@ -166,7 +166,7 @@ public partial class BitmapScalingPage : ContentPage ··· void OnTouchEffectAction(object sender, TouchActionEventArgs args) { - // Convert Xamarin.Forms point to pixels + // Convert .NET MAUI point to pixels Point pt = args.Location; SKPoint point = new SKPoint((float)(canvasView.CanvasSize.Width * pt.X / canvasView.Width), @@ -278,7 +278,7 @@ public partial class BitmapRotationPage : ContentPage ··· void OnTouchEffectAction(object sender, TouchActionEventArgs args) { - // Convert Xamarin.Forms point to pixels + // Convert .NET MAUI point to pixels Point pt = args.Location; SKPoint point = new SKPoint((float)(canvasView.CanvasSize.Width * pt.X / canvasView.Width), @@ -422,7 +422,7 @@ The [**TouchManipulationPage.xaml**](https://github.com/xamarin/xamarin-forms-sa @@ -1141,7 +1141,7 @@ public partial class SingleFingerCornerScalePage : ContentPage void OnTouchEffectAction(object sender, TouchActionEventArgs args) { - // Convert Xamarin.Forms point to pixels + // Convert .NET MAUI point to pixels Point pt = args.Location; SKPoint point = new SKPoint((float)(canvasView.CanvasSize.Width * pt.X / canvasView.Width), diff --git a/docs/docs/transforms/translate.md b/docs/docs/transforms/translate.md index 63eba5aa9b..7dcf56d23b 100644 --- a/docs/docs/transforms/translate.md +++ b/docs/docs/transforms/translate.md @@ -1,13 +1,13 @@ --- title: "The Translate Transform" -description: "This article examines how to use the translate transform to shift SkiaSharp graphics in Xamarin.Forms applications, and demonstrates this with sample code." -ms.service: xamarin -ms.subservice: xamarin-skiasharp +description: "This article examines how to use the translate transform to shift SkiaSharp graphics in .NET MAUI applications, and demonstrates this with sample code." +ms.service: dotnet-maui +ms.subservice: skiasharp ms.assetid: BD28ADA1-49F9-44E2-A548-46024A29882F author: davidbritch ms.author: dabritch ms.date: 03/10/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- # The Translate Transform @@ -210,7 +210,7 @@ Here's the result: [![Triple screenshot of the Hendecagram Array page](translate-images/hendecagramarray-small.png)](translate-images/hendecagramarray-large.png#lightbox "Triple screenshot of the Hendecagram Array page") -Animations often involve transforms. The **Hendecagram Animation** page moves the 11-pointed star around in a circle. The [`HendecagramAnimationPage`](https://github.com/xamarin/xamarin-forms-samples/blob/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Transforms/HendecagramAnimationPage.cs) class begins with some fields and overrides of the `OnAppearing` and `OnDisappearing` methods to start and stop a Xamarin.Forms timer: +Animations often involve transforms. The **Hendecagram Animation** page moves the 11-pointed star around in a circle. The [`HendecagramAnimationPage`](https://github.com/xamarin/xamarin-forms-samples/blob/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Transforms/HendecagramAnimationPage.cs) class begins with some fields and overrides of the `OnAppearing` and `OnDisappearing` methods to start and stop a .NET MAUI timer: ```csharp public class HendecagramAnimationPage : ContentPage diff --git a/docs/index.md b/docs/index.md index 0b5efcd3fd..0724163789 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,32 +1,32 @@ --- title: "Overview" -description: "SkiaSharp is a 2D graphics system for .NET and C# powered by the open-source Skia graphics engine that is used extensively in Google products. This guide explains how to use SkiaSharp for 2D graphics in your Xamarin.Forms applications." -ms.service: xamarin +description: "SkiaSharp is a 2D graphics system for .NET and C# powered by the open-source Skia graphics engine that is used extensively in Google products. This guide explains how to use SkiaSharp for 2D graphics in your .NET MAUI applications." +ms.service: dotnet-maui ms.assetid: 2C348BEA-81DF-4794-8857-EB1DFF5E11DB author: davidbritch ms.author: dabritch ms.date: 09/11/2017 -no-loc: [Xamarin.Forms, Xamarin.Essentials] +no-loc: [.NET MAUI, Microsoft.Maui] --- -# SkiaSharp Graphics in Xamarin.Forms +# SkiaSharp Graphics in .NET MAUI -_Use SkiaSharp for 2D graphics in your Xamarin.Forms applications_ +_Use SkiaSharp for 2D graphics in your .NET MAUI applications_ -SkiaSharp is a 2D graphics system for .NET and C# powered by the open-source Skia graphics engine that is used extensively in Google products. You can use SkiaSharp in your Xamarin.Forms applications to draw 2D vector graphics, bitmaps, and text. +SkiaSharp is a 2D graphics system for .NET and C# powered by the open-source Skia graphics engine that is used extensively in Google products. You can use SkiaSharp in your .NET MAUI applications to draw 2D vector graphics, bitmaps, and text. -This guide assumes that you are familiar with Xamarin.Forms programming. +This guide assumes that you are familiar with .NET MAUI programming. ## SkiaSharp Preliminaries -SkiaSharp for Xamarin.Forms is packaged as a NuGet package. After you've created a Xamarin.Forms solution in Visual Studio or Visual Studio for Mac, you can use the NuGet package manager to search for the **SkiaSharp.Views.Forms** package and add it to your solution. If you check the **References** section of each project after adding SkiaSharp, you can see that various **SkiaSharp** libraries have been added to each of the projects in the solution. +SkiaSharp for .NET MAUI is packaged as a NuGet package. After you've created a .NET MAUI solution in Visual Studio or Visual Studio for Mac, you can use the NuGet package manager to search for the **SkiaSharp.Views.Maui.Controls** package and add it to your solution. If you check the **References** section of your project after adding SkiaSharp, you can see that various **SkiaSharp** libraries have been added to your project. -If your Xamarin.Forms application targets iOS, edit its **Info.plist** file to change the minimum deployment target to iOS 8.0. +If your .NET MAUI application targets iOS, make sure your project targets iOS 11.0 or later as the minimum deployment target. -In any C# page that uses SkiaSharp you'll want to include a `using` directive for the [`SkiaSharp`](xref:SkiaSharp) namespace, which encompasses all the SkiaSharp classes, structures, and enumerations that you'll use in your graphics programming. You'll also want a `using` directive for the [`SkiaSharp.Views.Forms`](xref:SkiaSharp.Views.Forms) namespace for the classes specific to Xamarin.Forms. This is a much smaller namespace, with the most important class being [`SKCanvasView`](xref:SkiaSharp.Views.Forms.SKCanvasView). This class derives from the Xamarin.Forms `View` class and hosts your SkiaSharp graphics output. +In any C# page that uses SkiaSharp you'll want to include a `using` directive for the [`SkiaSharp`](xref:SkiaSharp) namespace, which encompasses all the SkiaSharp classes, structures, and enumerations that you'll use in your graphics programming. You'll also want a `using` directive for the [`SkiaSharp.Views.Maui.Controls`](xref:SkiaSharp.Views.Maui.Controls) namespace for the classes specific to .NET MAUI. This is a much smaller namespace, with the most important class being [`SKCanvasView`](xref:SkiaSharp.Views.Maui.Controls.SKCanvasView). This class derives from the .NET MAUI `View` class and hosts your SkiaSharp graphics output. > [!IMPORTANT] -> The `SkiaSharp.Views.Forms` namespace also contains an `SKGLView` class that derives from `View` but uses OpenGL for rendering graphics. For purposes of simplicity, this guide restricts itself to `SKCanvasView`, but using `SKGLView` instead is quite similar. +> The `SkiaSharp.Views.Maui.Controls` namespace also contains an `SKGLView` class that derives from `View` but uses OpenGL for rendering graphics. For purposes of simplicity, this guide restricts itself to `SKCanvasView`, but using `SKGLView` instead is quite similar. ## [SkiaSharp Drawing Basics](docs/basics/index.md)