Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions docs/docs/basics/animation.md
Original file line number Diff line number Diff line change
@@ -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
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
xmlns:skia="clr-namespace:SkiaSharp.Views.Maui.Controls;assembly=SkiaSharp.Views.Maui.Controls"
x:Class="SkiaSharpFormsDemos.PulsatingEllipsePage"
Title="Pulsating Ellipse">
<Grid>
Expand Down Expand Up @@ -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
Expand Down
10 changes: 5 additions & 5 deletions docs/docs/basics/bitmaps.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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.

Expand Down
26 changes: 13 additions & 13 deletions docs/docs/basics/circle.md
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -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()
Expand All @@ -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:

Expand All @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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 &mdash; or one-quarter of the radius of the circle &mdash; 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 &mdash; 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

Expand Down
16 changes: 8 additions & 8 deletions docs/docs/basics/index.md
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
---
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.

## [Drawing a Simple Circle](circle.md)

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)

Expand Down
Loading
Loading