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" />
元素
作用:WPF中用于绘制矢量图形的容器
关键属性:
Fill="Green":设置图形内部填充为绿色
没有设置Stroke,所以没有描边线
- <Path.Data> 元素
作用:定义Path的几何形状
子元素:可以是任何继承自Geometry的类(如EllipseGeometry、PathGeometry等)
元素
属性 值 说明
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>