### Install SkiaSharp.Extended NuGet Packages
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Installs the core SkiaSharp.Extended utilities and the optional .NET MAUI controls via the NuGet package manager.
```bash
# Core utilities
dotnet add package SkiaSharp.Extended
# MAUI controls (includes core)
dotnet add package SkiaSharp.Extended.UI.Maui
```
--------------------------------
### Install SkiaSharp.Extended Core Utilities via NuGet
Source: https://mono.github.io/SkiaSharp.Extended
Installs the core utilities for SkiaSharp.Extended, providing image processing, geometry, and path manipulation features.
```bash
dotnet add package SkiaSharp.Extended
```
--------------------------------
### Install SkiaSharp.Extended MAUI Controls via NuGet
Source: https://mono.github.io/SkiaSharp.Extended
Installs the .NET MAUI controls for SkiaSharp.Extended, which includes the core utilities and adds ready-to-use controls for rich visual effects in MAUI applications.
```bash
dotnet add package SkiaSharp.Extended.UI.Maui
```
--------------------------------
### Complete Migration Example: Before (SkiaSharp.Extended.Svg)
Source: https://mono.github.io/SkiaSharp.Extended/docs/svg-migration.html
A complete code example demonstrating how an SVG was loaded and drawn using the deprecated SkiaSharp.Extended.Svg library in a MAUI application. This serves as a baseline for the migration.
```csharp
using SkiaSharp;
using SkiaSharp.Extended.Svg;
using SkiaSharp.Views.Maui;
using SkiaSharp.Views.Maui.Controls;
namespace MyApp
{
public partial class MyPage : ContentPage
{
private SKSvg? svg;
private void LoadSvg()
{
svg = new SKSvg();
using var stream = FileSystem.OpenAppPackageFileAsync("image.svg").Result;
svg.Load(stream);
}
private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
var canvas = e.Surface.Canvas;
canvas.Clear(SKColors.White);
if (svg?.Picture != null)
{
canvas.DrawPicture(svg.Picture);
}
}
}
}
```
--------------------------------
### Perform Mask-Based Image Comparison with SKPixelComparer (C#)
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
This example shows how to perform an image comparison using a tolerance mask with SKPixelComparer. The mask allows for region-specific thresholds, ignoring minor differences defined by the mask's per-channel values, which is useful for handling anti-aliasing or compression artifacts.
```csharp
using var expected = SKImage.FromEncodedData("expected.png");
using var actual = SKImage.FromEncodedData("actual.png");
using var mask = SKImage.FromEncodedData("tolerance-mask.png");
var result = SKPixelComparer.Compare(expected, actual, mask);
```
--------------------------------
### Customize LottieView Rendering Surface with ControlTemplate
Source: https://mono.github.io/SkiaSharp.Extended/docs/lottie.html
Illustrates how to customize the rendering surface of an `SKLottieView` by overriding its `ControlTemplate`. This example shows how to use `SKGLView` for GPU-accelerated rendering, which requires the `PART_DrawingSurface` name. `SKCanvasView` can be used for software rendering.
```xaml
```
--------------------------------
### Define and Interpolate Paths (C#)
Source: https://mono.github.io/SkiaSharp.Extended/docs/path-interpolation.html
Demonstrates how to define start and end paths (a square and a star) and create an SKPathInterpolation object to interpolate between them. It shows how to get a path at a specific point in the transition.
```csharp
using SkiaSharp;
using SkiaSharp.Extended;
// Define your start and end paths
var square = SKGeometry.CreateSquarePath(100);
var star = SKGeometry.CreateRegularStarPath(100, 40, 5);
// Create the interpolation
var interpolation = new SKPathInterpolation(square, star);
// Get paths at any point in the transition (0 to 1)
var halfway = interpolation.Interpolate(0.5f);
```
--------------------------------
### Loading Indicator Path Interpolation (C#)
Source: https://mono.github.io/SkiaSharp.Extended/docs/path-interpolation.html
A C# example demonstrating the use of `SKPathInterpolation` to create a loading indicator animation by morphing between a circle and a square path.
```csharp
// Morph between simple shapes for a loading animation
var circle = new SKPath();
circle.AddCircle(0, 0, 50);
var square = SKGeometry.CreateSquarePath(80);
var loading = new SKPathInterpolation(circle, square);
```
--------------------------------
### Complete Confetti Celebration Example with SKConfettiView
Source: https://mono.github.io/SkiaSharp.Extended/docs/confetti.html
A comprehensive example demonstrating how to add a confetti system to a SKConfettiView for celebratory effects. This includes defining emitter type, bounds, colors, shapes, velocity, and particle lifetime.
```csharp
void CelebrateAchievement()
{
confettiView.Systems.Add(new SKConfettiSystem
{
Emitter = SKConfettiEmitter.Burst(150),
EmitterBounds = SKConfettiEmitterBounds.Center,
Colors = { Colors.Gold, Colors.Orange, Colors.Yellow },
Shapes =
{
new SKConfettiSquareShape(),
new SKConfettiCircleShape()
},
MinimumInitialVelocity = 150,
MaximumInitialVelocity = 350,
Lifetime = 4.0,
FadeOut = true
});
}
```
--------------------------------
### Configure Package Versions for SkiaSharp Compatibility
Source: https://mono.github.io/SkiaSharp.Extended/docs/svg-migration.html
An example of how to specify compatible versions for SkiaSharp, SkiaSharp.Views.Maui.Controls, and Svg.Skia in a project file. This helps resolve package version conflicts during migration.
```xml
```
--------------------------------
### Icon Transition Path Interpolation (C#)
Source: https://mono.github.io/SkiaSharp.Extended/docs/path-interpolation.html
An example in C# showing how `SKPathInterpolation` can be used to create smooth transitions between UI states, such as morphing a 'play' icon to a 'pause' icon based on an animation progress value.
```csharp
// Smooth transition between UI states (play → pause)
var playIcon = CreatePlayIconPath();
var pauseIcon = CreatePauseIconPath();
var transition = new SKPathInterpolation(playIcon, pauseIcon);
var currentIcon = transition.Interpolate(animationProgress);
```
--------------------------------
### Visual Regression Test with SkiaSharp
Source: https://mono.github.io/SkiaSharp.Extended/docs/pixel-comparer.html
Example of using SkiaSharp's Pixel Comparer within a unit test to perform visual regression testing. It asserts that the rendered chart matches a baseline image by checking for zero differing pixels.
```csharp
[Fact]
public void ChartRendering_MatchesBaseline()
{
using var actual = RenderChart(testData);
using var expected = SKImage.FromEncodedData("baselines/chart.png");
var result = SKPixelComparer.Compare(expected, actual);
Assert.Equal(0, result.ErrorPixelCount);
}
```
--------------------------------
### Load and Draw SVG in MAUI with Svg.Skia (C#)
Source: https://mono.github.io/SkiaSharp.Extended/docs/svg-migration.html
Demonstrates how to load an SVG file from the application package and draw it onto a canvas in a MAUI application using the Svg.Skia library. This code assumes the necessary Svg.Skia and SkiaSharp packages are installed and configured.
```csharp
using SkiaSharp;
using Svg.Skia; // Changed this line
using SkiaSharp.Views.Maui;
using SkiaSharp.Views.Maui.Controls;
namespace MyApp
{
public partial class MyPage : ContentPage
{
private SKSvg? svg;
private void LoadSvg()
{
svg = new SKSvg();
using var stream = FileSystem.OpenAppPackageFileAsync("image.svg").Result;
svg.Load(stream); // Same API!
}
private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
var canvas = e.Surface.Canvas;
canvas.Clear(SKColors.White);
if (svg?.Picture != null)
{
canvas.DrawPicture(svg.Picture); // Same API!
}
}
}
}
```
--------------------------------
### Compare Image Inputs with SkiaSharp
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Demonstrates the flexibility of SkiaSharp's comparison methods by accepting various input types such as file paths, SKImage, SKBitmap, and SKPixmap. This allows for convenient image comparison in different scenarios.
```csharp
using SkiaSharp;
// Example usage with different input types:
var result = SKPixelComparer.Compare("a.png", "b.png");
var result = SKPixelComparer.Compare(imageA, imageB);
var result = SKPixelComparer.Compare(bitmapA, bitmapB);
var result = SKPixelComparer.Compare(pixmapA, pixmapB);
```
--------------------------------
### Migrate SkiaSharp.Extended.Svg to Svg.Skia
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Demonstrates the command-line steps to remove the deprecated SkiaSharp.Extended.Svg NuGet package and add the actively maintained Svg.Skia package.
```bash
# Remove the old package
dotnet remove package SkiaSharp.Extended.Svg
# Add Svg.Skia
dotnet add package Svg.Skia
```
--------------------------------
### Create Regular Star Path using SKGeometry
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Demonstrates how to generate an SKPath representing a regular star using the SKGeometry helper class. This method simplifies the creation of complex shapes by abstracting the path calculations.
```csharp
using SkiaSharp;
using SkiaSharp.Extended;
// Create a 5-pointed star
var starPath = SKGeometry.CreateRegularStarPath(
outerRadius: 100,
innerRadius: 40,
points: 5);
// Draw it on a canvas
canvas.DrawPath(starPath, paint);
```
--------------------------------
### Confetti Emitter Patterns (C#)
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Illustrates different emitter patterns for SKConfettiView in .NET MAUI, including instant bursts, continuous streams, and infinite emissions, along with their parameters for particle count and duration.
```csharp
// Instant explosion - all particles at once
Emitter = SKConfettiEmitter.Burst(100);
// Continuous stream - 50 particles per second, for 3 seconds
Emitter = SKConfettiEmitter.Stream(50, 3);
// Infinite - 30 particles per second, forever
Emitter = SKConfettiEmitter.Infinite(30);
```
--------------------------------
### Create Regular Stars with SkiaSharp
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Generates paths for regular stars with a specified number of points, outer radius, and inner radius. The inner radius determines the 'pointiness' of the star.
```csharp
// Classic 5-pointed star
var star5 = SKGeometry.CreateRegularStarPath(
outerRadius: 50,
innerRadius: 20,
points: 5);
// Star of David (6-pointed)
var star6 = SKGeometry.CreateRegularStarPath(
outerRadius: 50,
innerRadius: 30,
points: 6);
```
--------------------------------
### Pre-calculate for Performance (C#)
Source: https://mono.github.io/SkiaSharp.Extended/docs/path-interpolation.html
Shows how to use the `Prepare()` method on an `SKPathInterpolation` object to pre-calculate point mappings. This optimization makes subsequent `Interpolate()` calls faster, which is beneficial for performance-critical animations.
```csharp
var interpolation = new SKPathInterpolation(from, to);
interpolation.Prepare(); // Pre-calculate point mappings
// Now Interpolate() calls are faster
for (float t = 0; t <= 1; t += 0.1f)
{
var path = interpolation.Interpolate(t);
}
```
--------------------------------
### Offsetting a Centered Path in C#
Source: https://mono.github.io/SkiaSharp.Extended/docs/geometry.html
Demonstrates how to create a regular star path centered at the origin and then offset it to a specific (centerX, centerY) position using the `Offset` method before drawing. This is a common pattern for positioning geometric shapes.
```csharp
var path = SKGeometry.CreateRegularStarPath(50, 20, 5);
path.Offset(centerX, centerY);
canvas.DrawPath(path, paint);
```
--------------------------------
### Handle Lottie Animation Lifecycle Events
Source: https://mono.github.io/SkiaSharp.Extended/docs/lottie.html
Shows how to subscribe to and handle key events during the Lottie animation lifecycle. This includes `AnimationLoaded` for when an animation is successfully loaded, `AnimationFailed` for when loading fails, and `AnimationCompleted` for when a finite animation finishes playing. Note that `AnimationCompleted` does not fire for infinite loops.
```csharp
lottieView.AnimationLoaded += (s, e) =>
{
Console.WriteLine($"Loaded! Duration: {lottieView.Duration}");
};
lottieView.AnimationFailed += (s, e) =>
{
Console.WriteLine("Failed to load animation");
};
lottieView.AnimationCompleted += (s, e) =>
{
Console.WriteLine("Animation finished playing");
};
```
--------------------------------
### Confetti Emitter Bounds (C#)
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Demonstrates various emitter bounds configurations for SKConfettiView in .NET MAUI, specifying where particles originate from, such as the center, top edge, a specific point, or both sides.
```csharp
// From the center of the view
EmitterBounds = SKConfettiEmitterBounds.Center;
// From the top edge (falling down)
EmitterBounds = SKConfettiEmitterBounds.Top;
// From a specific point
EmitterBounds = SKConfettiEmitterBounds.Point(100, 200);
// From both sides
confettiView.Systems.Add(new SKConfettiSystem { EmitterBounds = SKConfettiEmitterBounds.Left });
confettiView.Systems.Add(new SKConfettiSystem { EmitterBounds = SKConfettiEmitterBounds.Right });
```
--------------------------------
### Control Lottie Animation Playback Programmatically
Source: https://mono.github.io/SkiaSharp.Extended/docs/lottie.html
Demonstrates how to control the playback of a Lottie animation using the `IsAnimationEnabled` and `Progress` properties. It also shows how to check if the animation has completed using the `IsComplete` property. These methods allow for dynamic control over the animation's state.
```csharp
// Pause the animation
lottieView.IsAnimationEnabled = false;
// Resume
lottieView.IsAnimationEnabled = true;
// Jump to specific progress
lottieView.Progress = TimeSpan.FromSeconds(1.5);
// Check if complete
if (lottieView.IsComplete)
{
// Animation finished
}
```
--------------------------------
### SKPixelComparisonResult Class
Source: https://mono.github.io/SkiaSharp.Extended/api/SkiaSharp.Extended.html
Holds the results of a pixel-by-pixel image comparison.
```APIDOC
## SKPixelComparisonResult Class
### Description
Holds the results of a pixel-by-pixel image comparison.
### Method
N/A (Class Documentation)
### Endpoint
N/A
### Parameters
N/A
### Request Example
N/A
### Response
N/A
#### Success Response (200)
N/A
#### Response Example
N/A
```
--------------------------------
### Generate Regular Polygon Paths with SKGeometry
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Shows how to create SKPath objects for regular polygons using the SKGeometry helper. This method allows for the generation of polygons with any number of sides by specifying the radius and the number of points.
```csharp
// Pentagon (5 sides)
var pentagon = SKGeometry.CreateRegularPolygonPath(radius: 50, points: 5);
// Hexagon (6 sides)
var hexagon = SKGeometry.CreateRegularPolygonPath(radius: 50, points: 6);
// Octagon (8 sides)
var octagon = SKGeometry.CreateRegularPolygonPath(radius: 50, points: 8);
```
--------------------------------
### Load Lottie Animations from Different Sources
Source: https://mono.github.io/SkiaSharp.Extended/docs/lottie.html
This section shows how to load Lottie animations into an SKLottieView from various sources programmatically. It covers loading from application resources (recommended), a URL, and a stream.
```csharp
// From app resources (recommended)
lottieView.Source = new SKFileLottieImageSource { File = "animation.json" };
// From a URL
lottieView.Source = new SKUriLottieImageSource { Uri = new Uri("https://...") };
// From a stream
lottieView.Source = new SKStreamLottieImageSource { Stream = myStream };
```
--------------------------------
### Adjust Image Contrast with Punch Parameter (C#)
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Demonstrates how to use the 'punch' parameter in SKBlurHash.DeserializeBitmap to adjust the contrast of a decoded image. Higher values increase vibrancy. Requires the SkiaSharp.Extended library.
```csharp
// Default punch (1.0)
var normal = SKBlurHash.DeserializeBitmap(hash, 32, 32);
// More vibrant (1.5)
var vibrant = SKBlurHash.DeserializeBitmap(hash, 32, 32, punch: 1.5f);
```
--------------------------------
### SKPixelComparer Class
Source: https://mono.github.io/SkiaSharp.Extended/api/SkiaSharp.Extended.html
Provides methods for pixel-by-pixel comparison of images.
```APIDOC
## SKPixelComparer Class
### Description
Provides methods for pixel-by-pixel comparison of images.
### Method
N/A (Class Documentation)
### Endpoint
N/A
### Parameters
N/A
### Request Example
N/A
### Response
N/A
#### Success Response (200)
N/A
#### Response Example
N/A
```
--------------------------------
### Resolve MissingMethodException with Svg.Skia Migration
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Explains that the `System.MissingMethodException: Method not found: SkiaSharp.SKMatrix SkiaSharp.SKMatrix.MakeTranslation(single,single)` error is resolved by migrating from `SkiaSharp.Extended.Svg` to `Svg.Skia` due to compatibility issues with modern SkiaSharp versions.
```text
System.MissingMethodException: Method not found:
SkiaSharp.SKMatrix SkiaSharp.SKMatrix.MakeTranslation(single,single)
Solution: Migrate to Svg.Skia as described above.
```
--------------------------------
### MAUI BlurHash Value Converter Usage (XAML)
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Demonstrates how to use the custom BlurHashConverter in .NET MAUI XAML to bind a blur hash string to an Image control's Source property.
```xml
```
--------------------------------
### Compare Images Pixel by Pixel using SKPixelComparer (C#)
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
The SKPixelComparer.Compare method allows for a detailed pixel-by-pixel comparison of two images, returning a result object that quantifies the differences. This is useful for automated visual regression testing and verifying rendering accuracy.
```csharp
using SkiaSharp;
using SkiaSharp.Extended;
var result = SKPixelComparer.Compare("expected.png", "actual.png");
Console.WriteLine($"Total pixels: {result.TotalPixels}");
Console.WriteLine($"Error pixels: {result.ErrorPixelCount}");
Console.WriteLine($"Error percentage: {result.ErrorPixelPercentage:P2}");
Console.WriteLine($"Absolute error: {result.AbsoluteError}");
```
--------------------------------
### CI Screenshot Comparison with Tolerance using SkiaSharp
Source: https://mono.github.io/SkiaSharp.Extended/docs/pixel-comparer.html
Demonstrates comparing screenshots in a CI environment with a tolerance for minor differences. This test allows up to 0.5% pixel difference, suitable for tests with potential platform-specific variations.
```csharp
[Fact]
public void UI_MatchesBaseline_WithTolerance()
{
using var actual = CaptureScreenshot();
using var expected = SKImage.FromEncodedData("baselines/screen.png");
var result = SKPixelComparer.Compare(expected, actual);
// Allow up to 0.5% pixel difference
Assert.True(result.ErrorPixelPercentage < 0.005,
$"Too many differing pixels: {result.ErrorPixelPercentage:P2}");
}
```
--------------------------------
### Custom Confetti Colors in MAUI (C#)
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Shows how to define a custom color palette for confetti particles in .NET MAUI using SKConfettiSystem. Colors can be specified programmatically.
```csharp
// Custom color palette
var system = new SKConfettiSystem
{
Colors = { Colors.Red, Colors.Gold, Colors.Blue, Colors.Green }
};
```
--------------------------------
### Theme Management with Local Storage
Source: https://mono.github.io/SkiaSharp.Extended
Manages website theme settings using local storage. It retrieves the current theme, applies it to the document's data-bs-theme attribute, and checks for dark mode preference if the theme is set to 'auto'.
```javascript
const theme = localStorage.getItem('theme') || 'auto'
document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme)
```
--------------------------------
### Geometric Utility Methods in SkiaSharp.Extended
Source: https://mono.github.io/SkiaSharp.Extended/docs/geometry.html
Showcases utility methods available in the SKGeometry class for performing common geometric calculations. This includes finding a point on a circle, calculating polygon area and perimeter, and interpolating points along a line segment.
```csharp
using SkiaSharp;
using SkiaSharp.Extended;
// Get a point on a circle
var point = SKGeometry.CirclePoint(radius: 100, radians: Math.PI / 4);
// Calculate polygon area
var points = new[] { new SKPoint(0, 0), new SKPoint(100, 0), new SKPoint(50, 100) };
var area = SKGeometry.Area(points);
// Calculate polygon perimeter
// var perimeter = SKGeometry.Perimeter(points);
// Get a point along a line between two points
// var startPoint = new SKPoint(0, 0);
// var endPoint = new SKPoint(100, 100);
// var midPoint = SKGeometry.PointAlong(startPoint, endPoint, 0.5f);
```
--------------------------------
### Configure Confetti Emitter Patterns | SkiaSharp.Extended
Source: https://mono.github.io/SkiaSharp.Extended/docs/confetti.html
Illustrates different ways to configure the SKConfettiEmitter for various emission patterns, including instant bursts, continuous streams, and infinite emissions. It also shows how to define the particle emission area using EmitterBounds.
```C#
// Instant explosion - all particles at once
Emitter = SKConfettiEmitter.Burst(100);
// Continuous stream - 50 particles per second, for 3 seconds
Emitter = SKConfettiEmitter.Stream(50, 3);
// Infinite - 30 particles per second, forever
Emitter = SKConfettiEmitter.Infinite(30);
```
```C#
// From the center of the view
EmitterBounds = SKConfettiEmitterBounds.Center;
// From the top edge (falling down)
EmitterBounds = SKConfettiEmitterBounds.Top;
// From a specific point
EmitterBounds = SKConfettiEmitterBounds.Point(100, 200);
// From both sides
confettiView.Systems.Add(new SKConfettiSystem { EmitterBounds = SKConfettiEmitterBounds.Left });
confettiView.Systems.Add(new SKConfettiSystem { EmitterBounds = SKConfettiEmitterBounds.Right });
```
--------------------------------
### Load SVG from Stream using Svg.Skia
Source: https://mono.github.io/SkiaSharp.Extended/docs/svg-migration.html
Illustrates how to load an SVG resource from a stream using the Svg.Skia library. The code is identical to the old SkiaSharp.Extended.Svg method, highlighting API similarity.
```csharp
var svg = new SKSvg();
using (var stream = GetType().Assembly.GetManifestResourceStream(resourceId))
{
if (stream != null)
{
svg.Load(stream);
}
}
```
--------------------------------
### Create Geometric Paths with SkiaSharp.Extended
Source: https://mono.github.io/SkiaSharp.Extended/docs/geometry.html
Demonstrates how to create various geometric shapes such as stars, regular polygons, and triangles using the SKGeometry class in SkiaSharp.Extended. These methods return SKPath objects that can be drawn on a canvas.
```csharp
using SkiaSharp;
using SkiaSharp.Extended;
// Create a 5-pointed star
var starPath = SKGeometry.CreateRegularStarPath(
outerRadius: 100,
innerRadius: 40,
points: 5);
// Draw it on a canvas
// canvas.DrawPath(starPath, paint);
// Pentagon (5 sides)
var pentagon = SKGeometry.CreateRegularPolygonPath(radius: 50, points: 5);
// Hexagon (6 sides)
var hexagon = SKGeometry.CreateRegularPolygonPath(radius: 50, points: 6);
// Octagon (8 sides)
var octagon = SKGeometry.CreateRegularPolygonPath(radius: 50, points: 8);
// Classic 5-pointed star
var star5 = SKGeometry.CreateRegularStarPath(
outerRadius: 50,
innerRadius: 20,
points: 5);
// Star of David (6-pointed)
var star6 = SKGeometry.CreateRegularStarPath(
outerRadius: 50,
innerRadius: 30,
points: 6);
```
--------------------------------
### Control Path Direction with SkiaSharp
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Demonstrates how to specify the winding order (Clockwise or Counter-Clockwise) when creating paths using SKGeometry methods. This is important for path operations like combining shapes or creating holes.
```csharp
// Clockwise (default)
var cwPath = SKGeometry.CreateSquarePath(50, SKPathDirection.Clockwise);
// Counter-clockwise
var ccwPath = SKGeometry.CreateSquarePath(50, SKPathDirection.CounterClockwise);
```
--------------------------------
### SKGeometry Class
Source: https://mono.github.io/SkiaSharp.Extended/api/SkiaSharp.Extended.html
Provides geometry utility methods for creating paths, calculating polygon properties, and interpolating between paths.
```APIDOC
## SKGeometry Class
### Description
Provides geometry utility methods for creating paths, calculating polygon properties, and interpolating between paths.
### Method
N/A (Class Documentation)
### Endpoint
N/A
### Parameters
N/A
### Request Example
N/A
### Response
N/A
#### Success Response (200)
N/A
#### Response Example
N/A
```
--------------------------------
### SKBlurHash Class
Source: https://mono.github.io/SkiaSharp.Extended/api/SkiaSharp.Extended.html
Provides methods to encode and decode BlurHash strings, a compact representation of image placeholders.
```APIDOC
## SKBlurHash Class
### Description
Provides methods to encode and decode BlurHash strings, a compact representation of image placeholders.
### Method
N/A (Class Documentation)
### Endpoint
N/A
### Parameters
N/A
### Request Example
N/A
### Response
N/A
#### Success Response (200)
N/A
#### Response Example
N/A
```
--------------------------------
### Manage NuGet Packages for SVG Migration
Source: https://mono.github.io/SkiaSharp.Extended/docs/svg-migration.html
Commands to remove the deprecated SkiaSharp.Extended.Svg package and add the recommended Svg.Skia package using the .NET CLI. This is the first step in migrating your project.
```bash
dotnet remove package SkiaSharp.Extended.Svg
dotnet add package Svg.Skia
```
--------------------------------
### Update Namespace for SVG Handling
Source: https://mono.github.io/SkiaSharp.Extended/docs/svg-migration.html
Demonstrates the necessary change in using statements when migrating from SkiaSharp.Extended.Svg to Svg.Skia. This involves replacing the old namespace with the new one to access the Svg.Skia functionalities.
```csharp
// OLD - Remove this
using SkiaSharp.Extended.Svg;
// NEW - Add this
using Svg.Skia;
```
--------------------------------
### Animate Morphing Shapes (C#)
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Implement a class to animate shape morphing by updating a progress value over time and reversing direction at the ends of the transition. The Draw method uses the interpolated path for rendering.
```csharp
public class MorphingShape
{
private readonly SKPathInterpolation interpolation;
private float progress = 0f;
private float direction = 1f;
public MorphingShape(SKPath from, SKPath to)
{
interpolation = new SKPathInterpolation(from, to);
}
public void Update(float deltaTime)
{
progress += deltaTime * direction;
if (progress >= 1f || progress <= 0f)
direction *= -1; // Reverse at ends
}
public void Draw(SKCanvas canvas, SKPaint paint)
{
var path = interpolation.Interpolate(progress);
canvas.DrawPath(path, paint);
}
}
```
--------------------------------
### MAUI Blur Hash Value Converter (C#)
Source: https://mono.github.io/SkiaSharp.Extended/docs/blurhash.html
A value converter for MAUI applications that decodes a Blur Hash string into an SKBitmapImageSource. This allows direct binding of Blur Hash strings to Image controls in XAML. The converter can be configured with default width and height for the placeholder.
```csharp
using System.Globalization;
using SkiaSharp;
using SkiaSharp.Extended;
using SkiaSharp.Views.Maui.Controls;
public class BlurHashConverter : IValueConverter
{
public int Width { get; set; } = 32;
public int Height { get; set; } = 32;
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
if (value is string hash && !string.IsNullOrEmpty(hash))
{
var bitmap = SKBlurHash.DeserializeBitmap(hash, Width, Height);
return (SKBitmapImageSource)bitmap;
}
return null;
}
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
=> throw new NotImplementedException();
}
```
--------------------------------
### Include BlurHash in API Responses (JSON)
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Shows a common pattern for including pre-computed blur hashes in API responses alongside image URLs and dimensions. This allows clients to display a blurred placeholder while the full image loads.
```json
{
"imageUrl": "https://example.com/photo.jpg",
"blurHash": "LjPsbRxG%gx^aJxuM|W=?^X8Mxn$",
"width": 1920,
"height": 1080
}
```
--------------------------------
### Register SkiaSharp Handler in .NET MAUI
Source: https://mono.github.io/SkiaSharp.Extended
Registers the SkiaSharp handler within a .NET MAUI application's builder. This is a necessary step to enable SkiaSharp functionality in MAUI projects.
```csharp
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp()
.UseSkiaSharp(); // Add this line
return builder.Build();
}
```
--------------------------------
### Add SKLottieView to XAML
Source: https://mono.github.io/SkiaSharp.Extended/docs/lottie.html
This snippet demonstrates how to add the SKLottieView control to your XAML markup. It requires referencing the SkiaSharp.Extended.UI.Maui namespace and sets the source file, repeat count, and dimensions for the animation.
```xml
```
--------------------------------
### Encode Image to Blur Hash (C#)
Source: https://mono.github.io/SkiaSharp.Extended/docs/blurhash.html
Encodes an image into a compact Blur Hash string using SkiaSharp. The function takes an SKBitmap and the desired number of components for X and Y axes. It returns a string representing the Blur Hash.
```csharp
using SkiaSharp;
using SkiaSharp.Extended;
using var bitmap = SKBitmap.Decode("photo.jpg");
string hash = SKBlurHash.Serialize(bitmap, 4, 3);
// Returns something like: "LjPsbRxG%gx^aJxuM|W=?^X8Mxn$"
```
--------------------------------
### Custom Confetti Colors in MAUI (XAML)
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Demonstrates how to set custom colors for confetti particles directly in XAML for SKConfettiSystem in .NET MAUI. Colors are provided as a comma-separated string.
```xml
```
--------------------------------
### Compare Two Images with SkiaSharp
Source: https://mono.github.io/SkiaSharp.Extended/docs/pixel-comparer.html
Compares two image files and returns a result object containing the total pixels, error pixel count, error percentage, and absolute error. This is useful for automated visual regression testing.
```csharp
using SkiaSharp;
using SkiaSharp.Extended;
var result = SKPixelComparer.Compare("expected.png", "actual.png");
Console.WriteLine($"Total pixels: {result.TotalPixels}");
Console.WriteLine($"Error pixels: {result.ErrorPixelCount}");
Console.WriteLine($"Error percentage: {result.ErrorPixelPercentage:P2}");
Console.WriteLine($"Absolute error: {result.AbsoluteError}");
```
--------------------------------
### Draw Shapes Directly on Canvas with SkiaSharp Extensions
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Provides convenient extension methods for the SKCanvas object to draw common shapes like squares, triangles, regular polygons, and stars directly without explicitly creating SKPath objects. Requires SkiaSharp and SkiaSharp.Extended namespaces.
```csharp
using SkiaSharp;
using SkiaSharp.Extended;
// Square
canvas.DrawSquare(cx: 50, cy: 50, side: 40, paint);
// Triangle (by radius)
canvas.DrawTriangle(cx: 150, cy: 50, radius: 30, paint);
// Regular polygon
canvas.DrawRegularPolygon(cx: 250, cy: 50, radius: 30, points: 6, paint);
// Star
canvas.DrawStar(cx: 350, cy: 50, outerRadius: 30, innerRadius: 12, points: 5, paint);
```
--------------------------------
### SKGeometryExtensions Class
Source: https://mono.github.io/SkiaSharp.Extended/api/SkiaSharp.Extended.html
Provides extension methods on SKCanvas for drawing geometric shapes centered at a given point.
```APIDOC
## SKGeometryExtensions Class
### Description
Provides extension methods on [SKCanvas](https://learn.microsoft.com/dotnet/api/skiasharp.skcanvas) for drawing geometric shapes centered at a given point.
### Method
N/A (Class Documentation)
### Endpoint
N/A
### Parameters
N/A
### Request Example
N/A
### Response
N/A
#### Success Response (200)
N/A
#### Response Example
N/A
```
--------------------------------
### Draw Shapes Directly on Canvas using Extension Methods
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Illustrates the use of SkiaSharp.Extended canvas extension methods to draw various geometric shapes directly onto a canvas. This provides a convenient way to render shapes without manually creating SKPath objects.
```csharp
// Draw shapes directly on a canvas
canvas.DrawStar(100, 100, outerRadius: 50, innerRadius: 20, points: 5, paint);
canvas.DrawRegularPolygon(200, 100, radius: 40, points: 6, paint);
canvas.DrawTriangle(300, 100, radius: 40, paint);
```
--------------------------------
### Handle URL Search Parameters in Blazor (JavaScript)
Source: https://mono.github.io/SkiaSharp.Extended/sample
This JavaScript code modifies the browser's URL to correctly decode and reformat search parameters. It specifically targets parameters containing '~and~' and replaces them with '&'. This ensures proper parsing of query strings within the Blazor application.
```javascript
function (l) { if (l.search[1] === '/') { var decoded = l.search.slice(1).split('&').map(function (s) { return s.replace(/~and~/g, '&'); }).join('?'); window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash); } }(window.location)
```
--------------------------------
### Decode Blur Hash String to Bitmap
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Decodes a Blur Hash string into a SKBitmap with specified width and height. This generated bitmap can be used as a blurred placeholder while the original image loads.
```csharp
var placeholder = SKBlurHash.DeserializeBitmap(hash, 32, 32);
// Use this blurred bitmap while the real image loads
```
--------------------------------
### Decode Blur Hash to Bitmap (C#)
Source: https://mono.github.io/SkiaSharp.Extended/docs/blurhash.html
Decodes a Blur Hash string into a blurred SKBitmap. This is useful for creating image placeholders. You can specify the desired width and height of the placeholder and adjust its contrast using the 'punch' parameter.
```csharp
var placeholder = SKBlurHash.DeserializeBitmap(hash, 32, 32);
// Use this blurred bitmap while the real image loads
```
```csharp
// Default punch (1.0)
var normal = SKBlurHash.DeserializeBitmap(hash, 32, 32);
// More vibrant (1.5)
var vibrant = SKBlurHash.DeserializeBitmap(hash, 32, 32, punch: 1.5f);
```
--------------------------------
### Draw SVG on Canvas with Svg.Skia
Source: https://mono.github.io/SkiaSharp.Extended/llms-full.txt
Demonstrates how to draw an SVG picture onto a SkiaSharp canvas using the Svg.Skia library. It includes calculating the appropriate scaling matrix to fit the SVG within the canvas dimensions.
```csharp
using SkiaSharp;
using Svg.Skia;
// Drawing the SVG picture
if (svg?.Picture != null)
{
canvas.Clear(SKColors.White);
// Calculate scaling to fit canvas
var canvasMin = Math.Min(width, height);
var svgMax = Math.Max(svg.Picture.CullRect.Width, svg.Picture.CullRect.Height);
var scale = canvasMin / svgMax;
var matrix = SKMatrix.CreateScale(scale, scale);
canvas.DrawPicture(svg.Picture, matrix);
}
```
--------------------------------
### Save Difference Mask on Comparison Failure (C#)
Source: https://mono.github.io/SkiaSharp.Extended/docs/pixel-comparer.html
This code snippet demonstrates how to generate and save a difference mask as a PNG file when a pixel comparison results in an error. It utilizes SKPixelComparer.GenerateDifferenceMask and encodes the resulting SKBitmap to a PNG format before saving it to disk. This is useful for visually inspecting the differences between two images.
```csharp
if (result.ErrorPixelCount > 0)
{
using var diffMask = SKPixelComparer.GenerateDifferenceMask(expected, actual);
using var encoded = diffMask.Encode(SKEncodedImageFormat.Png, 100);
File.WriteAllBytes("test-output/diff-mask.png", encoded.ToArray());
}
```