### 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()); } ```