WPF中OnRender使用(一)

1,绘制几何图形
也许你在使用WPF进行开发的时候已经注意到一个很有意思的现象,要在屏幕上显示一个圆形(椭圆),你可以使用Ellipse对象,如下面的代码所示:

<Grid>
      
        <Ellipse Fill="#FFFFFFFF" Stroke="#FF000000" Margin="61,36,100,0" VerticalAlignment="Top" Height="33"/>
    </Grid>

而另外一个名为EllipseGeometry的对象同样可以做到:

<GeometryDrawing  Brush="Blue">
            <GeometryDrawing.Geometry>
                <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Pen>
                <Pen Thickness="1" Brush="Black" />
            </GeometryDrawing.Pen>
        </GeometryDrawing>

向后者这样由几何图形名称加Geometry后缀的,就是今天我们要讨论的几何图形.
我们可以发现,Ellipse继承于Shape类,EllipseGemotry继承于Geometry类,虽然我们利用它们都可以绘制圆形,但EllipseGeometry比Ellipse是更轻量级的类,我们使用它可以获得更好的性能效益,但EllipseGeometry不支持WPF布局系统(Layout)、输入和焦点。这也是Shape与Geometry的区别。
我们也可以使用C#代码像传统的绘制(OnPaint)一样来自定义我们的绘制:

public class CustomCanvas2:Canvas
    {
        protected override void OnRender(DrawingContext dc)
        {
            base.OnRender(dc);
            Geometry ellipse = new EllipseGeometry(new Point(100, 70), 100, 50);
            GeometryDrawing drawing=new GeometryDrawing(Brushes.LightBlue,new Pen(Brushes.Green,1),ellipse);
            dc.DrawDrawing(drawing);
        }
    }

效果如下图:

其他基本几何图形(如RectangleGeometry,LineGeometry等)与此类似。

 2, 绘制图片
最简单的使用图片的方式当然是利用Image控件,就像以前我们使用PictureBox一样,但更多的我们是使用自定义方式来绘制,ImageDrawing 对象为我们绘制图片提供了方便。

protected override void OnRender(DrawingContext dc)
        
{
            
base.OnRender(dc);
            BitmapImage bmp 
= new BitmapImage(new Uri("http://www.cnblogs.com/images/logo.gif", UriKind.Absolute));
            ImageDrawing drawing 
= new ImageDrawing(bmp, new Rect(101032643));
            dc.DrawDrawing(drawing);
        }

效果如下:


3.图形合并

 有时候我们需要将多个图形合并成一个然后进行绘制,比如将一个圆形和一个矩形进行合并,在WPF的自定义绘制中,有三种方法可以做到,分别是利用GeometryGroup对象,CombinedGeometry对象,使用Geometry.Combin静态方法。其中第一种方式是利用集合合并可以向几何中添加任意多个元素,后面两种方法只能两两合并,但后面两者的合并方式更加灵活,可以使两图形的交集,并集,差集以及异或。

3.1使用geometrygroup对象进行图形合并

protected override void OnRender(DrawingContext dc)
        {
            base.OnRender(dc);
            //public sealed class GeometryGroup : Geometry
            EllipseGeometry ellipse = new EllipseGeometry(new Point(50, 50), 50, 20);
            RectangleGeometry rect = new RectangleGeometry(new Rect(50, 50, 50, 20), 5, 5);
            GeometryGroup group = new GeometryGroup();
            group.FillRule = FillRule.EvenOdd;
            group.Children.Add(ellipse);
            group.Children.Add(rect);
            dc.DrawGeometry(Brushes.LightBlue, new Pen(Brushes.Green, 2), group);
        }

 

 我们只是简单地将两个图形以相加的方式合并在了一起,注意到合并后的图形中间部分出现一个镂空的无色区域,是由合并后的图形的FillRull决定的,如果我们把group.FillRule = FillRule.EvenOdd;更改为 group.FillRule = FillRule.Nonzero;则填充效果将是如下这样:

3.2使用combinedGeometry对象进行图形合并

 public class CustomCanvas4:Canvas
    {
        protected override void OnRender(DrawingContext dc)
        {
            base.OnRender(dc);

            //public sealed class CombinedGeometry : Geometry
            EllipseGeometry ellipse = new EllipseGeometry(new Point(50, 50), 50, 20);
            RectangleGeometry rect = new RectangleGeometry(new Rect(50, 50, 50, 20), 5, 5);

            CombinedGeometry combin = new CombinedGeometry(GeometryCombineMode.Xor, ellipse, rect);

            dc.DrawGeometry(Brushes.LightBlue, new Pen(Brushes.Green, 2), combin);
        }
    }

 

3.3 使用Geometry.Combin方法进行图形合并,和CombinedGeometry方法差不多

public class CustomCanvas5 : Canvas
    {
        protected override void OnRender(DrawingContext dc)
        {
            base.OnRender(dc);

            //public sealed class CombinedGeometry : Geometry
            EllipseGeometry ellipse = new EllipseGeometry(new Point(50, 50), 50, 20);
            RectangleGeometry rect = new RectangleGeometry(new Rect(50, 50, 50, 20), 5, 5);
            PathGeometry pathGeometry= Geometry.Combine(ellipse, rect, GeometryCombineMode.Xor, null);

            dc.DrawGeometry(Brushes.LightBlue, new Pen(Brushes.Green, 2), pathGeometry);
        }
    }

 

4.利用路径绘制图形(PathGeometry)

有时我们需要绘制的图形可能很复杂而显得不是那么的规则,这时我们就需要将图形分解成若干小的部分(分解成线段、圆弧、贝塞尔曲线等等),然后将这些小部分使用PathGeometry组合在一起实现最终的绘制。
一个PathGeometry对象有若干个PathFingure对象组成并保存在其Fingures属性中,一个PathFingure对象有若干个PathSegment对象组成并保存在其Segments属性中,而PathSegment则表示一些最基本的曲线和线段。继承了PathSegment的类主要有:LineSegment直线段,ArcSegment弧线段,BezierSegment贝塞尔曲线段等。反过来说,我们由一些基本的曲线和线段相互连接而组成PathFingure(可以看着一个独立的子图形),然后我们再由若干个PathFingure构成最终的复杂图形。

 

<Path Stroke="Beige" StrokeThickness="4">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="100,50">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <LineSegment Point="200,10"></LineSegment>
                                    <LineSegment Point="150,100"></LineSegment>
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>

 

在上面的代码中,我们定义了一个图形,它由一个PathFingure组成,改PathFingure的起点是(100,50),假设我们使用一支笔来绘制该PathFingure,那么我们现在得将笔头移动到点(200,50),在起点和该点之间绘制一个LineSegment,然后将笔头移动到(150,100),在上一次绘制的终点即(200,50)和改点之间绘制一个LineSegment,便得到了下图中的图形: 

之所以会产生这样的结果,请注意理解这句话“我们由一些基本的曲线和线段相互连接而组成PathFingure(可以看着一个独立的子图形)"。我们有权利选择这样的相互链接的曲线是否闭合(即将起点和终点用直线段连接起来),我们只需要将PahtFigure的IsClosed属性设置为True或False就可以了。如果我们将上面代码中的<PathFigure StartPoint="100,50" >
修改为<PathFigure StartPoint="100,50" IsClosed="True" >,那么将会得到如下图形:
 

 

 就这样,我们使用多个PathFigure分别负责图形中的子图形并选择合适的颜色与填充方式,就可以绘制出最终的复杂图形,你能相信下面这么漂亮的图形就是这样绘制出来的吗?

 

 代码如下:

