程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> 在WPF中自定義你的繪制(四)---part1

在WPF中自定義你的繪制(四)---part1

編輯:關於.NET

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>

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved