当前位置：网站首页>Skiasharp's WPF self drawn bouncing ball (case version)

Skiasharp's WPF self drawn bouncing ball (case version)

2022-07-26 23:57:00 【Lanchuang elite team】

Familiar with SkiaSharp Basic operation of , Make a bouncing ball effect this time , After implementation , Found that the effect is really good .

The general effect is as follows :

Principle analysis

First, the grid effect is realized , This is simpler , Direct horizontal line , A vertical bar , Just OK 了 .

The other is a random circle , I have a hundred randomly , The initial position is roughly the same , however , The angle in each direction is random , The color is random , The movement speed is random .

then , They move , It will automatically rebound back when it meets the wall , Formed a good visual effect .

Wpf and SkiaSharp

Create a new one WPF project , then ,Nuget Bag can
You want to add Nuget package

Install-Package SkiaSharp.Views.WPF -Version 2.88.0

The core logic is this part , It will be set by me 60FPS To refresh the current palette .

skContainer.PaintSurface += SkContainer_PaintSurface;
_ = Task.Run(() =>
{
    
    while (true)
    {
    
        try
        {
    
            Dispatcher.Invoke(() =>
            {
    
                skContainer.InvalidateVisual();
            });
            _ = SpinWait.SpinUntil(() => false, 1000 / 60);// Per second 60 frame 
        }
        catch
        {
    
            break;
        }
    }
});

Realize the circular logic of the code

/// <summary>
///  circle 
/// </summary>
internal class Circles
{
    
    private Random r = new Random();
    public Circles()
    {
    
        VelocityX = GetRandom(0, 3);
        VelocityY = GetRandom(0, 3);
        Radius = GetRandom(0, 50);
        Color = new SKColor((byte)r.Next(0, 255), (byte)r.Next(0, 255), (byte)r.Next(0, 255));
    }
    public float X {
     get; set; } = 100;
    public float Y {
     get; set; } = 100;
    public float VelocityX {
     get; set; }
    public float VelocityY {
     get; set; }
    public float Radius {
     get; set; }
    public SKColor Color {
     get; set; }

    public float GetRandom(int min, int max)
    {
    
        var result = r.Next(min * 100, max * 100);
        return (float)(result / 100.0);
    }
}

Circular movement logic

/// <summary>
///  Adjusting position 
/// </summary>
public void AdjustPosition(SKCanvas canvas, SKTypeface Font, int Width, int Height)
{
    
    foreach (var circle in circles)
    {
    
        using var paint = new SKPaint
        {
    
            Color = circle.Color,
            Style = SKPaintStyle.Fill,
            IsAntialias = true,
            StrokeWidth = 1
        };
        canvas.DrawCircle(circle.X, circle.Y, circle.Radius, paint);

        if (circle.X + circle.VelocityX + circle.Radius > Width || circle.X + circle.VelocityX - circle.Radius < 0)
        {
    
            circle.VelocityX = -circle.VelocityX;
        }
        if (circle.Y + circle.VelocityY + circle.Radius > Height || circle.Y + circle.VelocityY - circle.Radius < 0)
        {
    
            circle.VelocityY = -circle.VelocityY;
        }
        circle.X += circle.VelocityX;
        circle.Y += circle.VelocityY;
    }
}

Implement the logic of grid

/// <summary>
///  Draw a grid 
/// </summary>
public void DrawGrid(SKCanvas canvas, SKColor sKColor, int Width, int Height, int StepX, int StepY)
{
    
    using var paint = new SKPaint
    {
    
        Color = sKColor,
        Style = SKPaintStyle.Stroke,
        StrokeWidth = 0.5f,
        IsStroke = true,
        IsAntialias = true
    };
    for (var i = 0.5; i < Width; i += StepX)
    {
    
        var path = new SKPath();
        path.MoveTo((float)i, 0);
        path.LineTo((float)i, Height);
        path.Close();
        canvas.DrawPath(path, paint);
    }
    for (var i = 0.5; i < Height; i += StepY)
    {
    
        var path = new SKPath();
        path.MoveTo(0, (float)i);
        path.LineTo(Width, (float)i);
        path.Close();
        canvas.DrawPath(path, paint);
    }
}
}