WPF 中的形狀和基本繪圖概述

阿新 • • 發佈：2020-12-12

本主題概述如何使用Shape物件繪圖。Shape是一種允許您在螢幕中繪製形狀的UIElement型別。由於它們是 UI 元素，因此Shape物件可以在Panel元素和大多數控制元件中使用。

Windows Presentation Foundation (WPF) 提供了對圖形和呈現服務的若干層訪問。在頂層，Shape物件很容易使用，並且提供了許多有用功能，例如佈局和參與 Windows Presentation Foundation (WPF) 事件系統。

本主題包括下列各節。

形狀物件
使用 Path 和 Geometry
繪製形狀
可拉伸形狀
變換形狀
相關主題

形狀物件

WPF 提供了許多易於使用的

Shape物件。所有形狀物件都是從Shape類繼承的。可用的 Shape 物件包括Ellipse、Line、Path、Polygon、Polyline和Rectangle。Shape物件共享以下通用屬性。

Stroke：說明如何繪製形狀的輪廓。
StrokeThickness：說明形狀輪廓的粗細。
Fill：說明如何繪製形狀的內部。
用於指定座標和頂點的資料屬性，以與裝置無關的畫素來度量。

由於形狀物件派生於UIElement，因此可以在面板和大多數控制元件中使用。Canvas面板是用於建立複雜繪圖的特別理想的選擇，因為它支援對其子物件的絕對定位。

使用Line類可以在兩個點之間繪製一條直線。下面的示例演示了幾種指定線條座標和描邊屬性的方法。

XAML

<Canvas Height="300" Width="300">

  <!-- Draws a diagonal line from (10,10) to (50,50). -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    Stroke="Black"
    StrokeThickness="4" />

  <!-- Draws a diagonal line from (10,10) to (50,50)
       and moves it 100 pixels to the right. -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    StrokeThickness="4"
    Canvas.Left="100">
    <Line.Stroke>
      <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
        <RadialGradientBrush.GradientStops>
          <GradientStop Color="Red" Offset="0" />
          <GradientStop Color="Blue" Offset="0.25" />
        </RadialGradientBrush.GradientStops>
      </RadialGradientBrush>
    </Line.Stroke>
  </Line>

  <!-- Draws a horizontal line from (10,60) to (150,60). -->
  <Line
     X1="10" Y1="60"
     X2="150" Y2="60"
     Stroke="Black"
     StrokeThickness="4"/>

</Canvas>

下圖顯示了所呈現的Line。

雖然Line類提供了Fill屬性，但設定該屬性無效，因為Line沒有區域。

另一個常用形狀是Ellipse。通過定義形狀的Width和Height屬性來建立Ellipse。若要繪製一個圓，請指定一個其Width和Height值相等的Ellipse。

XAML

        <Ellipse
        Fill="Yellow"
        Height="100"
        Width="200"
        StrokeThickness="2"
        Stroke="Black"/>

下圖顯示了一個已呈現Ellipse的示例。

使用 Path 和 Geometry

使用Path類可以繪製曲線和複雜形狀。這些曲線和形狀使用Geometry物件來說明若要使用Path，請建立一個Geometry並使用它來設定Path物件的Data屬性。

可以從各種Geometry物件中進行選擇。LineGeometry、RectangleGeometry和EllipseGeometry類說明了相對簡單的形狀。若要建立更復雜的形狀或建立曲線，請使用PathGeometry。

PathGeometry 和 PathSegment

PathGeometry物件由一個或多個PathFigure物件組成；每個PathFigure代表一個不同的“圖形”或形狀。每個PathFigure自身又由一個或多個PathSegment物件組成，每個物件均代表圖形或形狀的已連線部分。 Segment 型別包括LineSegment、BezierSegment和ArcSegment。

在下面的示例中，使用一個Path來繪製二次方貝塞爾曲線。

XAML

<Path Stroke="Black" StrokeThickness="1">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigureCollection>
          <PathFigure StartPoint="10,100">
            <PathFigure.Segments>
              <PathSegmentCollection>
                <QuadraticBezierSegment Point1="200,200" Point2="300,100" />
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>
        </PathFigureCollection>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

下圖顯示了所呈現的形狀。

有關PathGeometry和其他Geometry類的更多資訊，請參見Geometry 概述。

XAML 縮寫語法

