SkiaSharp is the .NET version of Google's Skia graphics engine, providing powerful 2D graphics processing capabilities. This article will provide a detailed introduction on how to use SkiaSharp to draw various rectangles in WinForm applications.

Environment Setup

First, you need to install the following packages through NuGet Package Manager:

• SkiaSharp
• SkiaSharp.Views
• SkiaSharp.Views.WindowsForms

Basic Example

Creating Basic Form

C#
using SkiaSharp;
using SkiaSharp.Views.Desktop;

namespace AppRectangle
{
    public partial class Form1 : Form
    {
        private SKControl skControl;

        public Form1()
        {
            InitializeComponent();

            // Create SKControl control
            skControl = new SKControl();
            skControl.Dock = DockStyle.Fill;
            skControl.PaintSurface += OnPaintSurface;
            this.Controls.Add(skControl);
        }

        // Paint event handler
        private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
        {
            // Get drawing canvas
            SKCanvas canvas = e.Surface.Canvas;

            // Clear canvas (using white background)
            canvas.Clear(SKColors.White);

            // Add drawing code here
            DrawRectangles(canvas);
        }

        private void DrawRectangles(SKCanvas canvas)
        {
            // Create paint brush
            using (var paint = new SKPaint())
            {
                // Enable anti-aliasing  
                paint.IsAntialias = true;

                // 1. Draw basic rectangle
                paint.Color = SKColors.Blue;        // Set color to blue
                paint.Style = SKPaintStyle.Fill;    // Set fill style
                canvas.DrawRect(50, 50, 200, 100, paint);

                // 2. Draw stroked rectangle
                paint.Color = SKColors.Red;         // Set color to red
                paint.Style = SKPaintStyle.Stroke;  // Set to stroke style
                paint.StrokeWidth = 3;             // Set stroke width
                canvas.DrawRect(50, 200, 200, 100, paint);

                // 3. Draw rounded rectangle
                paint.Color = SKColors.Green;       // Set color to green
                paint.Style = SKPaintStyle.Fill;    // Set fill style
                canvas.DrawRoundRect(50, 350, 200, 100, 20, 20, paint);
            }
        }
    }
}

Advanced Examples

Gradient Rectangle

C#
private void DrawGradientRectangle(SKCanvas canvas)
{
    // Create gradient color
    using (var paint = new SKPaint())
    {
        // Enable anti-aliasing  
        paint.IsAntialias = true;

        // Define gradient start and end points
        var shader = SKShader.CreateLinearGradient(
            new SKPoint(300, 50),              // Start point
            new SKPoint(500, 150),             // End point
            new SKColor[] {
        SKColors.Blue,
        SKColors.Red
            },                                 // Gradient colors
            null,                              // Color positions (null means even distribution)
            SKShaderTileMode.Clamp            // Gradient mode
        );

        paint.Shader = shader;
        canvas.DrawRect(300, 50, 200, 100, paint);

        // Draw rounded rectangle
        canvas.DrawRoundRect(300, 200, 200, 100, 20, 20, paint);
    }
}

Rectangle with Shadow

C#
private void DrawShadowRectangle(SKCanvas canvas)
{
    using (var paint = new SKPaint())
    {
        // Enable anti-aliasing  
        paint.IsAntialias = true;

        // Set shadow effect
        paint.ImageFilter = SKImageFilter.CreateDropShadow(
            dx: 5,           // X-axis offset
            dy: 5,           // Y-axis offset
            sigmaX: 5,       // X-axis blur level
            sigmaY: 5,       // Y-axis blur level
            color: SKColors.Gray
        );

        paint.Color = SKColors.LightBlue;
        canvas.DrawRect(300, 200, 200, 100, paint);
    }
}

Rectangle with Border and Fill

C#
private void DrawBorderedRectangle(SKCanvas canvas)
{
    // First draw the fill
    using (var fillPaint = new SKPaint())
    {
        fillPaint.Color = SKColors.Yellow;
        fillPaint.Style = SKPaintStyle.Fill;
        canvas.DrawRect(300, 150, 200, 100, fillPaint);
    }

    // Then draw the border
    using (var strokePaint = new SKPaint())
    {
        strokePaint.Color = SKColors.Orange;
        strokePaint.Style = SKPaintStyle.Stroke;
        strokePaint.StrokeWidth = 4;
        canvas.DrawRect(300, 150, 200, 100, strokePaint);
    }
}

Practical Tips

Coordinate System

SkiaSharp uses the traditional computer graphics coordinate system:

• Origin (0,0) is at the top-left corner
• X-axis is positive to the right
• Y-axis is positive downward

Using SKRect

In addition to directly using coordinates and dimensions, you can also use SKRect objects to define rectangles:

C#
// Use SKRect to define rectangle
SKRect rect = new SKRect(50, 50, 250, 150);  // left, top, right, bottom
canvas.DrawRect(rect, paint);

// Or use SKRectI for integer coordinates
SKRectI rectI = new SKRectI(50, 50, 250, 150);

Performance Optimization Suggestions

• Reuse SKPaint objects instead of creating them frequently
• Use using statements to ensure proper resource disposal
• Avoid creating new objects within drawing loops
• Consider using hardware acceleration

Summary

SkiaSharp provides powerful and flexible rectangle drawing capabilities. By properly using various properties and methods, you can create rich and diverse rectangle effects. In practical applications, it is recommended to choose appropriate drawing methods based on specific requirements and pay attention to performance optimization.