SkiaSharp 之 WPF 自繪 粒子花園(案例版)

来源:https://www.cnblogs.com/kesshei/archive/2022/08/04/16548913.html
-Advertisement-
Play Games

此案例包含了簡單的碰撞檢測,圓形碰撞檢測方法,也可以說是五環彈球的升級版,具體可以根據例子參考。 粒子花園 這名字是案例的名字,效果更加具有科技感,很是不錯,搞搞做成背景特效也是不錯的選擇。 Wpf 和 SkiaSharp 新建一個 WPF 項目,然後,Nuget 包即可 要添加 Nuget 包 I ...


此案例包含了簡單的碰撞檢測,圓形碰撞檢測方法,也可以說是五環彈球的升級版,具體可以根據例子參考。

粒子花園

這名字是案例的名字,效果更加具有科技感,很是不錯,搞搞做成背景特效也是不錯的選擇。

Wpf 和 SkiaSharp

新建一個 WPF 項目,然後,Nuget 包即可
要添加 Nuget 包

Install-Package SkiaSharp.Views.WPF -Version 2.88.0

其中核心邏輯是這部分,會以我設置的 60FPS 來刷新當前的畫板。

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

彈球實體代碼 (Ball.cs)

public class Ball
{
    public double X { get; set; }
    public double Y { get; set; }
    public double VX { get; set; }
    public double VY { get; set; }
    public int Radius { get; set; }
    public int Move { get; set; }
    public SKColor sKColor { get; set; } = SKColors.Blue;
    /// <summary>
    /// 檢查球的碰撞
    /// </summary>
    public static void CheckBallHit(Ball b1, Ball b2)
    {
        var dx = b2.X - b1.X;
        var dy = b2.Y - b1.Y;
        var dist = Math.Sqrt(Math.Pow(dx,2) + Math.Pow(dy, 2));
        if (dist < b1.Radius + b2.Radius)
        {
            var angle = Math.Atan2(dy, dx);
            var sin = Math.Sin(angle);
            var cos = Math.Cos(angle);

            // 以b1為參照物,設定b1的中心點為旋轉基點
            double x1 = 0;
            double y1 = 0;
            var x2 = dx * cos + dy * sin;
            var y2 = dy * cos - dx * sin;

            // 旋轉b1和b2的速度
            var vx1 = b1.VX * cos + b1.VY * sin;
            var vy1 = b1.VY * cos - b1.VX * sin;
            var vx2 = b2.VX * cos + b2.VY * sin;
            var vy2 = b2.VY * cos - b2.VX * sin;

            // 求出b1和b2碰撞之後的速度
            var vx1Final = ((b1.Move - b2.Move) * vx1 + 2 * b2.Move * vx2) / (b1.Move + b2.Move);
            var vx2Final = ((b2.Move - b1.Move) * vx2 + 2 * b1.Move * vx1) / (b1.Move + b2.Move);

            // 處理兩個小球碰撞之後,將它們進行歸位
            var lep = (b1.Radius + b2.Radius) - Math.Abs(x2 - x1);

            x1 = x1 + (vx1Final < 0 ? -lep / 2 : lep / 2);
            x2 = x2 + (vx2Final < 0 ? -lep / 2 : lep / 2);

            b2.X = b1.X + (x2 * cos - y2 * sin);
            b2.Y = b1.Y + (y2 * cos + x2 * sin);
            b1.X = b1.X + (x1 * cos - y1 * sin);
            b1.Y = b1.Y + (y1 * cos + x1 * sin);

            b1.VX = vx1Final * cos - vy1 * sin;
            b1.VY = vy1 * cos + vx1Final * sin;
            b2.VX = vx2Final * cos - vy2 * sin;
            b2.VY = vy2 * cos + vx2Final * sin;
        }
    }
}

粒子花園核心類 (ParticleGarden.cs)

