SkiaSharp是一個跨平臺2D圖形API，用于.NET平臺，基于Google's Skia Graphics庫(skia.org網站). 它提供了一個全面的2D API，可以跨移動、服務器和桌面模型來渲染圖像。該圖形庫可實現獲取指定坐標像素值、繪制2d圖形、繪制文字（必須有相應字庫支持）、創建縮略圖等，微軟是大力支持的。

可見此地址:

https://docs.microsoft.com/zh-cn/dotnet/api/skiasharp

首先是想熟悉下SkiaSharp的操作，另外呢，想基于SkiaSharp來做跨平臺的UI渲染器，一直沒有動手，在搜集資料，現在基本搜集的差不多了，所以，就找點例子，學學，也挺有趣的。

一個時鐘的效果

大概是以下的樣子，也挺簡單的，就是對度數是要計算的，用到的方法，也就畫圓和畫路徑以及畫文本幾個方法。

然后，根據時間，自動轉動時鐘的指針。

自從畢業后，就沒有做過這樣的案例了。但是，上手了，感覺還是很欣喜的。

Wpf 和 SkiaSharp

新建一個WPF項目，然后，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>public?class?DrawClock{public?SKPoint?centerPoint;public?int?Radius?=?0;public?int?HAND_TRUNCATION;public?int?HOUR_HAND_TRUNCATION;public?int?HAND_RADIUS;public?int?TIPS;///?<summary>///?渲染///?</summary>public?void?Render(SKCanvas?canvas,?SKTypeface?Font,?int?Width,?int?Height){centerPoint?=?new?SKPoint(Width?/?2,?Height?/?2);this.Radius?=?(int)(centerPoint.Y?-?50);HAND_TRUNCATION?=?Width?/?25;HOUR_HAND_TRUNCATION?=?Width?/?10;HAND_RADIUS?=?this.Radius?+?15;TIPS?=?this.Radius?-?40;canvas.Clear(SKColors.SkyBlue);DrawCircle(canvas,?Font);DrawCenter(canvas,?Font);DrawHands(canvas,?Font);DrawTimeNumber(canvas,?Font);DrawTips(canvas,?Font);using?var?paint?=?new?SKPaint{Color?=?SKColors.Black,IsAntialias?=?true,Typeface?=?Font,TextSize?=?20};using?var?paint2?=?new?SKPaint{Color?=?SKColors.Blue,IsAntialias?=?true,Typeface?=?Font,TextSize?=?24};string?msg?=?$"{DateTime.Now:yyyy-MM-dd?HH:mm:ss:fff:ffffff}";string?tishi?=?"?WPF?SkiaSharp?自繪時鐘?基礎代碼";string?by?=?$"by?藍創精英團隊";canvas.DrawText(msg,?0,?30,?paint);canvas.DrawText(tishi,?450,?30,?paint);canvas.DrawText(by,?600,?400,?paint2);}///?<summary>///?畫一個圓///?</summary>public?void?DrawCircle(SKCanvas?canvas,?SKTypeface?Font){using?var?paint?=?new?SKPaint{Color?=?SKColors.Black,Style?=?SKPaintStyle.Stroke,IsAntialias?=?true,StrokeWidth?=?2};canvas.DrawCircle(centerPoint.X,?centerPoint.Y,?Radius,?paint);}///?<summary>///?時鐘的核心///?</summary>public?void?DrawCenter(SKCanvas?canvas,?SKTypeface?Font){using?var?paint?=?new?SKPaint{Color?=?SKColors.Black,Style?=?SKPaintStyle.Fill,IsAntialias?=?true,StrokeWidth?=?2};canvas.DrawCircle(centerPoint.X,?centerPoint.Y,?5,?paint);}private?void?DrawHand(SKCanvas?canvas,?SKTypeface?Font,?int?times,?bool?isHour?=?false){var?angle?=?Math.PI?*?2?*?(times?/?(double)60)?-?Math.PI?/?2;var?handRadius?=?isHour???this.Radius?-?HAND_TRUNCATION?-?HOUR_HAND_TRUNCATION?:?this.Radius?-?HAND_TRUNCATION;using?var?paint?=?new?SKPaint{Color?=?(DateTimeOffset.Now.Second?%?4?<=?1)???SKColors.Red?:?SKColors.Green,Style?=?SKPaintStyle.Fill,StrokeWidth?=?2,IsStroke?=?true,StrokeCap?=?SKStrokeCap.Round,IsAntialias?=?true};var?path?=?new?SKPath();path.MoveTo(centerPoint);path.LineTo((float)(centerPoint.X?+?Math.Cos(angle)?*?handRadius),?(float)(centerPoint.Y?+?Math.Sin(angle)?*?handRadius));path.Close();canvas.DrawPath(path,?paint);}///?<summary>///?畫時針///?</summary>public?void?DrawHands(SKCanvas?canvas,?SKTypeface?Font){var?time?=?DateTime.Now;var?hour?=?time.Hour?>?12???time.Hour?-?12?:?time.Hour;DrawHand(canvas,?Font,?hour?*?5?+?time.Minute?/?60?*?5,?true);DrawHand(canvas,?Font,?time.Minute,?false);DrawHand(canvas,?Font,?time.Second,?false);}///?<summary>///?畫時間點///?</summary>public?void?DrawTimeNumber(SKCanvas?canvas,?SKTypeface?Font){using?var?paint?=?new?SKPaint{Color?=?SKColors.Black,IsAntialias?=?true,Typeface?=?Font,TextSize?=?24};for?(int?i?=?1;?i?<=?12;?i++){var?angle?=?Math.PI?/?6?*?(i?-?3);var?number?=?i.ToString();var?numberTextWidth?=?paint.MeasureText(number);canvas.DrawText(number,?(float)(centerPoint.X?+?Math.Cos(angle)?*?HAND_RADIUS?-?numberTextWidth?/?2),?(float)(centerPoint.Y?+?Math.Sin(angle)?*?HAND_RADIUS?+?24?/?3),?paint);}}///?<summary>///?畫提示信息///?</summary>public?void?DrawTips(SKCanvas?canvas,?SKTypeface?Font){using?var?paint?=?new?SKPaint{Color?=?SKColors.Black,IsAntialias?=?true,Typeface?=?Font,TextSize?=?20};var?now?=?DateTime.Now;//年月日var?Date?=?$"{now.Year}/{now.Month}/{now.Day}";var?DateTextWidth?=?paint.MeasureText(Date);var?angle?=?Math.PI?/?6?*?(6?-?3);canvas.DrawText(Date,?(float)(centerPoint.X?+?Math.Cos(angle)?*?TIPS?-?DateTextWidth?/?2),?(float)(centerPoint.Y?+?Math.Sin(angle)?*?TIPS),?paint);//PM?AMvar?amOrPm?=?now.Hour?>?12???"PM"?:?"AM";var?amOrPmTextWidth?=?paint.MeasureText(amOrPm);var?angle2?=?Math.PI?/?6?*?(12?-?3);canvas.DrawText(amOrPm,?(float)(centerPoint.X?+?Math.Cos(angle2)?*?TIPS?-?amOrPmTextWidth?/?2),?(float)(centerPoint.Y?+?Math.Sin(angle2)?*?TIPS),?paint);}}

運行結果

總結

這個錄的GIF播放效果真不錯，基本體現出來了效果。

也算是入門了，后期，可以基于SkiaSharp，做更多的案例，出來，當然，還是基于自繪的實現。

代碼地址

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

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

閱

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

總結

以上是生活随笔為你收集整理的SkiaSharp 之 WPF 自绘时钟（案例版）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。