在Extensible Application Markup Language (XAML) 中，還可以使用一種特殊的縮寫語法來說明Path。在下面的示例中，使用縮寫語法來繪製一個複雜形狀。

XAML

<Path Stroke="DarkGoldenRod" StrokeThickness="3" 
Data="M 100,200 C 100,25 400,350 400,175 H 280" />

下面的影象顯示了一個已呈現的Path。

Data特性字串以“moveto”命令開頭（由 M 指示），它為Canvas的座標系統中的路徑建立一個起點。Path資料引數區分大小寫。大寫的 M 指示新的當前點的絕對位置。小寫 m 則指示相對座標。第一段是一個三次方貝塞爾曲線，該曲線從 (100,200) 開始，在 (400,175) 結束，使用 (100,25) 和 (400,350) 這兩個控制點繪製。此段由Data特性字串中的 C 命令指示。同樣，大寫的 C 指示絕對路徑；小寫的 c 則指示相對路徑。

第二段以絕對水平“lineto”命令 H 開頭，它指定繪製一條從前面的子路徑的終結點 (400,175) 到新終結點 (280,175) 的直線。由於它是一個水平“lineto”命令，因此指定的值是x座標。

有關完整的路徑語法，請參見Data參考內容和如何：使用 PathGeometry 建立形狀。

繪製形狀

Brush物件用於繪製形狀的Stroke和Fill。在下面的示例中，指定了Ellipse的描邊和填充。請注意，畫筆屬性的有效輸入可以是關鍵字或十六進位制顏色值。有關可用的顏色關鍵字的更多資訊，請參見System.Windows.Media名稱空間中Colors類的屬性。

<Canvas Background="LightGray"> 
   <Ellipse
      Canvas.Top="50"
      Canvas.Left="50"
      Fill="#FFFFFF00"
      Height="75"
      Width="75"
      StrokeThickness="5"
      Stroke="#FF0000FF"/>
</Canvas>

下圖顯示了所呈現的Ellipse。

您也可以使用屬性元素語法顯式建立一個SolidColorBrush物件，以使用純色繪製形狀。

<!-- This polygon shape uses pre-defined color values for its Stroke and
     Fill properties. 
     The SolidColorBrush's Opacity property affects the fill color in 
     this case by making it slightly transparent (opacity of 0.4) so 
     that it blends with any underlying color. -->
   
<Polygon
    Points="300,200 400,125 400,275 300,200"
    Stroke="Purple" 
    StrokeThickness="2">
    <Polygon.Fill>
       <SolidColorBrush Color="Blue" Opacity="0.4"/>
    </Polygon.Fill>
</Polygon>

下圖顯示呈現的形狀。

還可以繪製形狀的帶有漸變、影象、圖案等效果的描邊或填充。有關更多資訊，請參見使用純色和漸變進行繪製概述。

可拉伸形狀

Line、Path、Polygon、Polyline和Rectangle類都有一個Stretch屬性。該屬性確定如何拉伸Shape物件的內容（要繪製的形狀）以填充Shape物件的佈局空間。Shape物件的佈局空間是佈局系統分配給Shape（根據顯式的Width和Height設定，或其HorizontalAlignment和VerticalAlignment設定）的空間量。有關 Windows Presentation Foundation 中的佈局的更多資訊，請參見佈局系統概述。

Stretch 屬性使用以下值之一：

None：不拉伸Shape物件的內容。
Fill：拉伸Shape物件的內容以填充其佈局空間。不保留長寬比。
Uniform：儘可能地拉伸Shape物件的內容以填充其佈局空間，同時保留其原始長寬比。
UniformToFill：完全拉伸Shape物件的內容以填充其佈局空間，同時保留其原始長寬比。

請注意，在拉伸Shape物件的內容時，會在拉伸之後繪製Shape物件的輪廓。

在下面的示例中，使用一個Polygon從 (0,0) 到 (0,1)，再到 (1,1) 繪製一個非常小的三角形。Polygon物件的Width和Height設定為 100，其拉伸屬性設定為 Fill。結果是，將拉伸Polygon物件的內容（三角形）以填充更大的空間。

...
<Polygon
  Points="0,0 0,1 1,1"
  Fill="Blue"
  Width="100"
  Height="100"
  Stretch="Fill"
  Stroke="Black"
  StrokeThickness="2" />
