走进WPF之绘制冰墩墩

随着冬奥会的开展，冰墩墩风靡一时，本着好奇之心及对冰墩墩的喜爱，本文采用WPF绘制冰墩墩，仅供学习分享使用，如有不足之处，还请指正。

什么是冰墩墩？

冰墩墩（英文：Bing Dwen Dwen，汉语拼音：bīng dūn dūn），是2022年北京冬季奥运会的吉祥物。 将熊猫形象与富有超能量的冰晶外壳相结合，头部外壳造型取自冰雪运动头盔，装饰彩色光环，整体形象酷似航天员。 

涉及知识点

通过分析冰墩墩图形，对其进行拆解，并结合WPF绘图基础知识，涉及知识点如下所示：

• Canvas画布基础实时，主要是布局定位。
• 基础图形Rectangle(矩形)，Eclipse(椭圆)，Path(路径)的绘制。
• 图形变换，如：TranslateTransform（移动），RotateTransform（旋转），ScaleTransform（缩放）等基础知识

示例效果图

示例效果可能和真实图片略有差异，具体效果图如下所示：

 

 核心代码

本示例主要由WPF的XAML完成，如下所示：

<Window x:Class="BingDwen.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BingDwen"
        mc:Ignorable="d"
        Title="冰墩墩" Height="450" Width="500">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Text="冰墩墩" Grid.Row="0" HorizontalAlignment="Center" FontSize="20"></TextBlock>
        <Canvas x:Name="center"  Grid.Row="1" HorizontalAlignment="Left" Margin="50 0">
            <!--耳朵-->
            <Ellipse x:Name="e1" Width="45" Height="45" Stroke="Black" Canvas.Left="106" Canvas.Top="61"></Ellipse>
            <Ellipse x:Name="e2" Width="45" Height="45" Stroke="Black" Canvas.Left="250" Canvas.Top="61"></Ellipse>
            <Ellipse x:Name="e3" Width="40" Height="40" Fill="Black" Canvas.Left="110" Canvas.Top="65"></Ellipse>
            <Ellipse x:Name="e4" Width="40" Height="40" Fill="Black" Canvas.Left="250" Canvas.Top="65"></Ellipse>
            <!--手-->
            <Rectangle x:Name="h1" Stroke="Black" Width="43" Height="103" Canvas.Left="75" Canvas.Top="202" RadiusX="24" RadiusY="40">
                <Rectangle.RenderTransform>
                    <RotateTransform CenterX="25" CenterY="50" Angle="45"></RotateTransform>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="h2" Stroke="Black" Width="43" Height="103" Canvas.Left="283" Canvas.Top="95" RadiusX="24" RadiusY="40">
                <Rectangle.RenderTransform>
                    <RotateTransform CenterX="25" CenterY="50" Angle="45"></RotateTransform>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="h3" Fill="Black" Width="40" Height="100" Canvas.Left="80" Canvas.Top="200" RadiusX="20" RadiusY="40">
                <Rectangle.RenderTransform>
                    <RotateTransform CenterX="25" CenterY="50" Angle="45"></RotateTransform>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="h4" Fill="Black" Width="40" Height="100" Canvas.Left="280" Canvas.Top="100" RadiusX="20" RadiusY="40">
                <Rectangle.RenderTransform>
                    <RotateTransform CenterX="25" CenterY="50" Angle="45"></RotateTransform>
                </Rectangle.RenderTransform>
            </Rectangle>
            <!--腿-->
            <Rectangle x:Name="l3" Stroke="Black" Height="33" Width="36" RadiusX="10" RadiusY="20" Canvas.Left="150" Canvas.Top="305"></Rectangle>
            <Rectangle x:Name="l4" Stroke="Black" Height="33" Width="36" RadiusX="10" RadiusY="20" Canvas.Left="217" Canvas.Top="305"></Rectangle>
            <Rectangle x:Name="l1" Fill="Black" Height="30" Width="30" RadiusX="10" RadiusY="20" Canvas.Left="153" Canvas.Top="305"></Rectangle>
            <Rectangle x:Name="l2" Fill="Black" Height="30" Width="30" RadiusX="10" RadiusY="20" Canvas.Left="220" Canvas.Top="305"></Rectangle>
            <!--轮廓-->
            <Rectangle x:Name="a1" Width="200" Height="240" Canvas.Left="100" Canvas.Top="70"  Stroke="Black" RadiusX="80" RadiusY="150"></Rectangle>
            <Rectangle x:Name="a2" Width="194" Height="234" Canvas.Left="103" Canvas.Top="73"  Fill="AliceBlue" RadiusX="83" RadiusY="153"></Rectangle>
            <!--五环线-->
            <Ellipse x:Name="b" Width="170" Height="130" Canvas.Left="116" Canvas.Top="98" Fill="White" Stroke="Pink"  StrokeThickness="2"></Ellipse>
            <Ellipse x:Name="c" Width="165" Height="125" Canvas.Left="118" Canvas.Top="100" Fill="White" Stroke="Purple" StrokeThickness="2"></Ellipse>
            <Ellipse x:Name="d" Width="160" Height="120" Canvas.Left="121" Canvas.Top="103" Fill="White" Stroke="Orange" StrokeThickness="2"></Ellipse>
            <Ellipse x:Name="e" Width="155" Height="115" Canvas.Left="124" Canvas.Top="106" Fill="White" Stroke="Blue" StrokeThickness="2"></Ellipse>
            <Ellipse x:Name="f" Width="150" Height="110" Canvas.Left="126" Canvas.Top="108" Fill="White" Stroke="Green" StrokeThickness="2"></Ellipse>
            
            <!--眼-->
            <Rectangle x:Name="y1" Fill="Black" Width="30" Height="50" Canvas.Left="128" Canvas.Top="120" RadiusX="20" RadiusY="40">
                <Rectangle.RenderTransform>
                    <RotateTransform CenterX="25" CenterY="50" Angle="45"></RotateTransform>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Ellipse x:Name="y11" Fill="Wheat" Width="15" Height="15" Canvas.Left="165" Canvas.Top="135"></Ellipse>
            <Ellipse x:Name="y12" Fill="Black" Width="10" Height="10" Canvas.Left="168" Canvas.Top="138"></Ellipse>
            <Ellipse x:Name="y13" Fill="WhiteSmoke" Width="5" Height="5" Canvas.Left="170" Canvas.Top="140"></Ellipse>
            <Rectangle x:Name="y2" Fill="Black" Width="30" Height="50" Canvas.Left="240" Canvas.Top="108" RadiusX="20" RadiusY="40">
                <Rectangle.RenderTransform>
                    <RotateTransform CenterX="25" CenterY="50" Angle="-45"></RotateTransform>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Ellipse x:Name="y21" Fill="Wheat" Width="15" Height="15" Canvas.Left="223" Canvas.Top="135"></Ellipse>
            <Ellipse x:Name="y22" Fill="Black" Width="10" Height="10" Canvas.Left="226" Canvas.Top="138"></Ellipse>
            <Ellipse x:Name="y23" Fill="WhiteSmoke" Width="5" Height="5" Canvas.Left="228" Canvas.Top="140"></Ellipse>
            <!--鼻子-->
            <Ellipse x:Name="n"  Width="20" Height="10" Canvas.Left="190" Canvas.Top="165">
                <Ellipse.Fill>
                    <RadialGradientBrush >
                        <GradientStop Color="LightGray" Offset="0"></GradientStop>
                        <GradientStop Color="Black" Offset="1"></GradientStop>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <!--嘴-->
            <Ellipse x:Name="m1" Width="60" Height="20" Canvas.Left="170" Canvas.Top="180">
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="Red" Offset="0"></GradientStop>
                        <GradientStop Color="Black" Offset="1"></GradientStop>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse x:Name="m2" Fill="White" Width="70" Height="20" Canvas.Left="165" Canvas.Top="175"></Ellipse>
            <!--字-->
            <TextBlock x:Name="z" Text="BEIJING 2022" FontSize="12" FontStyle="Italic" FontWeight="Bold" Canvas.Left="155" Canvas.Top="240"></TextBlock>
            <!--奥运环-->
            <Ellipse x:Name="c1" Width="25" Height="25" Stroke="Blue" Canvas.Left="160" Canvas.Top="260" StrokeThickness="2"></Ellipse>
            <Ellipse x:Name="c2" Width="25" Height="25" Stroke="Purple" Canvas.Left="185" Canvas.Top="260" StrokeThickness="2"></Ellipse>
            <Ellipse x:Name="c3" Width="25" Height="25" Stroke="Red" Canvas.Left="210" Canvas.Top="260" StrokeThickness="2"></Ellipse>
            <Ellipse x:Name="c4" Width="25" Height="25" Stroke="Yellow" Canvas.Left="173" Canvas.Top="272" StrokeThickness="2"></Ellipse>
            <Ellipse x:Name="c5" Width="25" Height="25" Stroke="Green" Canvas.Left="198" Canvas.Top="272" StrokeThickness="2"></Ellipse>
            <!--爱心-->
            <Path Data="M 60,30 C 20,-10 30,50 50,60 M 60,30 C 105,-10 80,70 50,60" Fill="Red">
                <Path.RenderTransform>
                    <TransformGroup>
                        <RotateTransform CenterX="60" CenterY="30" Angle="30"></RotateTransform>
                        <ScaleTransform ScaleX="0.3" ScaleY="0.3"></ScaleTransform>
                        <TranslateTransform X="300" Y="120">
                        </TranslateTransform>
                    </TransformGroup>
                </Path.RenderTransform>
            </Path>

        </Canvas>
        
    </Grid>
</Window>

本文属于WPF基础知识的应用，旨在抛砖引玉，一起学习，共同进步。

备注

早春呈水部张十八员外（其一）

【作者】韩愈 【朝代】唐

天街小雨润如酥，草色遥看近却无。

最是一年春好处，绝胜烟柳满皇都。