熟悉下SkiaSharp的基礎操作，這次搞個彈跳球效果，實現后，發現效果還真不錯。

大概效果如下:

原理分析

先是實現了網格效果，這個比較簡單，直接橫線，豎線，就OK了。

另外一個就是隨機一個圓形，我這邊隨機了一百個，初始位置大致都一樣，但是，每個方向角度隨機，顏色隨機，移動速度隨機。

然后，它們移動起來，遇到了墻壁就會自動回彈回去，形成了不錯的視覺效果。

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;}}
});

實現代碼的圓形邏輯

///?<summary>
///?圓圈
///?</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);}
}

圓形的移動邏輯

///?<summary>
///?調整位置
///?</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;}
}

實現網格的邏輯

///?<summary>
///?畫格子
///?</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);}
}
}

效果

看著效果還是真不錯。

總結

這個案例搞定，下一次，想想做個啥案例好點。

代碼地址

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

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

閱

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