...

...
PointCollection myPointCollection = new PointCollection();
myPointCollection.Add(new Point(0,0));
myPointCollection.Add(new Point(0,1));
myPointCollection.Add(new Point(1,1));

Polygon myPolygon = new Polygon();
myPolygon.Points = myPointCollection;
myPolygon.Fill = Brushes.Blue;
myPolygon.Width = 100;
myPolygon.Height = 100;
myPolygon.Stretch = Stretch.Fill;
myPolygon.Stroke = Brushes.Black;
myPolygon.StrokeThickness = 2;
...

變換形狀

Transform類提供了在二維平面中變換形狀的方法。不同型別的變換包括旋轉 (RotateTransform)、縮放 (ScaleTransform)、斜切 (SkewTransform) 和轉換 (TranslateTransform)。

經常應用於形狀的變換操作是旋轉。若要旋轉形狀，請建立一個RotateTransform並指定其Angle。 45 度的Angle將元素沿順時針方向旋轉 45 度；90 度將元素沿順時針方向旋轉 90 度；依此類推。如果您要控制元素的旋轉點，請設定CenterX和CenterY屬性。這些屬性值以要變換元素的座標空間表示。CenterX和CenterY具有預設值零。最後，將RotateTransform應用於該元素。如果您不希望變形影響到佈局，請設定形狀的RenderTransform屬性。

在下面的示例中，使用RotateTransform將形狀圍繞其左上角 (0,0) 旋轉 45 度。

XAML

<!-- Rotates the Polyline 45 degrees about the point (0,0). -->
<Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" 
  Stroke="Blue" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50">
  <Polyline.RenderTransform>
    <RotateTransform CenterX="0" CenterY="0" Angle="45" />
  </Polyline.RenderTransform>
</Polyline>

在下一個示例中，另一個形狀將旋轉 45 度，但這一次圍繞點 (25,50) 進行旋轉。

XAML

<!-- Rotates the Polyline 45 degrees about its center. -->
<Polyline 
  Points="25,25 0,50 25,75 50,50 25,25 25,0" 
  Stroke="Blue" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50"
  RenderTransformOrigin="0.5,0.5">
  <Polyline.RenderTransform>
    <RotateTransform Angle="45" />
  </Polyline.RenderTransform>
</Polyline>

下圖顯示了應用這兩種變形的結果。

在上一個示例中，向每個形狀物件應用了一次變形。若要向一個形狀（或任何其他 UI 元素）應用多次變形，請使用TransformGroup。

請參見

概念

WPF 中的形狀和基本繪圖概述

形狀物件

使用 Path 和 Geometry

PathGeometry 和 PathSegment

XAML 縮寫語法

繪製形狀

可拉伸形狀

變換形狀

請參見

概念

WPF 中的形狀和基本繪圖概述

WPF中TemplateBinding和TemplatedParent的使用區別

node.js中 redis 的安裝和基本操作示例

WPF中ComboBox控制元件的SelectedItem和SelectedValue的MVVM繫結

Random類的概述和基本使用---Java

ArrayList集合概述和基本使用---Java

R語言基本繪圖-plot引數：標題，座標軸和顏色

py 中反射的基本應用和總結

WPF 使用DrawingVisual和DispatchFrame快速提升繪圖速度

ArrayList的集合概述和基本使用

Pytorch中nn.RNN()基本用法和輸入輸出

WPF基礎入門2 - WPF視窗類和垂直佈局面板基本使用

python中numpy的基本使用和random的一些函式

在WPF中的ItemsControl中使用事件和命令(Using events and Commands within ItemsControl in WPF)

WPF中的資料模板使用方式之一：CONTENTCONTROL、CONTENTTEMPLATE和TEMPLATESELECTOR的使用

sql中的常用語句和基本查詢語句

在jupyter中連線和使用mysql的一些基本操作

Wpf 中 DataGrid 的表級選單和行級選單

Wpf中Dispatcher.Invoke和Dispatcher.BeginInvoke的區別

05 netty的基本元件概述和EventLoop(執行緒池)的介紹

WPF 中的形狀和基本繪圖概述

形狀物件

使用 Path 和 Geometry

PathGeometry 和 PathSegment

XAML 縮寫語法

繪製形狀

可拉伸形狀

變換形狀

請參見

概念

相關推薦