/// <summary>
/// 粒子花園
/// </summary>
public class ParticleGarden
{
    public SKPoint centerPoint;
    public double Spring = 0.0001;
    public int ParticelCount = 100;
    public List<Ball> Particles = new List<Ball>();
    public SKCanvas canvas;
    /// <summary>
    /// 渲染
    /// </summary>
    public void Render(SKCanvas canvas, SKTypeface Font, int Width, int Height)
    {
        this.canvas = canvas;
        canvas.Clear(SKColors.Black);
        centerPoint = new SKPoint(Width / 2, Height / 2);
        if (Particles.Any() == false)
        {
            for (int i = 0; i < ParticelCount; i++)
            {
                Random random = new Random((int)DateTime.Now.Ticks);
                var Length = random.Next(3, 10);
                Particles.Add(new Ball()
                {
                    X = random.Next(0, Width),
                    Y = random.Next(0, Height),
                    sKColor = SKColors.White,
                    VX = random.NextInt64(-2, 2),
                    VY = random.NextInt64(-2, 2),
                    Radius = Length,
                    Move = Length
                });
            }
        }

        //畫線
        for (int i = 0; i < Particles.Count; i++)
        {
            Move(Particles[i], i, Width, Height);
        }
        //畫球
        foreach (var item in Particles)
        {
            DrawCircle(canvas, item);
        }

        using var paint = new SKPaint
        {
            Color = SKColors.Blue,
            IsAntialias = true,
            Typeface = Font,
            TextSize = 24
        };
        string by = $"by 藍創精英團隊";
        canvas.DrawText(by, 600, 400, paint);
    }
    public void Move(Ball p, int i, int width, int height)
    {
        p.X += p.VX;
        p.Y += p.VY;

        for (var j = i + 1; j < Particles.Count; j++)
        {
            var target = Particles[j];
            CheckSpring(p, target, width, height);
            Ball.CheckBallHit(p, target);
        }

        if (p.X - p.Radius > width)
        {
            p.X = -p.Radius;
        }
        else if (p.X + p.Radius < 0)
        {
            p.X = width + p.Radius;
        }
        if (p.Y - p.Radius > height)
        {
            p.Y = -p.Radius;
        }
        else if (p.Y + p.Radius < 0)
        {
            p.Y = height + p.Radius;
        }
    }
    public void CheckSpring(Ball current, Ball target, int width, int height)
    {
        var dx = target.X - current.X;
        var dy = target.Y - current.Y;
        var dist = Math.Sqrt(Math.Pow(dx, 2) + Math.Pow(dy, 2));
        var minDist = width > height ? width / 10 : height / 5;
        if (dist < minDist)
        {
            DrawLine(current, target, dist, minDist);
            var ax = dx * Spring;
            var ay = dy * Spring;
            current.VX += ax / current.Move;
            current.VY += ay / current.Move;
            target.VX -= ax / target.Move;
            target.VY -= ay / target.Move;
        }
    }

    public void DrawLine(Ball current, Ball target, double dist, int minDist)
    {
        var StrokeWidth = (float)(2 * Math.Max(0, (1 - dist / minDist)));
        var Alpha = Math.Max(0, (1 - dist / minDist)) * byte.MaxValue;
        var Color = current.sKColor.WithAlpha((byte)Alpha);

        //劃線
        using var LinePaint = new SKPaint
        {
            Color = Color,
            Style = SKPaintStyle.Fill,
            StrokeWidth = StrokeWidth,
            IsStroke = true,
            StrokeCap = SKStrokeCap.Round,
            IsAntialias = true
        };
        var path = new SKPath();
        path.MoveTo((float)current.X, (float)current.Y);
        path.LineTo((float)target.X, (float)target.Y);
        path.Close();
        canvas.DrawPath(path, LinePaint);
    }
    /// <summary>
    /// 畫一個圓
    /// </summary>
    public void DrawCircle(SKCanvas canvas, Ball ball)
    {
        using var paint = new SKPaint
        {
            Color = ball.sKColor,
            Style = SKPaintStyle.Fill,
            IsAntialias = true,
            StrokeWidth = 2
        };
        canvas.DrawCircle((float)ball.X, (float)ball.Y, ball.Radius, paint);
    }
}

效果如下:

效果放大看,還是很心曠神怡的。

總結

這個特效的案例重點是碰撞檢測,同時又產生了奇妙的特效效果,很是不錯。

代碼地址

https://github.com/kesshei/WPFSkiaParticleGardenDemo.git

https://gitee.com/kesshei/WPFSkiaParticleGardenDemo.git

一鍵三連呦!,感謝大佬的支持,您的支持就是我的動力!

版權