<Grid>

        <Canvas x:Name="Background" d:IsLayer="True" Width="800" Height="800" Canvas.Left="0" Canvas.Top="0">
            <Rectangle x:Name="Rectangle" Width="801" Height="801" Canvas.Left="-0.500021" Canvas.Top="-0.5" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF5C7F71"/>
        </Canvas>
        <Canvas x:Name="Ship" d:IsLayer="True" Width="800" Height="800" Canvas.Left="0" Canvas.Top="0">
            <Ellipse x:Name="Ellipse" Width="178.695" Height="17.5563" Canvas.Left="57.9088" Canvas.Top="595.542" Stretch="Fill">
                <Ellipse.Fill>
                    <RadialGradientBrush RadiusX="0.573661" RadiusY="0.518142" Center="0.5,0.499998" GradientOrigin="0.5,0.499998">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#8FFFFEB8" Offset="0"/>
                            <GradientStop Color="#00FF5F1E" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup/>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse x:Name="Ellipse_0" Width="178.695" Height="17.5563" Canvas.Left="57.9088" Canvas.Top="444.163" Stretch="Fill">
                <Ellipse.Fill>
                    <RadialGradientBrush RadiusX="0.573661" RadiusY="0.518147" Center="0.5,0.500001" GradientOrigin="0.5,0.500001">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#8FFFFEB8" Offset="0"/>
                            <GradientStop Color="#00FF5F1E" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup/>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Viewbox x:Name="Group" Width="200.264" Height="62.7319" Canvas.Left="142.45" Canvas.Top="421.207">
                <Canvas Width="200.264" Height="62.7319">
                    <Path x:Name="Path" Width="11.731" Height="25.6144" Canvas.Left="0" Canvas.Top="17.9509" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF3E3E3E" Data="F1 M 10.1172,19.4509L 1.5,21.2192L 1.5,40.5689L 10.231,42.0653L 10.1172,19.4509 Z ">
                        <Path.Fill>
                            <LinearGradientBrush StartPoint="0.689922,0.114267" EndPoint="0.689922,0.905237">
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Color="#FF585858" Offset="0.0169492"/>
                                    <GradientStop Color="#FF8E8E8E" Offset="0.182203"/>
                                    <GradientStop Color="#FF585858" Offset="0.516949"/>
                                    <GradientStop Color="#FF464544" Offset="1"/>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Path.Fill>
                    </Path>
                    <Path x:Name="Path_1" Width="192.147" Height="62.7319" Canvas.Left="8.11722" Canvas.Top="0" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FF3A3735" Fill="#FF817E7C" Data="F1 M 104.475,2C 127.792,2 176.411,18.5041 198.264,33.5286C 178.421,45.0246 130.518,60.7319 105.841,60.7319C 81.1646,60.7319 17.7283,49.5626 10.231,42.0653C 10.231,37.5212 10.1172,25.2942 10.1172,19.4509C 18.5257,11.0424 81.1589,2 104.475,2 Z "/>
                    <Path x:Name="Path_2" Width="179.331" Height="34.8774" Canvas.Left="13.4322" Canvas.Top="5.37793" Stretch="Fill" Fill="#FFB09F99" Data="F1 M 103.324,5.37909C 126.089,5.22733 171.936,19.9673 192.763,33.2603C 165.446,39.9026 129.236,40.2554 104.683,40.2554C 80.1292,40.2554 25.7741,36.2799 13.4443,30.6806C 13.4082,27.3865 13.4642,23.2401 13.4642,20.7982C 27.1044,12.1894 80.56,5.53088 103.324,5.37909 Z "/>
                    <Path x:Name="Path_3" Width="145.843" Height="14.101" Canvas.Left="16.6681" Canvas.Top="7.72525" Stretch="Fill" Fill="#FFD1B6AB" Data="F1 M 162.511,21.8263C 162.511,21.8263 131.288,13.5681 108.576,13.5681C 78.7388,13.5681 16.6681,21.0106 16.6681,21.0106C 16.6681,21.0106 59.1985,7.72525 105.958,7.72525C 128.972,8.01593 156.236,19.0059 162.511,21.8263 Z "/>
                    <Path x:Name="Path_4" Width="145.276" Height="14.8925" Canvas.Left="15.7732" Canvas.Top="42.2313" Stretch="Fill" Fill="#FF9E9E9E" Data="F1 M 161.048,45.8934C 161.048,45.8934 135.378,53.3298 107.969,53.3298C 80.5595,53.3298 45.1012,47.5755 15.7732,42.2313C 15.7732,42.2313 62.9469,57.1238 110.473,57.1238C 128.609,57.1238 161.351,45.8934 161.048,45.8934 Z "/>
                    <Path x:Name="Path_5" Width="28.2342" Height="4.52205" Canvas.Left="90.6867" Canvas.Top="8.52896" Stretch="Fill" Data="F1 M 104.879,8.58112C 112.675,8.84659 118.962,10.0507 118.921,11.2707C 118.879,12.4905 112.525,13.2643 104.729,12.9988C 96.932,12.7334 90.6453,11.5292 90.6869,10.3094C 90.7284,9.08942 97.0824,8.3157 104.879,8.58112 Z ">
                        <Path.Fill>
                            <RadialGradientBrush RadiusX="0.450586" RadiusY="0.559218" Center="0.5,0.499998" GradientOrigin="0.5,0.499998">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="#7CFEFFEF" Offset="0"/>
                                    <GradientStop Color="#00FFFFFF" Offset="1"/>
                                </RadialGradientBrush.GradientStops>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <SkewTransform CenterX="0.5" CenterY="0.499998" AngleX="3.24417" AngleY="0"/>
                                        <RotateTransform CenterX="0.5" CenterY="0.499998" Angle="-17.9673"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                            </RadialGradientBrush>
                        </Path.Fill>
                    </Path>
                    <Path x:Name="Path_6" Width="31.0251" Height="3.50726" Canvas.Left="88.5359" Canvas.Top="53.8298" Stretch="Fill" Data="F1 M 104.005,53.8762C 112.572,53.6557 119.537,54.2413 119.561,55.1842C 119.585,56.127 112.66,57.0701 104.092,57.2906C 95.5251,57.511 88.5603,56.9255 88.536,55.9826C 88.5117,55.0398 95.4373,54.0967 104.005,53.8762 Z ">
                        <Path.Fill>
                            <RadialGradientBrush RadiusX="0.537186" RadiusY="0.467209" Center="0.5,0.500001" GradientOrigin="0.5,0.500001">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="#34FEFFEF" Offset="0"/>
                                    <GradientStop Color="#00FFFFFF" Offset="1"/>
                                </RadialGradientBrush.GradientStops>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <SkewTransform CenterX="0.5" CenterY="0.500001" AngleX="-11.7476" AngleY="0"/>
                                        <RotateTransform CenterX="0.5" CenterY="0.500001" Angle="-37.409"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                            </RadialGradientBrush>
                        </Path.Fill>
                    </Path>
                </Canvas>
            </Viewbox>
            <Ellipse x:Name="Ellipse_7" Width="74.6667" Height="82.6667" Canvas.Left="104.603" Canvas.Top="406.987" Stretch="Fill">
                <Ellipse.Fill>
                    <RadialGradientBrush RadiusX="0.573661" RadiusY="0.518145" Center="0.5,0.5" GradientOrigin="0.5,0.5">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#8FFFB500" Offset="0"/>
                            <GradientStop Color="#00FF5F1E" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup/>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse x:Name="Ellipse_8" Width="557.333" Height="189.332" Canvas.Left="193.845" Canvas.Top="479.558" Stretch="Fill">
                <Ellipse.Fill>
                    <RadialGradientBrush RadiusX="0.50091" RadiusY="0.50091" Center="0.5,0.5" GradientOrigin="0.5,0.5">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#4A000000" Offset="0"/>
                            <GradientStop Color="#00000000" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup/>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse x:Name="Ellipse_9" Width="205.991" Height="86.9482" Canvas.Left="168.517" Canvas.Top="616.414" Stretch="Fill">
                <Ellipse.Fill>
                    <RadialGradientBrush RadiusX="0.50091" RadiusY="0.50091" Center="0.5,0.5" GradientOrigin="0.5,0.5">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#16000000" Offset="0"/>
                            <GradientStop Color="#00000000" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup/>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse x:Name="Ellipse_10" Width="205.991" Height="62.2766" Canvas.Left="158.517" Canvas.Top="475.882" Stretch="Fill">
                <Ellipse.Fill>
                    <RadialGradientBrush RadiusX="0.50091" RadiusY="0.500911" Center="0.5,0.5" GradientOrigin="0.5,0.5">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#3E000000" Offset="0"/>
                            <GradientStop Color="#00000000" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup/>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Path x:Name="Path_11" Width="130.111" Height="57.2222" Canvas.Left="180.584" Canvas.Top="451.168" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF3E3E3E" Data="F1 M 226.529,506.89L 309.195,493.019L 247.862,452.668L 182.084,459.603C 182.084,459.603 202.529,458.342 215.862,474.104C 229.195,489.867 227.417,506.89 226.529,506.89 Z ">
                <Path.Fill>
                    <LinearGradientBrush StartPoint="0.537575,0.874622" EndPoint="1.37028,0.874622">
                        <LinearGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <SkewTransform CenterX="0.537575" CenterY="0.874622" AngleX="10.8086" AngleY="0"/>
                                <RotateTransform CenterX="0.537575" CenterY="0.874622" Angle="262.931"/>
                            </TransformGroup>
                        </LinearGradientBrush.RelativeTransform>
                        <LinearGradientBrush.GradientStops>
                            <GradientStop Color="#FF464544" Offset="0"/>
                            <GradientStop Color="#FF6F6F6F" Offset="0.110169"/>
                            <GradientStop Color="#FF6D6D6D" Offset="0.923729"/>
                            <GradientStop Color="#FF464544" Offset="1"/>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
            <Path x:Name="Path_12" Width="13.9266" Height="69.2278" Canvas.Left="211.45" Canvas.Top="470.776" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF3E3E3E" Data="F1 M 223.544,472.276L 212.95,477.454L 212.95,534.121L 223.877,538.503L 223.544,472.276 Z ">
                <Path.Fill>
                    <LinearGradientBrush StartPoint="0.442797,0.0820298" EndPoint="0.442797,0.939104">
                        <LinearGradientBrush.GradientStops>
                            <GradientStop Color="#FF585858" Offset="0.0169492"/>
                            <GradientStop Color="#FF8E8E8E" Offset="0.182203"/>
                            <GradientStop Color="#FF585858" Offset="0.516949"/>
                            <GradientStop Color="#FF464544" Offset="1"/>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
            <Path x:Name="Path_13" Width="555" Height="176" Canvas.Left="221.544" Canvas.Top="419.17" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FF131212" Fill="#FF464544" Data="F1 M 499.877,421.17C 568.16,421.17 710.544,469.503 774.543,513.503C 716.432,547.17 576.144,593.17 503.877,593.17C 431.61,593.17 245.833,560.46 223.877,538.503C 223.877,525.196 223.544,489.388 223.544,472.276C 248.168,447.651 431.593,421.17 499.877,421.17 Z "/>
            <Path x:Name="Path_14" Width="533.967" Height="102.141" Canvas.Left="224.466" Canvas.Top="431.062" Stretch="Fill" Fill="#FF585858" Data="F1 M 496.506,431.066C 563.173,430.621 697.44,473.788 758.432,512.717C 678.432,532.17 572.389,533.203 500.484,533.203C 428.578,533.203 260.61,521.561 224.501,505.163C 224.396,495.515 224.56,483.373 224.56,476.221C 264.506,451.01 429.839,431.51 496.506,431.066 Z "/>
            <Path x:Name="Path_15" Width="427.111" Height="41.2958" Canvas.Left="242.728" Canvas.Top="437.936" Stretch="Fill" Fill="#FF6B6B6B" Data="F1 M 669.839,479.232C 669.839,479.232 578.399,455.048 511.885,455.048C 424.506,455.048 242.728,476.843 242.728,476.843C 242.728,476.843 367.281,437.936 504.219,437.936C 571.617,438.788 651.46,470.972 669.839,479.232 Z "/>
            <Path x:Name="Path_16" Width="425.451" Height="43.6136" Canvas.Left="240.107" Canvas.Top="538.99" Stretch="Fill" Fill="#FF525252" Data="F1 M 665.552,549.714C 665.552,549.714 590.377,571.492 510.107,571.492C 429.838,571.492 325.996,554.64 240.107,538.99C 240.107,538.99 378.258,582.603 517.441,582.603C 570.554,582.603 666.441,549.714 665.552,549.714 Z "/>
            <Path x:Name="Path_17" Width="278.667" Height="176" Canvas.Left="497.877" Canvas.Top="419.17" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FF3A3735" Data="F1 M 499.877,421.17C 576.761,421.17 710.544,469.503 774.543,513.503C 716.432,547.17 579.328,593.17 503.877,593.17">
                <Path.Fill>
                    <LinearGradientBrush StartPoint="0.0304507,0.517971" EndPoint="0.977772,0.517971">
                        <LinearGradientBrush.GradientStops>
                            <GradientStop Color="#FF000000" Offset="0"/>
                            <GradientStop Color="#FE940000" Offset="0.326271"/>
                            <GradientStop Color="#FE947D00" Offset="0.639831"/>
                            <GradientStop Color="#FE889400" Offset="1"/>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
            <Path x:Name="Path_18" Width="130.111" Height="79.4445" Canvas.Left="184.695" Canvas.Top="529.39" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF3E3E3E" Data="F1 M 230.64,530.89L 313.306,550.445L 251.973,607.334L 186.195,597.556C 186.195,597.556 206.64,599.334 219.973,577.112C 233.306,554.89 231.529,530.89 230.64,530.89 Z ">
                <Path.Fill>
                    <LinearGradientBrush StartPoint="0.537575,0.11958" EndPoint="1.38297,0.11958">
                        <LinearGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <SkewTransform CenterX="0.537575" CenterY="0.11958" AngleX="-11.174" AngleY="0"/>
                                <RotateTransform CenterX="0.537575" CenterY="0.11958" Angle="96.9623"/>
                            </TransformGroup>
                        </LinearGradientBrush.RelativeTransform>
                        <LinearGradientBrush.GradientStops>
                            <GradientStop Color="#FF464544" Offset="0"/>
                            <GradientStop Color="#FF585858" Offset="0.110169"/>
                            <GradientStop Color="#FF989893" Offset="0.877119"/>
                            <GradientStop Color="#FF585858" Offset="0.898305"/>
                            <GradientStop Color="#FF464544" Offset="1"/>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
            <Path x:Name="Path_19" Width="82.6855" Height="13.2431" Canvas.Left="459.496" Canvas.Top="440.29" Stretch="Fill" Data="F1 M 501.059,440.443C 523.891,441.22 542.302,444.746 542.181,448.319C 542.059,451.892 523.451,454.158 500.618,453.38C 477.786,452.603 459.375,449.076 459.496,445.504C 459.618,441.931 478.226,439.665 501.059,440.443 Z ">
                <Path.Fill>
                    <RadialGradientBrush RadiusX="0.450588" RadiusY="0.559228" Center="0.5,0.500001" GradientOrigin="0.5,0.500001">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#7CFEFFEF" Offset="0"/>
                            <GradientStop Color="#00FFFFFF" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <SkewTransform CenterX="0.5" CenterY="0.500001" AngleX="3.24314" AngleY="0"/>
                                <RotateTransform CenterX="0.5" CenterY="0.500001" Angle="-17.9679"/>
                            </TransformGroup>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Path.Fill>
            </Path>
            <Path x:Name="Path_20" Width="90.8587" Height="10.2712" Canvas.Left="453.197" Canvas.Top="572.956" Stretch="Fill" Data="F1 M 498.498,573.092C 523.588,572.447 543.985,574.162 544.056,576.923C 544.127,579.684 523.845,582.446 498.755,583.091C 473.666,583.737 453.269,582.022 453.198,579.261C 453.126,576.5 473.408,573.738 498.498,573.092 Z ">
                <Path.Fill>
                    <RadialGradientBrush RadiusX="0.537183" RadiusY="0.467209" Center="0.5,0.5" GradientOrigin="0.5,0.5">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#34FEFFEF" Offset="0"/>
                            <GradientStop Color="#00FFFFFF" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <SkewTransform CenterX="0.5" CenterY="0.5" AngleX="-11.747" AngleY="0"/>
                                <RotateTransform CenterX="0.5" CenterY="0.5" Angle="-37.4085"/>
                            </TransformGroup>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Path.Fill>
            </Path>
            <Viewbox x:Name="Group_21" Width="200.264" Height="62.7319" Canvas.Left="142.45" Canvas.Top="575.104">
                <Canvas Width="200.264" Height="62.7319">
                    <Path x:Name="Path_22" Width="11.731" Height="25.6144" Canvas.Left="0" Canvas.Top="17.9509" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF3E3E3E" Data="F1 M 10.1172,19.4509L 1.5,21.2192L 1.5,40.5688L 10.231,42.0653L 10.1172,19.4509 Z ">
                        <Path.Fill>
                            <LinearGradientBrush StartPoint="0.689922,0.114267" EndPoint="0.689922,0.905237">
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Color="#FF585858" Offset="0.0169492"/>
                                    <GradientStop Color="#FF8E8E8E" Offset="0.182203"/>
                                    <GradientStop Color="#FF585858" Offset="0.516949"/>
                                    <GradientStop Color="#FF464544" Offset="1"/>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Path.Fill>
                    </Path>
                    <Path x:Name="Path_23" Width="192.147" Height="62.7319" Canvas.Left="8.11722" Canvas.Top="0" Stretch="Fill" StrokeThickness="4" StrokeLineJoin="Round" Stroke="#FF363332" Fill="#FF817E7C" Data="F1 M 104.475,2C 127.792,2 176.411,18.5041 198.264,33.5286C 178.421,45.0245 130.518,60.7319 105.841,60.7319C 81.1646,60.7319 17.7283,49.5626 10.231,42.0653C 10.231,37.5212 10.1172,25.2942 10.1172,19.4509C 18.5257,11.0424 81.1589,2 104.475,2 Z "/>
                    <Path x:Name="Path_24" Width="179.331" Height="34.8774" Canvas.Left="13.4322" Canvas.Top="5.37793" Stretch="Fill" Fill="#FFB09F99" Data="F1 M 103.324,5.37909C 126.089,5.22729 171.936,19.9673 192.763,33.2603C 165.446,39.9026 129.236,40.2554 104.683,40.2554C 80.1292,40.2554 25.7741,36.2799 13.4443,30.6805C 13.4082,27.3864 13.4642,23.2401 13.4642,20.7982C 27.1044,12.1894 80.56,5.53082 103.324,5.37909 Z "/>
                    <Path x:Name="Path_25" Width="145.843" Height="14.1011" Canvas.Left="16.6681" Canvas.Top="7.72522" Stretch="Fill" Fill="#FFD1B6AB" Data="F1 M 162.511,21.8263C 162.511,21.8263 131.288,13.5681 108.576,13.5681C 78.7388,13.5681 16.6681,21.0106 16.6681,21.0106C 16.6681,21.0106 59.1985,7.72522 105.958,7.72522C 128.972,8.01593 156.236,19.0059 162.511,21.8263 Z "/>
                    <Path x:Name="Path_26" Width="145.276" Height="14.8925" Canvas.Left="15.7732" Canvas.Top="42.2313" Stretch="Fill" Fill="#FF9E9E9E" Data="F1 M 161.048,45.8934C 161.048,45.8934 135.378,53.3298 107.969,53.3298C 80.5595,53.3298 45.1012,47.5755 15.7732,42.2313C 15.7732,42.2313 62.9469,57.1238 110.473,57.1238C 128.609,57.1238 161.351,45.8934 161.048,45.8934 Z "/>
                    <Path x:Name="Path_27" Width="28.2342" Height="4.52205" Canvas.Left="90.6867" Canvas.Top="8.52896" Stretch="Fill" Data="F1 M 104.879,8.58112C 112.675,8.84662 118.962,10.0507 118.921,11.2706C 118.879,12.4905 112.525,13.2643 104.729,12.9988C 96.932,12.7334 90.6453,11.5292 90.6869,10.3093C 90.7284,9.08942 97.0824,8.31567 104.879,8.58112 Z ">
                        <Path.Fill>
                            <RadialGradientBrush RadiusX="0.450586" RadiusY="0.55923" Center="0.5,0.5" GradientOrigin="0.5,0.5">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="#7CFEFFEF" Offset="0"/>
                                    <GradientStop Color="#00FFFFFF" Offset="1"/>
                                </RadialGradientBrush.GradientStops>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <SkewTransform CenterX="0.5" CenterY="0.5" AngleX="3.24367" AngleY="0"/>
                                        <RotateTransform CenterX="0.5" CenterY="0.5" Angle="-17.9673"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                            </RadialGradientBrush>
                        </Path.Fill>
                    </Path>
                    <Path x:Name="Path_28" Width="31.0251" Height="3.50727" Canvas.Left="88.5359" Canvas.Top="53.8298" Stretch="Fill" Data="F1 M 104.005,53.8762C 112.572,53.6557 119.537,54.2413 119.561,55.1841C 119.585,56.127 112.66,57.0701 104.092,57.2906C 95.5251,57.511 88.5603,56.9255 88.536,55.9826C 88.5117,55.0398 95.4373,54.0967 104.005,53.8762 Z ">
                        <Path.Fill>
                            <RadialGradientBrush RadiusX="0.53719" RadiusY="0.467221" Center="0.5,0.500011" GradientOrigin="0.5,0.500011">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="#34FEFFEF" Offset="0"/>
                                    <GradientStop Color="#00FFFFFF" Offset="1"/>
                                </RadialGradientBrush.GradientStops>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <SkewTransform CenterX="0.5" CenterY="0.500011" AngleX="-11.7491" AngleY="0"/>
                                        <RotateTransform CenterX="0.5" CenterY="0.500011" Angle="-37.4096"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                            </RadialGradientBrush>
                        </Path.Fill>
                    </Path>
                </Canvas>
            </Viewbox>
            <Ellipse x:Name="Ellipse_29" Width="74.6667" Height="82.6667" Canvas.Left="104.603" Canvas.Top="561.987" Stretch="Fill">
                <Ellipse.Fill>
                    <RadialGradientBrush RadiusX="0.573661" RadiusY="0.518145" Center="0.5,0.5" GradientOrigin="0.5,0.5">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#8FFFC63A" Offset="0"/>
                            <GradientStop Color="#00FF5F1E" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup/>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Canvas>
        <Canvas x:Name="Face_Girl_3" d:IsLayer="True" Width="800" Height="800" Canvas.Left="0" Canvas.Top="0">
            <Ellipse x:Name="Ellipse_30" Width="137.778" Height="64.8889" Canvas.Left="265.986" Canvas.Top="441.722" Stretch="Fill" StrokeThickness="8" StrokeLineJoin="Round" Stroke="#56FFFFFF" Fill="#C7000000"/>
            <Path x:Name="Path_31" Width="104.333" Height="61.6667" Canvas.Left="281.043" Canvas.Top="433.003" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF263627" Data="F1 M 333.21,434.503C 361.193,434.503 383.877,449.725 383.877,468.503C 383.877,487.281 360.115,493.17 332.132,493.17C 304.15,493.17 282.543,487.281 282.543,468.503C 282.543,449.725 305.228,434.503 333.21,434.503 Z ">
                <Path.Fill>
                    <RadialGradientBrush RadiusX="0.65" RadiusY="0.630229" Center="0.5,0.376825" GradientOrigin="0.5,0.376825">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#FE72B567" Offset="0"/>
                            <GradientStop Color="#FE215337" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup/>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Path.Fill>
            </Path>
            <Path x:Name="Path_32" Width="191.66" Height="171.395" Canvas.Left="235.077" Canvas.Top="289.707" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF44301E" Data="F1 M 330.907,291.207C 383.004,291.207 425.237,331.578 425.237,381.378C 425.237,431.178 383.969,459.602 331.872,459.602C 279.775,459.602 236.577,431.178 236.577,381.378C 236.577,331.578 278.81,291.207 330.907,291.207 Z ">
                <Path.Fill>
                    <RadialGradientBrush RadiusX="0.771455" RadiusY="0.689885" Center="0.510516,0.167781" GradientOrigin="0.510516,0.167781">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#FEFFFAE8" Offset="0"/>
                            <GradientStop Color="#FEFFEEBB" Offset="0.139831"/>
                            <GradientStop Color="#FFCB9F77" Offset="0.788136"/>
                            <GradientStop Color="#FFA45A42" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="0.510516" CenterY="0.167781" Angle="90"/>
                            </TransformGroup>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Path.Fill>
            </Path>
            <Viewbox x:Name="Group_33" Width="33.5947" Height="48.518" Canvas.Left="254.599" Canvas.Top="366.017">
                <Canvas Width="33.5947" Height="48.518">
                    <Viewbox x:Name="Group_34" Width="26.4369" Height="48.518" Canvas.Left="7.15782" Canvas.Top="0">
                        <Canvas Width="26.4369" Height="48.518">
                            <Path x:Name="Path_35" Width="24.7215" Height="24.1663" Canvas.Left="1.33684" Canvas.Top="24.3516" Stretch="Fill" StrokeThickness="1.34774" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 13.6917,25.0255C 7.24042,25.0255 2.01071,30.1336 2.01071,36.4348C 2.01071,42.736 7.24042,47.8441 13.6917,47.8441C 20.1429,47.8441 25.6758,45.4245 25.3726,39.1302C 24.9101,29.528 20.1429,25.0255 13.6917,25.0255 Z ">
                                <Path.Fill>
                                    <LinearGradientBrush StartPoint="0.499736,0.0456107" EndPoint="1.45157,0.0456107">
                                        <LinearGradientBrush.RelativeTransform>
                                            <TransformGroup>
                                                <SkewTransform CenterX="0.499736" CenterY="0.0456107" AngleX="-0.0377889" AngleY="0"/>
                                                <RotateTransform CenterX="0.499736" CenterY="0.0456107" Angle="90.8116"/>
                                            </TransformGroup>
                                        </LinearGradientBrush.RelativeTransform>
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Color="#FE232531" Offset="0"/>
                                            <GradientStop Color="#FE7976BC" Offset="1"/>
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Path.Fill>
                            </Path>
                            <Path x:Name="Path_36" Width="16" Height="15.4446" Canvas.Left="6.09003" Canvas.Top="28.5982" Stretch="Fill" Fill="#FF000000" Data="F1 M 14.09,28.5982C 9.6716,28.5982 6.09003,32.0555 6.09003,36.3206C 6.09003,40.5855 9.67172,44.0428 14.09,44.0428C 18.5083,44.0428 22.09,40.5855 22.09,36.3206C 22.09,32.0555 18.5084,28.5982 14.09,28.5982 Z "/>
                            <Path x:Name="Path_37" Width="5.73462" Height="5.73459" Canvas.Left="5.85938" Canvas.Top="29.1003" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 8.72668,29.1003C 7.14307,29.1003 5.85938,30.3839 5.85938,31.9675C 5.85938,33.5511 7.14313,34.8348 8.72668,34.8348C 10.3103,34.8348 11.594,33.5511 11.594,31.9675C 11.594,30.3839 10.3103,29.1003 8.72668,29.1003 Z "/>
                            <Path x:Name="Path_38" Width="25.7078" Height="9.70916" Canvas.Left="0.729128" Canvas.Top="2.04048" Stretch="Fill" Fill="#FF6E4A29" Data="F1 M 0.781708,11.7316C 0,12.0475 8.11124,8.1297 13.3537,7.02795C 19.1853,5.80231 26.4369,7.15393 26.4369,7.15393C 26.4369,7.15393 22.1722,0 11.0958,2.61563C 7.86926,3.37756 3.99216,6.67969 0.781708,11.7316 Z "/>
                        </Canvas>
                    </Viewbox>
                    <Path x:Name="Path_39" Width="27.3284" Height="10.9924" Canvas.Left="1.85355" Canvas.Top="17.6978" Stretch="Fill" Fill="#FF000000" Data="F1 M 21.7164,24.5301C 21.64,24.1081 3.31609,26.4581 4.43919,17.6978C 2.41759,18.8957 0,27.4541 4.04323,27.4541C 7.0432,28.0096 24.8905,24.093 29.182,28.6902C 26.5988,26.093 23.7237,25.2319 21.7164,24.5301 Z "/>
                </Canvas>
            </Viewbox>
            <Path x:Name="Path_40" Width="182.996" Height="76.9279" Canvas.Left="240.567" Canvas.Top="326.602" Stretch="Fill" Fill="#71673902" Data="F1 M 423.435,390.56C 415.614,362.86 403.392,353.221 393.17,348.748C 376.059,360.554 319.614,379.388 262.448,350.554C 248.448,361.221 243.866,393.627 240.87,403.53C 238.203,395.696 254.037,333.231 254.037,333.231C 254.037,333.231 308.458,326.602 311.784,326.602C 315.109,326.602 393.415,327.206 393.415,327.206C 393.415,327.206 425.853,362.14 423.435,390.56 Z "/>
            <Path x:Name="Path_41" Width="21.725" Height="7.79736" Canvas.Left="321.823" Canvas.Top="431.013" Stretch="Fill" StrokeThickness="2.1433" StrokeLineJoin="Round" Stroke="#FF824F39" Fill="#FFB56654" Data="F1 M 322.895,432.084C 322.895,432.084 341.814,432.168 342.477,432.084C 342.477,432.084 338.866,437.738 332.686,437.738C 326.529,437.738 322.895,432.084 322.895,432.084 Z "/>
            <Path x:Name="Path_42" Width="206.588" Height="152.383" Canvas.Left="229.208" Canvas.Top="273.255" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF4F5518" Fill="#FFDFBF5A" Data="F1 M 421.837,381.749C 423.128,395.382 421.614,414.138 415.114,424.138C 431.781,415.304 439.459,370.782 430.537,343.641C 421.615,316.499 393.42,274.755 330.529,274.755C 267.101,274.755 240.948,322.054 233.392,348.721C 225.837,375.388 235.726,413.055 244.614,422.971C 237.468,398.337 239.726,367.277 264.614,340.193C 265.105,339.66 265.615,343.916 263.392,346.388C 273.837,354.61 316.391,360.327 326.17,360.971C 328.788,361.143 330.866,356.413 331.021,353.356C 331.388,356.243 333.413,361.232 335.618,361.133C 368.69,359.645 389.988,345.602 393.059,342.721C 391.948,339.472 391.011,335.664 391.837,335.86C 392.835,336.097 417.926,359.605 421.837,381.749 Z "/>
            <Path x:Name="Path_43" Width="173.845" Height="55.8271" Canvas.Left="245.939" Canvas.Top="278.365" Stretch="Fill" Fill="#5EFCFFC1" Data="F1 M 330.238,278.433C 357.759,277.641 394.69,283.097 419.784,334.192C 410.509,326.837 384.716,304.865 330.594,304.865C 276.474,304.865 253.741,324.707 245.939,330.564C 265.591,289.446 309.571,278.433 330.238,278.433 Z "/>
            <Path x:Name="Path_44" Width="38.4698" Height="27.8335" Canvas.Left="360.477" Canvas.Top="417.173" Stretch="Fill" Data="F1 M 374.573,420.392C 364.339,425.308 358.343,434.082 361.181,439.991C 364.019,445.899 374.616,446.704 384.85,441.788C 395.084,436.872 401.08,428.098 398.243,422.189C 395.405,416.281 384.808,415.476 374.573,420.392 Z ">
                <Path.Fill>
                    <RadialGradientBrush RadiusX="0.483498" RadiusY="0.485662" Center="0.500001,0.500001" GradientOrigin="0.500001,0.500001">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#80F73939" Offset="0"/>
                            <GradientStop Color="#00B06F55" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <SkewTransform CenterX="0.500001" CenterY="0.500001" AngleX="-18.5302" AngleY="0"/>
                                <RotateTransform CenterX="0.500001" CenterY="0.500001" Angle="168.975"/>
                            </TransformGroup>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Path.Fill>
            </Path>
            <Path x:Name="Path_45" Width="36.8711" Height="26.6768" Canvas.Left="264.906" Canvas.Top="417.751" Stretch="Fill" Data="F1 M 288.266,420.836C 298.075,425.548 303.822,433.958 301.102,439.62C 298.382,445.283 288.226,446.054 278.417,441.343C 268.608,436.632 262.861,428.222 265.581,422.559C 268.301,416.896 278.457,416.125 288.266,420.836 Z ">
                <Path.Fill>
                    <RadialGradientBrush RadiusX="0.483497" RadiusY="0.485662" Center="0.5,0.500001" GradientOrigin="0.5,0.500001">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#80F73939" Offset="0"/>
                            <GradientStop Color="#00B06F55" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <SkewTransform CenterX="0.5" CenterY="0.500001" AngleX="18.5301" AngleY="0"/>
                                <RotateTransform CenterX="0.5" CenterY="0.500001" Angle="11.0253"/>
                            </TransformGroup>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Path.Fill>
            </Path>
            <Viewbox x:Name="Group_46" Width="33.5947" Height="48.518" Canvas.Left="372.866" Canvas.Top="366.017">
                <Canvas Width="33.5947" Height="48.518">
                    <Viewbox x:Name="Group_47" Width="26.4369" Height="48.518" Canvas.Left="0" Canvas.Top="0">
                        <Canvas Width="26.4369" Height="48.518">
                            <Path x:Name="Path_48" Width="24.7215" Height="24.1663" Canvas.Left="0.378533" Canvas.Top="24.3516" Stretch="Fill" StrokeThickness="1.34774" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 12.7452,25.0255C 19.1965,25.0255 24.4262,30.1336 24.4262,36.4348C 24.4262,42.736 19.1964,47.8441 12.7452,47.8441C 6.29407,47.8441 0.761139,45.4245 1.0643,39.1302C 1.52682,29.528 6.29404,25.0255 12.7452,25.0255 Z ">
                                <Path.Fill>
                                    <LinearGradientBrush StartPoint="0.484648,0.0961876" EndPoint="1.33083,0.0961876">
                                        <LinearGradientBrush.RelativeTransform>
                                            <TransformGroup>
                                                <SkewTransform CenterX="0.484648" CenterY="0.0961876" AngleX="0.0564695" AngleY="0"/>
                                                <RotateTransform CenterX="0.484648" CenterY="0.0961876" Angle="88.7828"/>
                                            </TransformGroup>
                                        </LinearGradientBrush.RelativeTransform>
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Color="#FE232531" Offset="0"/>
                                            <GradientStop Color="#FE7976BC" Offset="1"/>
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Path.Fill>
                            </Path>
                            <Path x:Name="Path_49" Width="16" Height="15.4446" Canvas.Left="4.34692" Canvas.Top="28.5982" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.3469,28.5982C 16.7653,28.5982 20.3469,32.0555 20.3469,36.3206C 20.3469,40.5855 16.7652,44.0428 12.3469,44.0428C 7.92859,44.0428 4.34692,40.5855 4.34692,36.3206C 4.34692,32.0555 7.9285,28.5982 12.3469,28.5982 Z "/>
                            <Path x:Name="Path_50" Width="5.73459" Height="5.73459" Canvas.Left="4.04288" Canvas.Top="29.1003" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 6.91019,29.1003C 8.49377,29.1003 9.77747,30.3839 9.77747,31.9675C 9.77747,33.5511 8.49377,34.8348 6.91019,34.8348C 5.32663,34.8348 4.04288,33.5511 4.04288,31.9675C 4.04288,30.3839 5.32657,29.1003 6.91019,29.1003 Z "/>
                            <Path x:Name="Path_51" Width="25.7077" Height="9.70916" Canvas.Left="0" Canvas.Top="2.04048" Stretch="Fill" Fill="#FF6E4A29" Data="F1 M 25.6552,11.7316C 26.4369,12.0475 18.3257,8.1297 13.0832,7.02795C 7.25159,5.80231 0,7.15393 0,7.15393C 0,7.15393 4.26468,0 15.3411,2.61563C 18.5676,3.37756 22.4447,6.67969 25.6552,11.7316 Z "/>
                        </Canvas>
                    </Viewbox>
                    <Path x:Name="Path_52" Width="27.3284" Height="10.9924" Canvas.Left="4.41272" Canvas.Top="17.6978" Stretch="Fill" Fill="#FF000000" Data="F1 M 11.8783,24.5301C 11.9547,24.1081 30.2786,26.4581 29.1555,17.6978C 31.1771,18.8957 33.5947,27.4541 29.5514,27.4541C 26.5515,28.0096 8.70422,24.093 4.41272,28.6902C 6.99588,26.093 9.87094,25.2319 11.8783,24.5301 Z "/>
                </Canvas>
            </Viewbox>
            <Viewbox x:Name="Group_53" Width="89.2222" Height="67.8574" Canvas.Left="289.17" Canvas.Top="273.53">
                <Canvas Width="89.2222" Height="67.8574">
                    <Path x:Name="Path_54" Width="53.2217" Height="57.2385" Canvas.Left="0.282065" Canvas.Top="7.41022" Stretch="Fill" StrokeThickness="0.0864429" StrokeLineJoin="Round" Stroke="#D2FBFFB1" Fill="#D2FBFFB1" Data="F1 M 0.34613,63.9778C 0.396057,64.1629 0.383728,64.3776 0.495911,64.533C 0.552124,64.6108 0.69635,64.6257 0.780304,64.5791C 1.43472,64.2156 1.66672,63.3626 1.99316,62.689C 9.99384,48.3768 20.0854,34.7239 32.7285,24.2835C 36.903,20.8364 41.3491,17.6966 45.9843,14.8994C 47.7488,13.8346 49.5555,12.8323 51.249,11.6577C 52.2035,10.9957 53.7285,10.0517 53.42,8.93188C 53.0832,7.70947 51.1781,7.51685 49.9113,7.46265C 47.652,7.36597 45.4077,8.04865 43.239,8.68927C 37.4034,10.413 32.2019,14.0585 27.4668,17.88C 18.9402,24.7616 12.2059,34.0191 7.22125,43.7768C 4.22864,49.6348 1.02649,55.737 0.364014,62.2817L 0.325287,63.2106L 0.34613,63.9778 Z "/>
                </Canvas>
            </Viewbox>
            <Viewbox x:Name="Group_55" Width="86.2222" Height="66.348" Canvas.Left="274.948" Canvas.Top="273.595">
                <Canvas Width="86.2222" Height="66.348">
                    <Path x:Name="Path_56" Width="50.1118" Height="55.4352" Canvas.Left="0.47025" Canvas.Top="7.62567" Stretch="Fill" StrokeThickness="0.0653593" StrokeLineJoin="Round" Stroke="#ABFBFFAF" Fill="#ABFBFFAF" Data="F1 M 0.50293,62.4499C 0.532135,62.6239 0.505493,62.8174 0.590576,62.972C 0.625671,63.0357 0.747986,63.0447 0.806824,63.0019C 1.37988,62.5849 1.55145,61.7901 1.83221,61.1394C 8.87073,47.0291 17.6928,33.091 29.7973,22.9854C 33.8643,19.59 38.2202,16.4983 42.831,13.8887C 44.6017,12.8865 46.4208,11.969 48.1665,10.9238C 49.1061,10.3613 50.8085,9.6828 50.5161,8.62744C 50.2034,7.4989 48.304,7.65466 47.1332,7.67932C 45.0433,7.72339 42.9995,8.39844 41.0144,9.05359C 35.3827,10.912 30.3428,14.442 25.7519,18.1961C 18.528,24.1033 12.9691,32.0357 8.43213,40.1901C 4.85413,46.6208 1.63507,53.5455 0.600433,60.8315L 0.52478,61.7193L 0.50293,62.4499 Z "/>
                </Canvas>
            </Viewbox>
            <Viewbox x:Name="Group_57" Width="86.2222" Height="65.9662" Canvas.Left="258.726" Canvas.Top="275.422">
                <Canvas Width="86.2222" Height="65.9662">
                    <Path x:Name="Path_58" Width="49.9857" Height="54.964" Canvas.Left="0.611926" Canvas.Top="7.70598" Stretch="Fill" StrokeThickness="0.0451885" StrokeLineJoin="Round" Stroke="#68FAFF9A" Fill="#68FAFF9A" Data="F1 M 0.639923,62.1024C 0.64801,62.2711 0.610199,62.4485 0.664246,62.6086C 0.68042,62.6566 0.780273,62.6587 0.815491,62.6223C 1.30008,62.122 1.43439,61.3716 1.67828,60.7191C 8.00842,46.1842 17.0639,32.096 29.2716,21.9814C 33.3998,18.561 37.8334,15.4458 42.573,12.9405C 44.3799,11.9854 46.2325,11.119 48.0569,10.1979C 48.9771,9.73328 50.828,9.35449 50.5462,8.36292C 50.2519,7.32739 48.4135,7.84552 47.3425,7.95465C 45.305,8.16229 43.3371,8.86072 41.4109,9.55652C 35.9254,11.538 30.9937,14.9829 26.4747,18.6701C 19.3251,24.5037 13.7461,32.253 9.11987,40.2372C 5.46002,46.5535 2.18512,53.3337 0.82663,60.5063L 0.708466,61.3835L 0.639923,62.1024 Z "/>
                </Canvas>
            </Viewbox>
            <Viewbox x:Name="Group_59" Width="86.2222" Height="66.4278" Canvas.Left="304.726" Canvas.Top="276.96">
                <Canvas Width="86.2222" Height="66.4278">
                    <Path x:Name="Path_60" Width="50.1397" Height="55.5588" Canvas.Left="0.439516" Canvas.Top="7.58351" Stretch="Fill" StrokeThickness="0.0695761" StrokeLineJoin="Round" Stroke="#ABFBFFA8" Fill="#ABFBFFA8" Data="F1 M 0.474304,62.5225C 0.507935,62.6977 0.484375,62.8944 0.575226,63.0479C 0.614655,63.1145 0.741089,63.1248 0.805054,63.0812C 1.39328,62.6805 1.57574,61.8778 1.86444,61.2272C 9.04791,47.2098 17.8241,33.2993 29.9072,23.1953C 33.9615,19.805 38.3013,16.718 42.8849,14.0869C 44.6483,13.0747 46.4608,12.1458 48.1895,11.0756C 49.1341,10.4907 50.8055,9.75366 50.5098,8.68274C 50.1921,7.5321 48.2832,7.61591 47.0895,7.62177C 44.9898,7.63208 42.9293,8.30176 40.9316,8.94843C 35.2699,10.7813 30.2068,14.3288 25.6008,18.097C 18.3614,24.0197 12.8065,31.9903 8.28836,40.1802C 4.72736,46.6352 1.52036,53.5912 0.553162,60.8994L 0.486389,61.7895L 0.474304,62.5225 Z "/>
                </Canvas>
            </Viewbox>
            <Viewbox x:Name="Group_61" Width="86.2222" Height="65.9663" Canvas.Left="319.392" Canvas.Top="281.199">
                <Canvas Width="86.2222" Height="65.9663">
                    <Path x:Name="Path_62" Width="49.9857" Height="54.964" Canvas.Left="0.61192" Canvas.Top="7.70599" Stretch="Fill" StrokeThickness="0.0451885" StrokeLineJoin="Round" Stroke="#6AFAFF9A" Fill="#6AFAFF9A" Data="F1 M 0.639923,62.1024C 0.64801,62.2711 0.610199,62.4486 0.664215,62.6086C 0.68042,62.6566 0.780243,62.6587 0.81546,62.6223C 1.30008,62.122 1.43436,61.3716 1.67825,60.7191C 8.00839,46.1842 17.0639,32.096 29.2716,21.9814C 33.3997,18.561 37.8334,15.4458 42.573,12.9406C 44.3799,11.9854 46.2325,11.119 48.0569,10.1979C 48.9771,9.73328 50.8279,9.35449 50.5462,8.36292C 50.2519,7.32739 48.4135,7.84555 47.3425,7.95468C 45.305,8.16232 43.3371,8.86072 41.4109,9.55652C 35.9254,11.538 30.9936,14.9829 26.4747,18.6701C 19.3251,24.5037 13.7461,32.2531 9.11984,40.2372C 5.45999,46.5535 2.18512,53.3337 0.82663,60.5063L 0.708466,61.3835L 0.639923,62.1024 Z "/>
                </Canvas>
            </Viewbox>
            <Path x:Name="Path_63" Width="206.667" Height="94.9438" Canvas.Left="229.057" Canvas.Top="284.251" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#67000000" Fill="#FFDFDFDF" Data="F1 M 434.224,377.694C 419.177,256.367 246.288,254.145 230.557,376.806C 255.621,279.034 399.621,266.589 434.224,377.694 Z "/>
            <Viewbox x:Name="Group_64" Width="62.5641" Height="99.8643" Canvas.Left="362.66" Canvas.Top="227.873">
                <Canvas Width="62.5641" Height="99.8643">
                    <Path x:Name="Path_65" Width="41.7173" Height="71.6743" Canvas.Left="8.11356" Canvas.Top="17.4249" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF313131" Fill="#FFFFFFFF" Data="F1 M 10.6196,69.2201C 10.6196,69.2201 1.5,1.5 38.1752,23.2202C 61.0641,36.7756 38.5276,76.8341 35.5722,87.5992"/>
                    <Path x:Name="Path_66" Width="30.0553" Height="62.4436" Canvas.Left="13.0386" Canvas.Top="24.0987" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FFB03500" Data="F1 M 14.6196,72.2645C 14.6196,72.2645 12.3974,19.6646 31.2307,26.1532C 53.2314,33.7332 33.6619,78.154 31.7307,85.0423">
                        <Path.Fill>
                            <RadialGradientBrush RadiusX="0.840576" RadiusY="1.52673" Center="0.35972,0.849758" GradientOrigin="0.35972,0.849758">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="#FEE4E4E4" Offset="0.035865"/>
                                    <GradientStop Color="#FEFF5D04" Offset="1"/>
                                </RadialGradientBrush.GradientStops>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <SkewTransform CenterX="0.35972" CenterY="0.849758" AngleX="18.0147" AngleY="0"/>
                                        <RotateTransform CenterX="0.35972" CenterY="0.849758" Angle="-66.1328"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                            </RadialGradientBrush>
                        </Path.Fill>
                    </Path>
                </Canvas>
            </Viewbox>
            <Viewbox x:Name="Group_67" Width="62.5641" Height="99.8643" Canvas.Left="238.909" Canvas.Top="227.873">
                <Canvas Width="62.5641" Height="99.8643">
                    <Path x:Name="Path_68" Width="41.7173" Height="71.6743" Canvas.Left="12.7332" Canvas.Top="17.4249" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF313131" Fill="#FFFFFFFF" Data="F1 M 51.9445,69.2201C 51.9445,69.2201 61.0641,1.5 24.3889,23.2202C 1.5,36.7756 24.0365,76.8341 26.9919,87.5992"/>
                    <Path x:Name="Path_69" Width="30.0553" Height="62.4436" Canvas.Left="19.4702" Canvas.Top="24.0987" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FFB03500" Data="F1 M 47.9445,72.2645C 47.9445,72.2645 50.1666,19.6646 31.3334,26.1532C 9.33263,33.7332 28.9021,78.154 30.8333,85.0423">
                        <Path.Fill>
                            <RadialGradientBrush RadiusX="0.840576" RadiusY="1.52673" Center="0.64028,0.849758" GradientOrigin="0.64028,0.849758">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="#FEE4E4E4" Offset="0.035865"/>
                                    <GradientStop Color="#FEFF5D04" Offset="1"/>
                                </RadialGradientBrush.GradientStops>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <SkewTransform CenterX="0.64028" CenterY="0.849758" AngleX="-18.0147" AngleY="0"/>
                                        <RotateTransform CenterX="0.64028" CenterY="0.849758" Angle="246.133"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                            </RadialGradientBrush>
                        </Path.Fill>
                    </Path>
                </Canvas>
            </Viewbox>
            <Path x:Name="Path_70" Width="141.333" Height="30.69" Canvas.Left="260.002" Canvas.Top="292.181" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 260.002,322.204C 260.185,322.664 292.335,291.204 328.669,292.204C 365.002,293.204 383.169,304.038 401.335,322.871C 379.335,304.538 360.835,295.638 328.002,295.638C 300.669,295.638 274.002,311.538 260.002,322.204 Z "/>
        </Canvas>
        <Canvas x:Name="Helmet" d:IsLayer="True" Width="800" Height="800" Canvas.Left="0" Canvas.Top="0">
            <Ellipse x:Name="Ellipse_71" Width="252" Height="252" Canvas.Left="204" Canvas.Top="222" Stretch="Fill" StrokeThickness="8" StrokeLineJoin="Round" Stroke="#5FFFFFFF">
                <Ellipse.Fill>
                    <RadialGradientBrush RadiusX="0.63492" RadiusY="0.634921" Center="0.477954,0.779541" GradientOrigin="0.477954,0.779541">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#00FFFFFF" Offset="0"/>
                            <GradientStop Color="#34FFFFFF" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="0.477954" CenterY="0.779541" Angle="-90"/>
                            </TransformGroup>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Path x:Name="Path_72" Width="182.649" Height="44.8834" Canvas.Left="238.898" Canvas.Top="235.638" Stretch="Fill" Data="F1 M 327.775,235.638C 350.387,235.638 395.194,242.694 421.547,280.521C 409.625,269.937 373.653,255.985 329.03,255.985C 284.408,255.985 248.926,271.309 238.898,279.737C 258.965,250.337 301.21,235.638 327.775,235.638 Z ">
                <Path.Fill>
                    <RadialGradientBrush RadiusX="0.531" RadiusY="1.39377" Center="0.502061,1.47467" GradientOrigin="0.502061,1.47467">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#00FFFFFF" Offset="0.800847"/>
                            <GradientStop Color="#9DFFFFFF" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <SkewTransform CenterX="0.502061" CenterY="1.47467" AngleX="-0.0142521" AngleY="0"/>
                            </TransformGroup>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Path.Fill>
            </Path>
        </Canvas>
      
    </Grid>

