1,利用路径绘制图形(PathGeometry)
有时我们需要绘制的图形可能很复杂而显得不是那么的规则,这时我们就需要将图形分解成若干小的部分(分解成线段、圆弧、贝塞尔曲线等等),然后将这些小部分使用PathGeometry组合在一起实现最终的绘制。
一个PathGeometry对象有若干个PathFingure对象组成并保存在其Fingures属性中,一个PathFingure对象有若干个PathSegment对象组成并保存在其Segments属性中,而PathSegment则表示一些最基本的曲线和线段。继承了PathSegment的类主要有:LineSegment直线段,ArcSegment弧线段,BezierSegment贝塞尔曲线段等。反过来说,我们由一些基本的曲线和线段相互连接而组成PathFingure(可以看着一个独立的子图形),然后我们再由若干个PathFingure构成最终的复杂图形。
参考如下代码:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path Stroke="Black" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="100,50"
>
<PathFigure.Segments>
<PathSegmentCollection>
<LineSegment Point="200,50"
/>
<LineSegment Point="150,100"
/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Page>
在上面的代码中,我们定义了一个图形,它由一个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分别负责图形中的子图形并选择合适的颜色与填充方式,就可以绘制出最终的复杂图形,你能相信下面这么漂亮的图形就是这样绘制出来的吗?

你可以粘贴下面的代码到XamlPad到查看:

上面复杂图形的代码
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2006" c:Ignorable="d" x:Name="SpaceCute_Tokens_design" Width="800" Height="800">
<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"/>
有时我们需要绘制的图形可能很复杂而显得不是那么的规则,这时我们就需要将图形分解成若干小的部分(分解成线段、圆弧、贝塞尔曲线等等),然后将这些小部分使用PathGeometry组合在一起实现最终的绘制。
一个PathGeometry对象有若干个PathFingure对象组成并保存在其Fingures属性中,一个PathFingure对象有若干个PathSegment对象组成并保存在其Segments属性中,而PathSegment则表示一些最基本的曲线和线段。继承了PathSegment的类主要有:LineSegment直线段,ArcSegment弧线段,BezierSegment贝塞尔曲线段等。反过来说,我们由一些基本的曲线和线段相互连接而组成PathFingure(可以看着一个独立的子图形),然后我们再由若干个PathFingure构成最终的复杂图形。
参考如下代码:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path Stroke="Black" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="100,50">
<PathFigure.Segments>
<PathSegmentCollection>
<LineSegment Point="200,50"/>
<LineSegment Point="150,100"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Page>在上面的代码中,我们定义了一个图形,它由一个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分别负责图形中的子图形并选择合适的颜色与填充方式,就可以绘制出最终的复杂图形,你能相信下面这么漂亮的图形就是这样绘制出来的吗?

你可以粘贴下面的代码到XamlPad到查看:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2006" c:Ignorable="d" x:Name="SpaceCute_Tokens_design" Width="800" Height="800">
<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"/>