前言

說來這是個我和我老婆的愛情故事。

從小以來“坦克大戰”、“魂斗羅”等游戲總令我魂牽夢繞。這些游戲的基礎就是 2D實時渲染，以前沒意識，直到后來找到了 Direct2D。我的 2D實時渲染入門，是從這個 動態時鐘開始的。

本文將使用我寫的“準游戲引擎” FlysEngine完成。它是對 Direct2D和 .NET庫 SharpDX淺層次的封裝，隱藏了一些細節，簡化了一些調用。同時還保留了 Direct2D的原汁原味。

本文的最終效果如下：

繪制動態時鐘

要繪制動態時鐘，需要有以下步驟：

• 創建一個實時渲染窗口；

• 畫一個圓圈，表示時鐘邊緣；

• 在圓圈內等距離畫上?60個分鐘刻度，其中?12個比較長，為小時刻度；

• 用不同粗細、不同長短、不同顏色的畫筆畫上時鐘、分鐘和秒鐘。

實時渲染窗口

using var form = new RenderWindow { ClientSize = new System.Drawing.Size(400, 400) }; form.Draw += (RenderWindow sender, DeviceContext ctx) => { ctx.Clear(Color.CornflowerBlue); }; RenderLoop.Run(form, () => form.Render(1, PresentFlags.None));

其中 form.Render(1,...)中的 1表示垂直同步，玩過游戲的可能見過，這個設置可以在盡可能節省 CPU/GPU資源的同時得到最佳的呈現效果。

熟悉 glut的肯定知道，這種寫法和 glut非常像，執行效果如下：

注意：

RenderWindow其實繼承于 System.Windows.Forms.Form，確實是基于“ WinForm”，但實質卻和“拖控件”完全不一樣。“控件”是模態的，本身有狀態，但 Direct2D是實時渲染，界面完全沒有狀態，需要動態每隔一個垂直同步時間（如 1/60秒）全部清除，然后再重繪一次。

畫圓圈

RenderWindow簡單封裝了 Direct2D，可以直接使用里面的 XResource屬性來訪問 DirectX相關資源，包括：

• Direct2DFactory

• Direct2DDeviceContext

• DirectWriteFactory

• TransitionLibrary?動畫庫

• AnimationManager?動畫管理器

• SwapChain

• WICImagingFactory2

除此之外，還進一步封裝了以下組件，以簡化圖片、文字、顏色等調用和渲染：

• TextFormatManager?簡化創建?TextFormat

• BitmapManager?簡化加載圖片

• TextLayoutManager?簡化創建?TextLayout

• .GetColor(color)?方法，簡化使用顏色

這里我們將使用 Direct2DDeviceContext，這在 COM中的名字叫 ID2D1DeviceContext。

回到 Draw事件，它包含兩個參數：(RenderWindowsender,DeviceContextctx)：

• 其中?sender就是原窗口，可以用外層的?form代替;

• ctx參數就是?D2D繪圖的核心，我們將圍繞它進行繪制。

要畫圓圈，得先算出一個能放下一個完整圓的半徑，并留下少許空間（ 5）：

float r = Math.Min(ctx.Size.Width, ctx.Size.Height) / 2 - 5

然后調用 ctx參數，使用黑色畫筆將圓畫出來，線寬為 1/40半徑：

ctx.DrawEllipse(new Ellipse(Vector2.Zero, r, r), sender.XResource.GetColor(Color.Black), r/40);

執行效果如下：

可見圓只顯示了四分之一，要顯示完整的圓，必須將其“移動”到屏幕正中心，我們可以調整圓的參數，將中心點從 Vector2.Zero改成 newVector2(ctx.Size.Width/2,ctx.Size.Height/2)，或者用更簡單的辦法，通過矩陣變換：

ctx.Transform = Matrix3x2.Translation(ctx.Size.Width/2, ctx.Size.Height/2);

注意：“矩陣變換”這幾個字聽起來總令人聯想到“高數”，挺嚇人的。但實際是并不是非要知道線性代碼基礎才能使用。首先只要知道它能完成任務即可，之后再慢慢理解也行。

有多種方法可以完成像平移這樣的任務，但通常來說使用“矩陣變換”更簡單，更不傷腦筋，尤其是多個對象，進行旋轉、扭曲等復雜、或者組合操作等，這些操作如果不使用“矩陣變換”會非常非常麻煩。