5.将绘制转变为画刷

WPF中的画刷比GDI+中要强大得多,除了常用的实心画刷、渐变画刷外,还支持更多的平铺画刷,这包括DrawingBrush、ImageBrush、VisualBrush,其中DrawingBrush使得我们可以将自定义的绘制用于任何可以使用普通画刷的地方。
比如下面的代码,我们将自定义一个椭圆和一个矩形,然后将它们合并成一个图形并将

改图形用作窗口的背景画刷:

 public MainWindow()
        {
            InitializeComponent();
            EllipseGeometry ellipse = new EllipseGeometry(new Point(50, 50), 50, 20);
            RectangleGeometry rect = new RectangleGeometry(new Rect(50, 50, 50, 20), 5, 5);
            PathGeometry combin = Geometry.Combine(ellipse, rect, GeometryCombineMode.Xor, null);
            GeometryDrawing drawing = new GeometryDrawing(Brushes.LightBlue, new Pen(Brushes.Green, 2), combin);

            DrawingBrush background = new DrawingBrush(drawing);
            this.Background = background;
        }

 也许将整个图形填充于整个区域并不是我们想要的结果,没关系,我们可以通过设置视口(Viewport)和平铺方式(TileMode)来调整图形的平铺效果。


Viewport为我们指示了如何将图形投射到绘制表面,如果我们将绘制表面的左上角定义为(0,0),右下角定义我(1,1),那么可以设置一个相当与该值的矩形(Rect)来指示我们的图形应该被投射到哪里。比如Rect(0,0,0.5,0.5)则表示在绘制表面的左上角开始的长宽均为绘制表面1/2的矩形区域。这样的矩形Rect(0,0,0.5,0.5)就是我们所说的视口(这与3D中的视口类似)。所以要得到上图的效果,我们只需要这样设置我们的DrawingBrush就可以了:

