System.Windows.Shapes.Path的使用

M移动到起点,L画直线到指定点,Z无参数,闭合路径,从当前点画直线回到起点

 <Path
     Grid.Row="1"
     Data="M10,10 L100,100 L100,10 Z"
     Fill="LightGreen"
     Stroke="DarkGreen"
     StrokeEndLineCap="Triangle"
     StrokeStartLineCap="Round"
     StrokeThickness="2" />

A半径X,半径Y 旋转角度 大弧标志 顺逆标志 终点X,终点Y

<Path
     Grid.Row="1"
     Data="M100,50 A50,50 0 0 1 150,100"
     Stroke="Red"
     StrokeThickness="2" />
  1. 元素
    作用:WPF中用于绘制矢量图形的容器

关键属性:
Fill="Green":设置图形内部填充为绿色

没有设置Stroke,所以没有描边线

  1. <Path.Data> 元素
    作用:定义Path的几何形状

子元素:可以是任何继承自Geometry的类(如EllipseGeometry、PathGeometry等)

  1. 元素
    属性 值 说明
    Center "150,100" 圆心坐标(X=150,Y=100)
    RadiusX 50 X轴半径(水平半径)
    RadiusY 50 Y轴半径(垂直半径)
    关键特性:
    当RadiusX = RadiusY时,绘制的是正圆

当RadiusX ≠ RadiusY时,绘制的是椭圆

完整闭合图形,不是圆弧(圆弧需要用ArcSegment)
圆弧示例(需要指定起点和终点
xml

<Path Data="M100,50 A50,50 0 1 1 200,50" Stroke="Red"/>

而EllipseGeometry的特性:

自动闭合:始终绘制完整闭合图形

无起点/终点概念:不像圆弧需要定义起止角度

隐式完整360°:没有部分绘制的选项

<Path Data="M100,50 A50,50 0 1 1 200,50" Stroke="Red"/>

也可以使用使用嵌套的XAML对象树

  <Grid>
      <!-- 统一设置画布尺寸和背景 -->
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <TextBlock Grid.Row="0" Text="WPF圆弧绘制示例" FontSize="16" HorizontalAlignment="Center" Margin="10" />

      <Canvas Grid.Row="1" Width="400" Height="400" Background="#EEE">
          <!-- 1. 最上方起点逆时针90° -->
          <Path Canvas.Left="50" Canvas.Top="50" Stroke="Red" StrokeThickness="3">
              <Path.Data>
                  <PathGeometry>
                      <PathFigure StartPoint="100,0">
                          <ArcSegment
                          Point="0,100"
                          Size="100,100"
                          SweepDirection="Counterclockwise"
                          IsLargeArc="false" />
                      </PathFigure>
                  </PathGeometry>
              </Path.Data>
          </Path>
          <TextBlock Canvas.Left="50" Canvas.Top="160" Text="1. 上方起点逆时针90°" Foreground="Red" />

          <!-- 2. 最上方起点顺时针180° -->
          <Path Canvas.Left="250" Canvas.Top="50" Stroke="Blue" StrokeThickness="3">
              <Path.Data>
                  <PathGeometry>
                      <PathFigure StartPoint="100,0">
                          <ArcSegment
                          Point="100,200"
                          Size="100,100"
                          SweepDirection="Clockwise"
                          IsLargeArc="true" />
                      </PathFigure>
                  </PathGeometry>
              </Path.Data>
          </Path>
          <TextBlock Canvas.Left="250" Canvas.Top="260" Text="2. 上方起点顺时针180°" Foreground="Blue" />

          <!-- 3. 最左边起点逆时针90° -->
          <Path Canvas.Left="50" Canvas.Top="250" Stroke="Green" StrokeThickness="3">
              <Path.Data>
                  <PathGeometry>
                      <PathFigure StartPoint="0,100">
                          <ArcSegment
                          Point="100,0"
                          Size="100,100"
                          SweepDirection="Counterclockwise"
                          IsLargeArc="false" />
                      </PathFigure>
                  </PathGeometry>
              </Path.Data>
          </Path>
          <TextBlock Canvas.Left="160" Canvas.Top="250" Text="3. 左边起点逆时针90°" Foreground="Green" />

          <!-- 4. 最左边起点顺时针180° -->
          <Path Canvas.Left="250" Canvas.Top="250" Stroke="Purple" StrokeThickness="3">
              <Path.Data>
                  <PathGeometry>
                      <PathFigure StartPoint="0,100">
                          <ArcSegment
                          Point="200,100"
                          Size="100,100"
                          SweepDirection="Clockwise"
                          IsLargeArc="true" />
                      </PathFigure>
                  </PathGeometry>
              </Path.Data>
          </Path>
          <TextBlock Canvas.Left="250" Canvas.Top="360" Text="4. 左边起点顺时针180°" Foreground="Purple" />
      </Canvas>
  </Grid>
posted @ 2025-08-17 22:47  孤沉  阅读(8)  评论(0)    收藏  举报