藍創精英團隊(公眾號同名,CSDN 同名,CNBlogs 同名)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、介紹 instanceof是在多態中引出的,因為在多態發生時,子類只能調用父類中的方法(編譯時類型的方法),而子類自己獨有的方法(運行時類型的方法)無法調用,如果強制調用的話就需要向下轉型,語法和基本類型的強制類型轉換一樣;但是向下轉型具有一定的風險,很有可能無法成功轉化,為了判斷能否成功轉化, ...
  • 1.認證流程分析 Spring Security中預設的一套登錄流程是非常完善並且嚴謹的。但是項目需求非常多樣化, 很多時候,我們可能還需要對Spring Secinity登錄流程進行定製,定製的前提是開發者先深刻理解Spring Security登錄流程,然後在此基礎之上,完成對登錄流程的定製。本 ...
  • 如果程式中有大量的計算任務,並且這些任務能分割成幾個互相獨立的任務塊,那就應該使用並行編程。 並行編程用於分解計算密集型的任務片段,並將它們分配給多個線程。這些並行處理方法只適用於計算密集型的任務。 一 數據的並行處理 如果有一批數據,需要對每個數據進行相同的操作,其操作是計算密集型的,需要耗費一定 ...
  • 多態 靜態多態性,重載 同一個方法中有多個相同名稱的方法,但參數不一樣。 在編譯階段(程式未運行的時候),函數之間就產生了一對一的關係。 減少函數的命名,多個相同的函數可以使用相同的命名。 Mathf f = new Mathf(); f.Add(10001); class Mathf { publ ...
  • WPF的ObservableCollection在增刪改的時候,通過繼承INotifyCollectionChanged使用CollectionChanged通過依賴屬性發生了變化。(本篇的例子從:https://blog.lindexi.com/post/win10-uwp-%E9%80%9A%E ...
  • 一、C#數據類型 值類型:直接訪問數據的值。有基本數據類型(byte / short / int / long / float / double / char / bool)、struct、enum; 引用類型:訪問數據的存儲地址。有class、interface、數組、委托、stting; 值類型 ...
  • 一、前言 在windows平臺軟體開發過程中,註冊表的操作是經常會遇到的一個場景。今天記錄一下在操作註冊表時遇到的一些坑; 二、正文 1、操作註冊表,於是直接從網上找了一段代碼來用 /// <summary> /// 讀取註冊表 /// </summary> /// <param name="nam ...
  • 前言 接著上周寫的截圖控制項繼續更新添加 畫筆。 1.WPF實現截屏「仿微信」 2.WPF 實現截屏控制項之移動(二)「仿微信」 3.WPF 截圖控制項之伸縮(三) 「仿微信」 4.WPF 截圖控制項之繪製方框與橢圓(四) 「仿微信」 5.WPF 截圖控制項之繪製箭頭(五)「仿微信」 6.WPF 截圖控制項之繪 ...
一周排行
    -Advertisement-
    Play Games
  • 使用原因: 在我們服務端調用第三方介面時,如:支付寶,微信支付,我們服務端需要模擬http請求並加上一些自己的邏輯響應給前端最終達到我們想要的效果 1.使用WebClient 引用命名空間 using System.Net; using System.Collections.Specialized; ...
  • WPF 實現帶蒙版的 MessageBox 消息提示框 WPF 實現帶蒙版的 MessageBox 消息提示框 作者:WPFDevelopersOrg 原文鏈接: https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal 框架使用大於等於.N ...
  • 一、JSON(JavaScript Object Notation)的簡介: ① JSON和XML類似,主要用於存儲和傳輸文本信息,但是和XML相比,JSON更小、更快、更易解析、更易編寫與閱讀。 ② C、Python、C++、Java、PHP、Go等編程語言都支持JSON。 二、JSON語法規則: ...
  • 1.避免Scoped模式註冊的服務變成Singleton模式 當提供一個生命周期模式為Singleton的服務實例時,如果發現該服務中還依賴生命周期模式為Scoped的服務實例(Scoped服務實例將被一個Singleton服務實例所引用),那麼這個被依賴的Scoped服務實例最終會成為一個Sing ...
  • 索引時資料庫提高數據查詢處理性能的一個非常關鍵的技術,索引的使用可以對性能產生上百倍甚至上千倍的影響。接下來,會介紹索引的基本原理、概念,並深入學習資料庫中所使用的索引結構和存儲方式,以及如何管理、維護索引等。 1.索引的基本概念 索引時用來快速查詢表記錄的一種存儲結構,一般使用索引有一下兩個方面: ...
  • django2 路由控制器 Route路由,是一種映射關係。路由是把客戶端請求的url路徑和用戶請求的應用程式,這裡意指django裡面的視圖進行綁定映射的一種關係。 請求路徑和視圖函數不是一一對應的關係 在django中所有的路由最終都被保存到一個叫urlpatterns的文件里,並且該文件必須在 ...
  • 1、我們的目標是獲取微博某博主的全部圖片、視頻 2、拿到網址後 我們先觀察 打開F12 隨著下滑我們發現載入出來了一個叫mymblog的東西,展開響應發現需要的東西就在裡面 3、重點來了!!! 通過觀察發現第二頁比第一頁多了參數since_id 而第二頁的since_id參數剛好在上一頁中能獲取到, ...
  • 一、實現原理 在Servlet3協議規範中,包含在JAR文件/META-INFO/resources/路徑下的資源可以直接訪問。 二、舉例說明 如下圖所示,是我新建的一個Spring Boot Starter項目:zimug-minitor-threadpool,用於實現可配置、可觀測的線程池。其中 ...
  • 精華筆記: static final常量:應用率高 必須聲明同時初始化 由類名打點來訪問,不能被改變 建議:常量所有字母都大寫,多個單詞用_分隔 編譯器在編譯時會將常量直接替換為具體的數,效率高 何時用:數據永遠不變,並且經常使用 抽象方法: 由abstract修飾 只有方法的定義,沒有具體的實現( ...
  • Python有一個for...else語法,它的寫法如下 for i in range(0,100): if i == 3: break else: print("Not found") 該語句表示:若for迴圈遍歷完畢,則執行else部分的語句。也就是說上述代碼不會有任何輸出,而下述代碼會輸出“N ...