1. 前言
幾個月前 ChokCoco 大佬發布了一篇文章：
CSS 奇技淫巧 | 妙用 drop-shadow 實作線條光影效果
在文章里實作了一個發光的心形線潭訓相追逐的效果：
現在正好有空就試試用 WPF 實作一下，在實作程序中我用到這些知識和技巧：
- Segoe Fluent 圖示字體
- 在 Blend 中創建 Path
- 計算 Path 的長途
- Path 的邊框影片
- VisualStudio 的設計時資料支持
- 自定義 Effect
這篇文章將講解如何使用這些知識和技巧模仿他的影片效果，
2. 圖示字體和 Path
雖然 ChokCoco 大佬已經給了一個心形的路徑，但總不能每次都期待別人給的東西，對于 WPF 開發者來說，用圖示字體和 Blend 可以輕松創建一些簡單的路徑，
首先要找到一個心形的圖示字體，在 Windows 10/11 可以直接使用 Segoe MDL2 和 Segoe Fluent 字體，這兩個是隨 Windows 10/11 發布的系統內置字體，下面的頁面列出了可用的 Segoe Fluent 字體：
https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font
找到 HeartFill 的 Unicode 碼位 eb52，然后打開 Microsoft Blend for VisualStudio 2019（更新的版本砍掉了這篇文章用到的功能），創建一個 WPF 應用，在 XAML 中輸入下面這段 XAML：
<TextBlock FontFamily="Segoe Fluent Icons" Text="" Foreground="#C72335" FontSize="300"/>
這時候應該可以看到一個心形，他就是 HeartFill 的文字圖示，在設計視圖選中它，右鍵選擇 Path -> Convert to Path（中文版本下應該是 轉換為路徑）：
這樣 TextBlock 就被轉換為一個相同形狀的 Path，接下來將 Fill 設定為空，Stroke 和 StrokeThickness 分別設定為 Black 和 10，Path 的形狀就如下圖所示，選中左邊工具列的 Pen 工具還可以調整 Path 的形狀：
這時候對應的 XAML 如下：
<Path Margin="0,18.75,492,137.75"
Data="https://www.cnblogs.com/dino623/archive/2022/01/13/M80.859375,18.75 C91.894524,18.75 102.31933,20.849609 112.13379,25.048828 C121.94823,29.248047 130.76172,35.205078 138.57422,42.919922 C140.52734,44.873062 142.40723,46.777359 144.21387,48.632813 C146.02051,50.488297 147.90039,52.392593 149.85352,54.345703 C151.70898,52.392593 153.54004,50.488297 155.34668,48.632813 C157.15332,46.777359 159.0332,44.92189 160.98633,43.066406 C168.89648,35.449219 177.66113,29.56543 187.28027,25.415039 C196.8994,21.264648 207.22655,19.189453 218.26172,19.189453 C229.58983,19.189453 240.23436,21.362305 250.19531,25.708008 C260.15625,30.053711 268.82324,35.961914 276.19629,43.432617 C283.56934,50.903336 289.37988,59.619156 293.62793,69.580078 C297.87598,79.541031 300,90.185562 300,101.51367 C300,112.25586 297.97363,122.68066 293.9209,132.78809 C289.86816,142.89551 284.0332,151.75781 276.41602,159.375 L159.375,277.58789 C156.93359,280.0293 153.95508,281.25 150.43945,281.25 C147.02148,281.25 144.0918,280.0293 141.65039,277.58789 L23.876953,158.64258 C16.259766,150.92773 10.375976,142.0166 6.2255859,131.90918 C2.0751953,121.80176 0,111.2793 0,100.3418 C0,89.111343 2.0996094,78.564468 6.2988281,68.701172 C10.498046,58.837906 16.235352,50.195328 23.510742,42.773438 C30.786131,35.351563 39.331055,29.492188 49.145508,25.195313 C58.959957,20.898438 69.53125,18.75 80.859375,18.75 z"
RenderTransformOrigin="0.5,0.5"
Stretch="Fill"
Stroke="Black"
StrokeThickness="10">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Path.RenderTransform>
</Path>
3. 計算 Path 的長途
拿到路徑后，下一步需要計算它的長度，這個長度不需要太精確，可以用 GetFlattenedPathGeometry 獲取 PathGeometry 物件的多邊形近似 Geometry，然后計算每條邊的長度：
public double GetLength(Geometry geo)
{
PathGeometry path = geo.GetFlattenedPathGeometry();
double length = 0.0;
foreach (PathFigure pf in path.Figures)
{
Point start = pf.StartPoint;
foreach (PolyLineSegment seg in pf.Segments)
{
foreach (Point point in seg.Points)
{
length += (start - point).Length;
start = point;
}
}
}
return length;
}
4. Path 的邊框影片
上一步計算出的 Path 長度是 898，
然后通過 StrokeDashArray 和 StrokeDashOffset 對 Path 做邊框影片，因為 Path 的 StrokeThickness 是 10 像素，所以做邊框影片時所有數值都要除以 10，
第一步，將 StrokeDashArray 設定為 29.9 59.9，它將 Path 的邊框分成兩部分，第一部分為實線，第二部分為空白，
第二步，然后用 DoubleAnimation 使 StrokeDashOffset 從 0 到 89.8 不斷回圈，實作線條影片的不斷回圈，
第三步，添加一個相同的 Path，并讓它的影片延遲一秒執行，這樣就實作了兩個心形線條的追逐影片，
<DoubleAnimation RepeatBehavior="Forever"
Storyboard.TargetName="P1"
Storyboard.TargetProperty="StrokeDashOffset"
To="89.8"
Duration="0:0:2" />
<DoubleAnimation RepeatBehavior="Forever" BeginTime="0:0:1"
Storyboard.TargetName="P2"
Storyboard.TargetProperty="StrokeDashOffset"
To="89.8"
Duration="0:0:2" />
<Path x:Name="P1" />
<Path x:Name="P2" d:StrokeDashOffset="45" />
有關邊框影片的更多內容，可以參考這兩篇文章：
實用的Shape指南
用Shape做影片
5. VisualStudio 的設計時資料
現在我們只差讓這兩個 Path 發光了，但在這之前我們需要了解 VisualStudio 的設計時資料的概念，
設計時資料是你設定的模擬資料，使控制元件更易于在 XAML 設計器中進行可視化，d: 前綴用于設定設計時的屬性值，它只影響設計視圖，不會編譯到正在運行的應用中，具體可以參考這篇檔案：
在 Visual Studio 中通過 XAML 設計器使用設計時資料
這是一個很實用的小技巧，由于上面的兩個 Path 重疊在一起，在設計視圖難以區分，所以用了 d:StrokeDashOffset="45" 讓其中一個錯開，這段內容只在設計視圖起作用，不會有其它副作用，
6. 自定義 Effect
在 WPF 中要做發光效果通常都是用 DropShadowEffect ，例如這樣：
<Path x:Name="P1" >
<Path.Effect>
<DropShadowEffect BlurRadius="40" ShadowDepth="0" Color="#f24983"/>
</Path.Effect>
</Path>
<Path x:Name="P2" d:StrokeDashOffset="45" >
<Path.Effect>
<DropShadowEffect BlurRadius="40" ShadowDepth="0" Color="#37c1ff"/>
</Path.Effect>
</Path>
但這樣顏色實在太淡，太淡了，為了解決這個問題，其中一種做法是疊加多個 Path，這樣它們的 Drop Shadow 也會疊加起來，實作一個很亮的發光效果，但是這里會需要對疊加的多個 Path 都做影片，恐怕性能會很有問題，
另一種方式是自定義一個 Effect，它的代碼只需要如下幾行：
float Amount : register(C0);
float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 srcColor = tex2D(input, uv);
srcColor.rgb *= Amount;
srcColor.a *= Amount;
return srcColor;
}
這只是個很簡單的 Effect，就是將所有像素的顏色和透明度乘以一個指定值，我不知道這種效果叫什么名字，但因為它最終實作了發光的效果，所以命名為 GlowEffect，使用 GlowEffect 配合 BlurEffect，上面暗淡的顏色就變得明亮起來：
<Grid>
<Grid.Effect>
<effects:GlowEffect Amount="5" />
</Grid.Effect>
<Grid>
<Grid.Effect>
<BlurEffect Radius="70" RenderingBias="Quality" />
</Grid.Effect>
<Path x:Name="P1b" Stroke="#f24983" />
<Path x:Name="P2b"
d:StrokeDashOffset="45"
Stroke="#37c1ff" />
</Grid>
</Grid>
<Grid>
<Path x:Name="P1" />
<Path x:Name="P2" d:StrokeDashOffset="45" />
</Grid>
關于自定義 Effect 的更多內容，可以參考 WalterLv 大佬的這篇文章：
WPF 像素著色器入門：使用 Shazzam Shader Editor 撰寫 HLSL 像素著色器代碼
7. 成果
最后的成果如下：
8. 原始碼
https://github.com/DinoChan/wpf_design_and_animation_lab
作者：dino.c
出處：http://www.cnblogs.com/dino623/
說明：歡迎轉載并請標明來源和作者，如有錯漏請指出，謝謝，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/412748.html
標籤：.NET技术