這樣，即可將該圓“平移”至屏幕正中心，執行效果如下：

Draw方法完整代碼：

ctx.Clear(Color.CornflowerBlue); float r = Math.Min(ctx.Size.Width, ctx.Size.Height) / 2 - 5; ctx.Transform = Matrix3x2.Translation(ctx.Size.Width/2, ctx.Size.Height/2); ctx.DrawEllipse(new Ellipse(Vector2.Zero, r, r), sender.XResource.GetColor(Color.Black), r/40);

畫刻度

刻度就是線條，共 60-12=48個分鐘刻度和 12個時鐘刻度，其中分鐘刻度較短，時鐘刻度較長。

刻度的一端是沿著圓的邊緣，另一端朝著圓的中心，邊緣位置可以通過 sin/cos等三角函數計算出來……呃，可能早忘記了，不怕，我們有“矩陣變換”。

利用矩陣變換，可以非常容易地完成這項工作：

for (var i = 0; i < 60; ++i) { ctx.Transform = Matrix3x2.Rotation(MathF.PI * 2 / 60 * i) * Matrix3x2.Translation(ctx.Size.Width/2, ctx.Size.Height/2); ctx.DrawLine(new Vector2(r-r/30,0), new Vector2(r,0), form.XResource.GetColor(Color.Black),r/200); }

執行效果如下：

注意：此處用到了矩陣乘法：

Matrix3x2.Rotation(MathF.PI * 2 / 60 * i) * Matrix3x2.Translation(ctx.Size.Width/2, ctx.Size.Height/2);

注意乘法是有順序的，這符合空間邏輯，可以這樣想想，先旋轉再平移，和先平移再旋轉顯然是有區別的。

然后再加上長時鐘，只需在原代碼基礎上加個判斷即可，如果 i%5==0，則為長時鐘，粗細設置為 r/100：