background.Viewport = new Rect(0, 0, 0.15, 0.15);
background.TileMode = TileMode.Tile;


此外,DrawingBrush还有一个很有意思的属性ViewBox(继承于TileBrush),它指示了只取图形中的哪一部分作为观察区域(这与Clip不同),它的定义方式与Viewport类似,但它不是相对于绘制表面而是相当于我们的图形的。
SDK中是这样解释ViewBox的:


参考下面的代码,我们仅仅取了整个绘制的图形的1/4(整个图形的左下部分)并将其作为窗口的的背景画刷:

 public Window1()
        {
            InitializeComponent();


            //background
            EllipseGeometry ellipse = new EllipseGeometry(new Point(50, 50), 50, 20);
            RectangleGeometry rect = new RectangleGeometry(new Rect(50, 50, 50, 20), 5, 5);
            PathGeometry combin = Geometry.Combine(ellipse, rect, GeometryCombineMode.Xor, null);
            GeometryDrawing drawing = new GeometryDrawing(Brushes.LightBlue, new Pen(Brushes.Green, 2), combin);

            DrawingBrush background = new DrawingBrush(drawing);
            background.Viewbox = new Rect(0.5, 0.5, 0.5, 0.5);
            this.Background = background;


        }

效果图如下:

此外,值得一提的是,Viewport和Viewbox除了使用相对值外,你也可以使用绝对坐标值,不过你需要将ViewportUnits属性和ViewboxUnit属性由BrushMappingMode.RelativeToBoundingBox修改为BrshMappingMode.Absolute。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF 创建自定义的控件,可以使用 UserControl 或自定义控件的方式。下面介绍如何使用自定义控件的方式来扩展 Ellipse 控件。 1. 新建一个类,并继承自 Ellipse 控件。 ```csharp public class MyEllipse : Ellipse { // 在这里添加自定义的属性和方法 } ``` 2. 在 MyEllipse 类添加自定义的属性和方法。 ```csharp public class MyEllipse : Ellipse { public string Text { get; set; } public MyEllipse() { this.Width = 100; this.Height = 100; this.Fill = Brushes.Red; } protected override void OnRender(DrawingContext drawingContext) { base.OnRender(drawingContext); var formattedText = new FormattedText(Text, CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface("Arial"), 14, Brushes.Black); drawingContext.DrawText(formattedText, new Point(10, 10)); } } ``` 在上面的代码,我们添加了一个名为 Text 的属性,并在构造函数设置了 Ellipse 的默认宽度、高度和填充颜色。我们还重写了 OnRender 方法,并在其绘制了文本。 3. 在 XAML 文件使用 MyEllipse 控件。 ```xml <local:MyEllipse Text="Hello World!" /> ``` 在上面的代码,我们使用了自定义的 MyEllipse 控件,并设置了 Text 属性为 "Hello World!"。运行程序,就可以看到一个带有文本的圆形了。 这样做的好处是,可以轻松地添加自定义的属性和方法,并重写控件的生命周期方法,从而实现更加灵活和高效的控件扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值