for (var i = 0; i < 60; ++i) { ctx.Transform = Matrix3x2.Rotation(MathF.PI * 2 / 60 * i) * Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2); if (i % 5 == 0) { // 時鐘 ctx.DrawLine(new Vector2(r - r / 15, 0), new Vector2(r, 0), form.XResource.GetColor(Color.Black), r/100); } else { // 分鐘 ctx.DrawLine(new Vector2(r - r / 30, 0), new Vector2(r, 0), form.XResource.GetColor(Color.Black), r/200); } }

執行效果如下：

畫時、分、秒鐘

時、分、秒鐘是動態的，必須隨著時間變化而變化；其中時鐘最短、最粗，分鐘次之，秒鐘最細長，然后時鐘必須疊在分鐘和秒鐘之上。

用代碼實現，可以先畫秒鐘、再畫分鐘和時鐘，即可實現重疊效果。還可以通過設置一定的透明度和不同的顏色，可以讓它們區分更明顯。

獲取當前時間可以通過 DateTime.Now來完成， DateTime提供了時、分、秒和毫秒，可以輕松地計算各個指針應該指向的位置。

畫秒鐘的代碼如下，顯示為藍色，長度為 0.9倍半徑，寬度為 1/50半徑：

// 秒鐘 ctx.Transform = Matrix3x2.Rotation(MathF.PI * 2 / 60 * time.Second) * Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2); ctx.DrawLine(Vector2.Zero, new Vector2(0,-r*0.9f), form.XResource.GetColor(Color.Blue), r/50);

效果如下：

依法炮制，可以畫出分鐘和時鐘：

// 分鐘 ctx.Transform = Matrix3x2.Rotation(MathF.PI * 2 / 60 * time.Minute) * Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2); ctx.DrawLine(Vector2.Zero, new Vector2(0, -r * 0.8f), form.XResource.GetColor(Color.Green), r / 35); // 時鐘 ctx.Transform = Matrix3x2.Rotation(MathF.PI * 2 / 12 * time.Hour) * Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2); ctx.DrawLine(Vector2.Zero, new Vector2(0, -r * 0.7f), form.XResource.GetColor(Color.Red), r / 20);

效果如下：

優化

其實到了這一步，已經是一個完整的，可運行的時鐘了，但還能再優化優化。

半透明時鐘

首先可以設置一定的半透明度，使三根鐘重疊時不顯得很突兀，代碼如下：

var blue = new Color(red: 0.0f, green: 0.0f, blue: 1.0f, alpha: 0.7f); ctx.DrawLine(Vector2.Zero, new Vector2(0,-r*0.9f), form.XResource.GetColor(blue), r/50);

只需將原本的 Color.Blue等顏色改成自定義，并且指定 alpha參數為 0.7（表示 70%半透明）即可，效果如下：

時鐘兩端的尖角或者圓角

Direct2D可以很方便地控制繪制的線段兩端，有許多風格可供選擇，具體可以參見 CapStyle枚舉：

public enum CapStyle { /// <unmanaged>D2D1_CAP_STYLE_FLAT</unmanaged> Flat, /// <unmanaged>D2D1_CAP_STYLE_SQUARE</unmanaged> Square, /// <unmanaged>D2D1_CAP_STYLE_ROUND</unmanaged> Round, /// <unmanaged>D2D1_CAP_STYLE_TRIANGLE</unmanaged> Triangle }

此處我們將使用 Round用于做中心點，用 Triangle用于做針尖，首先創建一個 StrokeStyle對象：

using var clockLineStyle = new StrokeStyle(form.XResource.Direct2DFactory, new StrokeStyleProperties { StartCap = CapStyle.Round, EndCap = CapStyle.Triangle, });

然后在調用 ctx.DrawLine()時，將 clockLineStyle參數傳入最后一個參數即可：

ctx.DrawLine(Vector2.Zero, new Vector2(0,-r*0.9f), form.XResource.GetColor(blue), r/50, clockLineStyle);

執行效果如下（可見有那么點意思了）：

平滑移動

Direct2D是實時渲染，我們不能浪費這實時二字帶來的好處。更何況顯示出來的時鐘也不太合理，因為當時時間是 9:57，此時時鐘應該指向偏 10點的位置。但現在由于忽略了這一分量，指向的是 9點，這不符合實時的時鐘。

因此計算小時角度時，可以加入分鐘分量，計算分鐘角度時，可以加入秒鐘分量，計算秒鐘角度時，也可以加入毫秒的分量。代碼只需將矩陣變換代碼稍微變動一點點即可：

// 秒鐘 ctx.Transform = Matrix3x2.Rotation(MathF.PI * 2 / 60 * (time.Second + time.Millisecond / 1000.0f)) * Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2); // ... // 分鐘 ctx.Transform = Matrix3x2.Rotation(MathF.PI * 2 / 60 * (time.Minute + time.Second / 60.0f)) * Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2); // ... // 時鐘 ctx.Transform = Matrix3x2.Rotation(MathF.PI * 2 / 12 * (time.Hour + time.Minute / 60.0f)) * Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);

執行效果如下：

陰影效果

和邊緣刻度不一樣，時鐘多少是和窗口底層有距離的，因此怎么說也會顯示一些陰影效果。這在 Direct2D中也能輕易實現。代碼會復雜一點，過程如下：

• 先將創建一個臨時的?Bitmap1;

• 將時、分、秒鐘繪制到這個?Bitmap中;

• 創建一個?ShadowEffect，傳入這個?Bitmap的內容生成一個陰影貼圖;

• 調用?ctx.DrawImage()將?ShadowEffect先繪制;

• 調用?ctx.DrawBitmap()繪制最后真正的時、分、秒鐘。

注意這個過程的順序不能錯，否則可能出現陰影顯示的真實物體上的虛幻效果。

臨時的 Bitmap1和 ShadowEffect可以在 CreateDeviceSizeResources和 ReleaseDeviceSizeResources事件中創建和銷毀：

Bitmap1 bitmap = null; Shadow shadowEffect = null; form.CreateDeviceSizeResources += (RenderWindow sender) => { bitmap = new Bitmap1(form.XResource.RenderTarget, form.XResource.RenderTarget.PixelSize, new BitmapProperties1(new PixelFormat(Format.B8G8R8A8_UNorm, SharpDX.Direct2D1.AlphaMode.Premultiplied), dpi, dpi, BitmapOptions.Target)); shadowEffect = new SharpDX.Direct2D1.Effects.Shadow(form.XResource.RenderTarget); }; form.ReleaseDeviceSizeResources += o => { bitmap.Dispose(); shadowEffect.Dispose(); };

其中 dpi從 Direct2DFactory.DesktopDpi.Width進行獲取。

先將 ctx的 Target屬性指定這個 bitmap，但又同時保存老的 Target屬性用于稍后繪制：

var oldTarget = ctx.Target; ctx.Target = bitmap; ctx.BeginDraw(); { ctx.Clear(Color.Transparent); // 上文中的繪制時鐘部分... } ctx.EndDraw();

注意 ctx.Clear(Color.Transparent);是有必要的，否則將出現重影：

這樣即可將時鐘單獨繪制到 bitmap中，對這個 bitmap生成一個陰影：

shadowEffect.SetInput(0, ctx.Target, invalidate: new RawBool(false));

最后進行繪制，繪制時記得順序：

ctx.Target = oldTarget; ctx.BeginDraw(); { ctx.Transform = Matrix3x2.Identity; ctx.UnitMode = UnitMode.Pixels; ctx.DrawImage(shadowEffect); ctx.DrawBitmap(bitmap, 1.0f, InterpolationMode.NearestNeighbor); ctx.UnitMode = UnitMode.Dips; }

注意兩點：

首先，設置 ctx.Transform=identity是有必要的，否則會上文的矩陣變換會一直保持作用；

然后兩次設置 ctx.UnitMode=pixels/dips也是有必要的，因為此時的繪制相當于是圖片，按照默認的高 DPI顯示會導致顯示模糊，因此顯示圖片時需要改成點對點顯示;

效果如下：

這個陰影默認是完全重疊的，現實中這種光線較小，加一點點平移效果可能會更好：

ctx.DrawImage(shadowEffect, new Vector2(r/20,r/20));

效果如下（顯然更逼真了）：

更好的動畫

有些時鐘的秒確實是這樣動的，但我印象中兒時的記憶，秒是一格一格地動，它是每動一下，停頓一下再動的那種感覺。

為了實現這種感覺，我加入了 WindowsAnimationManager的功能，這也是 COM組件的一部分，我的 FlysEngine中稍微封裝了一下。使用時需要引入一個 timer進行配合：

float secondPosition = DateTime.Now.Second; Variable secondVariable = null; var timer = new System.Windows.Forms.Timer { Enabled = true, Interval = 1000 }; timer.Tick += (o, e) => { secondVariable?.Dispose(); secondVariable = form.XResource.CreateAnimation(secondPosition, DateTime.Now.Second, 0.2f); }; form.FormClosing += delegate { timer.Dispose(); }; form.UpdateLogic += (window, dt) => { secondPosition = (float)(secondVariable?.Value ?? 0.0f); };

注意此處我使用了 UpdateLogic事件，這也是 FlysEngine中封裝的，可以在繪制呈現前執行一段更新邏輯的代碼。

然后后面的繪制時，將獲取秒的矩陣變換參數改為 secondPosition變量即可：

ctx.Transform = Matrix3x2.Rotation(MathF.PI * 2 / 60 * secondPosition) * Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);

最后的執行效果如下：

看起來一切正常，但……如果經過分鐘滿時，會出現這種情況：

這是因為秒數從 59秒到 00秒的動畫，是一個遞減的過程（ 59->00），因此秒鐘反向轉了一圈，這明顯不對。

解決這個問題可以這樣考慮，如果當前是 59秒，我們假裝它是 -1秒即可，這時計算角度不會出錯，矩陣變換也沒任何問題，通過 C# 8.0強大的 switchexpression功能，可以不需要額外語句，在表達式內即可解決：

secondVariable = form.XResource.CreateAnimation(secondPosition switch { 59 => -1, var x => x, }, DateTime.Now.Second, 0.2f);

最后的最后，最終效果如下：

結語

記得6年前我老婆第一次來我出租房玩，然后……我給她感受了作為一個程序員的“浪漫”，花了一整個下午時間，把這個 demo從 0開始做了出來給她看，不過那時我還在用 C++。多年后和她說起這個入門 demo，她仍記憶尤新。

本文中最終效果的代碼，可以從我的 github倉庫下載：https://github.com/sdcb/blog-data/blob/master/2019/20191021-render-clock-using-dotnet/clock.linq

有了 .NET，那些代碼已經遠比當年簡單，我的確是從這個例子出發，做出了許多好玩的東西，以后有機會我會慢慢介紹，敬請期待。

喜歡的朋友 請關注我的微信公眾號：【DotNet騷操作】

總結

以上是生活随笔為你收集整理的.NET实时2D渲染入门·动态时钟的全部內容，希望文章能夠幫你解決所遇到的問題。

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